webdriverjs switching windows

WebDriverJS Switching Windows

Reading Time 1 minutes

When writing an automated test, you may encounter scenarios where you might have to switch browser windows. In this post we will look at how we can switch windows.

WebDriverJS Switching Windows

Firstly, let’s write out in comments what we would like to achieve.

// Save location to parent window
// Print parent window title
// Switch to new window
// Print text in newly switched window
// Switch back to parent window
// Print parent window title

Assuming we are able to achieve the above scenario, we should be able to figure out how to switch windows.

Switching Windows

In order to switch windows, we need to use the ‘getAllWindowHandles()’ command. Let’s have a look below:

driver.getAllWindowHandles().then(function gotWindowHandles(allhandles) {
    // Save location to parent window
    // Print parent window title
    // Switch to new window
    // Print text in newly switched window
    // Switch back to parent window
    // Print parent window title
});

Since ‘getAllWindowHandles()’ returns a promise, we need to wrap it in a ‘then’.

Further Switching Windows

Let’s take this a step further and try to address each of the comments:

driver.getAllWindowHandles().then(function gotWindowHandles(allhandles) {
    // Save location to parent window
    var parent = driver.getWindowHandle();
 
    // Print parent window title
    driver.getTitle().then(function (text) {
        console.log('Parrent Windows: ' + text);
    });
 
    // Switch to new window
    driver.switchTo().window(allhandles[allhandles.length - 1]);
 
    // Print text in newly switched window
    driver.findElement(webdriver.By.css('h1')).then(function (heading) {
        heading.getText().then(function (text) {
            console.log('Child Windows: ' + text);
        });
    });
 
    // Switch back to parent window
    driver.switchTo().window(parent);
 
    // Print parent window title
    driver.getTitle().then(function (text) {
        console.log('Parrent Windows: ' + text);
    });
});

The main things to note here are the variable to capture the parent window and how we switch back and forth between the parent and child windows. It is also important to note that when switching windows, the driver simple gains control over eachwindow. We do not need to use a different driver instance.

Full Example

Script.js

var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();
driver.get('http://www.thetestroom.com/webapp');
driver.findElement(webdriver.By.id('footer_term')).click();
 
driver.getAllWindowHandles().then(function gotWindowHandles(allhandles) {
    // Save location to parent window
    var parent = driver.getWindowHandle();
 
    // Print parent window title
    driver.getTitle().then(function (text) {
        console.log('Parrent Windows: ' + text);
    });
 
    // Switch to new window
    driver.switchTo().window(allhandles[allhandles.length - 1]);
 
    // Print text in newly switched window
    driver.findElement(webdriver.By.css('h1')).then(function (heading) {
        heading.getText().then(function (text) {
            console.log('Child Windows: ' + text);
        });
    });
 
    // Switch back to parent window
    driver.switchTo().window(parent);
 
    // Print parent window title
    driver.getTitle().then(function (text) {
        console.log('Parrent Windows: ' + text);
    });
});

The should output the following:

Expected Output

Parrent Windows: Zoo Adoption | Home
Child Windows: Terms of the site
Parrent Windows: Zoo Adoption | Home

Mo

I am a passionate tester, father, husband and gamer. I love to write blogs about Software Testing and generally contribute back to the Software Testing world.

More Posts - Twitter - Facebook

Published by

Mo

I am a passionate tester, father, husband and gamer. I love to write blogs about Software Testing and generally contribute back to the Software Testing world.

Leave a Reply