- WebdriverIO Tutorial
- WebdriverIO - Home
- WebdriverIO - Introduction
- WebdriverIO - Prerequisite
- WebdriverIO - Architecture
- WebdriverIO - Getting Started with NodeJS
- WebdriverIO - Installation of NPM
- WebdriverIO - VS Code Installation
- WebdriverIO - Package.json
- WebdriverIO - Mocha Installation
- Selenium Standalone Server Installation
- WebdriverIO - Configuration File generation
- WebdriverIO - VS Code Intellisense
- WebdriverIO - Wdio.conf.js file
- WebdriverIO - Xpath Locator
- WebdriverIO - CSS Locator
- WebdriverIO - Link Text Locator
- WebdriverIO - ID Locator
- WebdriverIO - Tag Name Locator
- WebdriverIO - Class Name Locator
- WebdriverIO - Name Locator
- Expect Statement for Assertions
- WebdriverIO - Happy Path Flow
- WebdriverIO - General Browser Commands
- WebdriverIO - Handling Browser Size
- WebdriverIO - Browser Navigation Commands
- Handling Checkboxes & Dropdowns
- WebdriverIO - Mouse Operations
- Handling Child Windows/Pop ups
- WebdriverIO - Hidden Elements
- WebdriverIO - Frames
- WebdriverIO - Drag & Drop
- WebdriverIO - Double Click
- WebdriverIO - Cookies
- WebdriverIO - Handling Radio Buttons
- Chai Assertions on webelements
- WebdriverIO - Multiple Windows/Tabs
- WebdriverIO - Scrolling Operations
- WebdriverIO - Alerts
- WebdriverIO - Debugging Code
- WebdriverIO - Capturing Screenshots
- WebdriverIO - JavaScript Executor
- WebdriverIO - Waits
- WebdriverIO - Running Tests in Parallel
- WebdriverIO - Data Driven Testing
- Running Tests from command-line parameters
- Execute Tests with Mocha Options
- Generate HTML reports from Allure
- WebdriverIO Useful Resources
- WebdriverIO - Quick Guide
- WebdriverIO - Useful Resources
- WebdriverIO - Discussion
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.
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 −
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.
To Continue Learning Please Login
Login with Google