How to get handle of popup window (WebdriverIO)

Question

I am very very new to automated testing and I am currently completely stuck with the following issue:

I have a webpage open(first window) In the same test I call a .newWindow(second window) and do some stuff in that window. The last action opens new popup window(popup window). What I need, is to set the focus on a popup window.

According to WebdriverIO API I can use .switchTab http://webdriver.io/api/window/switchTab.html But to be able to switch to a popup window I have to indicate handle, but I don't understand how to get the handle of a popup window :(

That s 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 is a lot of examples in java, but i didnt find anything that would fit mine language. Please, excuse me my dumbness, I am really a very beginner and I will appreciate if somebody could explain that to me.

Thanks a lot in advance!

Answer 1

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!

Answer 2

I notice you stated "The last action opens new popup window(popup window). What I need, is to set the focus on a popup window."

I had this issue. But the new window was opened when clicking on login with facebook. This caused an issue on finding the handle for the new window because I could not use .newWindow('http://localhost:9001/') . The API keys and all sorts are added as parameters when using a social login. So one has little control

To handle this I registered each window ID as its opened.

The first background step in my feature is Given I open the url "/a.html"

In the step you can set an empty array as the variable windowID with let let windowID = []

So my step file would 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 then check all the open window ID's and drop 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's 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 add credentials as an environment variable. This is a good idea, you don't want to commit your personal credentials to the code base. One may think well obviously, but you may not, who knows.

You had your question answered years ago, but I found this post first when trying to find a solution so it seems a sensible place to put this addition.