BDD Web Automation 13: Automate Browser Behaviors

This is the 13th post in a series, BDD Automation Test for Web UI. It mainly talks about how to write Web automation test script with Cucumber.js, a BDD test framework. You will be using Node.js as the programming language.

In this article, we will discuss how to control browser behaviors with Selenium APIs.

Content

• Navigation APIs
  • Forward
  • Backward
  • Refresh
• Browser Window APIs
  • Maximize
  • Full screen
  • Set window size
• Close current page
• Close browser

Navigation APIs

Most browsers have three buttons on the toolbar, which are Backward, Forward, and Refresh page. In automation script, we sometimes need to validate whether the page can behave normally or UI looks correct when these buttons are clicked. WebDriver provides the APIs on Navigation that can do this:

• back()
• forward()
• refresh()

Below is the Node.js code that use selenium-webdriver library:

require('chromedriver');
const { Builder } = require('selenium-webdriver')
let driver = new Builder().forBrowser('chrome').build();

(async function() {
    await driver.get('https://nodejs.org/en/')
    await driver.findElement({ linkText: "DOCS" }).click();
    await driver.sleep(2000);

    await driver.navigate().back();
    await driver.sleep(2000);

    await driver.navigate().forward();
    await driver.sleep(2000);

    await driver.navigate().refresh();
    await driver.sleep(2000);
})()

To run this script, you can follow the article 07: Use Chrome Browser for Automation to set up your testing project.

Browser Window APIs

Selenium also provides APIs that manipulates browser window, they are listed below:

The difference between close() and quit() is that close() will only close the current active tab managed by the driver instance, white quit() will close all windows managed by the driver and do the cleanup. If there are only one tab opened by the driver, calling close() or quit() will have the same effect.

You should call quit() API at the end of the automation script, to do the cleanup work. It makes sure all the browser windows launched by your script are closed properly.

When you create a Cucumber.js script, you can put driver.quit() statement in the After hook or AfterAll hook, depends on where you initialize the driver instance. For more information about hooks, refer to 04: Hooks and TimeOut.

If you create a new browser window for every Scenario and destroy the window when the Scenario ends, you should put the driver instance initiating statement in the Before hook, and quit() statement in the After hook. In this case, you should assign driver instance to World instance, so that it can be retrieved in the step definition functions of the Scenario.

If you use the same driver instance for the entire automation script, then you can initialize the driver when the script starts, or put it in BeforeAll hook. And put the “driver.quit()” statement in the AfterAll hook.

Sometimes, you want to test how the page layout when browser is under different resolutions. By just maximizing browser window, or make it full screen does not always serve the purpose. The script may runs on some computers with different desktop resolutions. You can set the Browser explicitly to certain window size. For example, in the script you can open browser, load the page, set it to certain window size, capture screenshot and put the screenshot in the Cucumber report. If the web project is created by CukeTest, it provide code that automatically capture the screenshot from the browser for each scenario and insert into report. The sample can be found in 01: Create and Run the First Sample

Below is the sample code that call these browser window APIs.

require('chromedriver');
const { Builder } = require('selenium-webdriver')
let driver = new Builder().forBrowser('chrome').build();

(async function() {
    await driver.get('https://nodejs.org/en/')

    await driver.manage().window().maximize();
    await driver.sleep(2000);

    await driver.manage().window().fullscreen();
    await driver.sleep(2000);

    await driver.manage().window().setSize(1024, 768);
    await driver.sleep(2000);

    await driver.close();
    await driver.quit();
})()

When you edit the sample code in CukeTest, it has built in Intelli-Sense for “selenium-webdriver” library, which will prompt you with a list of methods you can call.

Other posts:

• Previous Post 12. Upload Files using Selenium WebDriver
• First Post 01. Create and Run the First Sample