How to get the handle of the popup (WebdriverIO)
I am very new to automated testing and am currently completely stuck with the following problem:
I have a web page open (first window) In the same test, I call .newWindow (second window) and do some things on that window. The last action opens a new popup (popup). I need to focus on the popup.
According to the WebdriverIO API, I can use the .switchTab http://webdriver.io/api/window/switchTab.html But to be able to switch to the popup I have to specify the handle, but I don't understand how to get the handle of the popup: (
This is my piece of code:
//this is the part where I have already second window open
it('should open email letter', function(done) {
client
.pause(2000)
.clickAndWait('[title="Password restore"]', 4000)
.clickAndWait('[title="Restore password"]', 7000) //this is the part where popup window opens
.pause(2000)
.windowHandles(function(err,res){
console.log(res, handles)
}) // I have got three handles but i dont know how to use them now
.........
There are many examples in java, but I haven't found anything that matches my language. Please excuse me my stupidity, I am really a very newbie and I would appreciate if someone can explain this to me.
Many thanks!
do we not use getCurrentTabId
to remember the handle of the currently open window?
For example:
var main, popup; //your window handles
client
.getCurrentTabId(function (err, handle) {
main = handle;
})
.newWindow('http://localhost:9001/') //you are on popup window
.getCurrentTabId(function (err, handle) {
popup = handle;
})
.switchTab(main) //you are back to main window
.switchTab(popup) //you are on popup again
.close(popup) //extra bonus!
source to share
I noticed that you said, "The last action opens a new popup (popup). I need to set focus on the popup."
I had this problem. But a new window was opened when clicking on the facebook login. This caused a problem finding the handle for the new window because I couldn't use .newWindow('http://localhost:9001/')
. API keys and all kinds are added as parameters when using social login. Thus, the person has little control.
To handle this, I registered each window ID as open.
The first background in my function is Given I open the url "/a.html"
In this step, you can set an empty array as a variable windowID
with letlet windowID = []
So my steps file will look like this
const url = 'http://localhost:8080'
let windowID = []
this.Given(/^I open the url "([^"]*)"$/, (path) => {
browser
.url(url + path)
console.log(`# Navigating to ${url + path}`)
expect(browser.getUrl()).toEqual(url + path)
windowID.main = browser.getTabIds()
});
During the step after clicking the Facebook button, you can check all the id of the open window and discard the one that matches windowID.main
this.When(/^I authenticate with facebook$/, function (arg1) {
// log the ID of the main window
console.log('Main Window ID' + windowID.main)
browser
.pause(2000)
.getTabIds().forEach(function (value) {
if (value === windowID.main) {
// we do not need to do anything with windowID.main as it already set
return
}
// if the value does not match windowID.main then we know its the new facebook login window
windowID.facebook = value
})
// log both of these
console.log('Main Window ID: ' + windowID.main)
console.log('Facebook Window ID: ' + windowID.facebook)
// Do the login
browser
.switchTab(windowID.facebook)
.setValue('input[name="email"]', process.env.FACEBOOK_EMAIL)
.setValue('input[name="pass"]', process.env.FACEBOOK_PASSWORD)
.submitForm('form')
});
Note that I am adding credentials as an environment variable. It's a good idea, you don't want to pass your personal data into the code base. You might think well, but you can't, who knows.
You had a question that you answered many years ago, but I first found this post trying to find a solution, so it seems like a convenient place to add this addition.
source to share