WebdriverIO - Handling Child Windows/Pop ups



A new child window can open on clicking a link or a button. WebdriverIO by default has control over the main browser window, in order to access the elements on the child window, the WebdriverIO control has to be switched from the main page to the child window.

Methods for Child Windows

Some of the methods to work with child windows are as follows −

browser.getWindowHandles()

This method yields the window handle ids of all the currently opened browser windows in the form of a list. If there are two opened windows, the zero index of the list has the handle id of the parent window and the first index shall point to the window handle of the child.

Syntax

The syntax is as follows −

var x = browser.getWindowHandles()

browser.getWindowHandle()

This method yields the window handle id of the browser which is in focus.

Syntax

The syntax is as follows −

let l = browser.getWindowHandle()

browser.switchToWindow('<window handle id>')

This method is used to switch focus from one browser window to another opened window whose window handle id is passed as a parameter to this method.

Syntax

The syntax is as follows −

browser.switchToWindow(x)

In the below image, on clicking the Sign in with Apple button, a child window opens having the browser title as Sign in with Apple ID. Let us try to switch to the child window and access elements there.

Child Window

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Child Window', function(){    
      // launch url
      browser.url('https://secure.indeed.com/account/login')  
      //identify element then click
      $('#apple-signin-button').click()
      //get all window handle ids in list
      var l = browser.getWindowHandles()
      //switch to child window
      browser.switchToWindow(l[1])
      //get page title of child window
      console.log(browser.getTitle() + ' - Page title of child window')
      //close child window
      browser.closeWindow()
      //switch to parent window
      browser.switchToWindow(l[0])
      //get page title of parent window
      console.log(browser.getTitle() + ' - Page title of parent window')      
   });
});

Run the Configuration file - wdio.conf.js file with the following command −

npx wdio run wdio.conf.js 

The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation.

The following screen will appear on your computer −

Child Window Pop

After the command has been executed successfully, first the page title of the child window - Sign in with Apple ID gets printed in the console. Then, the page title of the parent window - Sign In | Indeed Accounts get printed in the console.

Advertisements