<<Previous Post                          << Complete Tutorial>>                             Next Post>>

WebDriverIO – Handling Multiple Windows in WebDriverIO

This Article tell us how to switch between multiple windows, for that we need to understand few commands which are as follows:-

browser.switchToWindow() command is used to switch from one window to another. i.e., Parent to child or from child to Parent or Vice Versa.

browser.getWindowHandle() command returns the window handle for the current top-level browsing context.

browser.getWindowHandles() command returns a list of window handles for every open top-level browsing context. The Order in which the window handles are returned is arbitrary.

Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)

Here is the small Exercise to switch window from parent window to child window and then from child window to parent window, using above mentioned commands in WebDriverIO.

Handling Multiple Windows

First, I will demonstrate the exercise where we will see how we have to move from parent window to child window then move back from child window to parent window, followed by practically demonstrating the WebDriverIO Automation code for achieving it.

Exercise:-

1)  Navigate to http://omayo.blogspot.com/

2) Click on link which will open a popup window.

3) Convert pop up window to full screen window.

4) Switch back to Parent Window.

Pre-requisite: Download the Project from here (Click here to Download) and Unzip it.

Practical Demonstration:

1)  Open Visual Studio Code on your system

2)  Click on File and Select Open Folder. Select the project folder on which your workspace is present.

3)  Expand ‘test’ from the Explorer, right click on the displayed ‘specs’ and select ‘New File’ option as shown below:

4) Give any name of the newly created file say “handlingMultipleWindows_test.js” and copy the below given code into the newly created file as shown below and save the file:

The following is the WebDriverIO sample code for switching from parent window to new window and then moving back from new window to parent window. You can understand this code, by reading the comments provided in the below code:

Copy the code from here:-

describe('Handling Multiple Windows switching to child window and then switching to parent window back',()=> {
        it('should make switching from parent to child and child to parent window', () => {    
        browser.url('http://omayo.blogspot.com/')
        var parentWindow = browser.getWindowHandle()
        $('#HTML37 > div:nth-child(2) > p:nth-child(2) > a:nth-child(1)').click()
        browser.pause(3000)
        var ID = browser.getWindowHandles()
        for(var i = 0; i< ID.length; i++){
            if( ID[i]!= parentWindow){
                browser.switchToWindow(ID[i])
                browser.maximizeWindow()
                break;
            }
        }
        browser.pause(3000)
        browser.switchToWindow(parentWindow)
        browser.pause(3000)
    })
})

5) Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly in this file as shown below and save it:

6) Click on Terminal and Open New Terminal.

7) By Default, Powershell Terminal will open as shown below:

8) Run geckodriver.exe in the Powershell terminal as shown below to run Geckodriver in background.

9) Open Another Terminal in the same way we did in the step 6 and run below command in terminal

.\node_modules\.bin\wdio .\wdio.conf.js

Observe that the ‘handlingMultipleWindows_test.js’ will get executed successfully, the Firefox Browser will launch and respective action will be taken by WebDriverIO Automation code.

And also, the result will be displayed as ‘Passed’ in the terminal as shown below:

This is how, we can switch from parent window to child window then move back from child window to parent window , and I will explain other commands to perform different operations on WebPages using WebDriverIO in the upcoming Articles ­.

Next Steps:

> To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)

> Check complete WebDriverIO Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning ?

About Me > Ajay Lunia 

Connect to me on LinkedIn (Click here)

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                          << Complete Tutorial>>                            Next Post>>