BDD Web Automation 07: Use Chrome Browser for Automation

This post talks about how to use selenium-webdriver to automate the Chrome browser for web UI automation testing.

This is the 7th 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. Start from this post, we will focus on automation library, mainly selenium-webdriver and also some other libraries.

Preparation

1. Install node.js
2. Download the latest version of Chrome

Steps

1. Create a new directory locally use the following command, named it as “chrometest”, or some something similar.

$  mkdir chrometest

Note: there are some difference between Mac and Windows. For example, to create a directory, mkdir is used on Mac, while md on Windows.

2. Go to the “chrometest” directory and execute npm init -y to create a new project. -y means accepting all the default settings:

$ cd chrometest/
$ npm init -y 

npm outputs the following:

Wrote to C:\temp\chrometest\package.json:

{
  "name": "chrometest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. Install "selenium-webdriver" and "chromedriver" packages, with the following command:

npm install selenium-webdriver chromedriver --save

"--save" or "-s" is to save the packages configuration in “package.json” file after downloading. So that next time when you or someone else pull the code to other folders, just need to run npm install on the folder to reinstall all the dependency packages.

Note: if you are behind firewall, you can run the following command to configure the proxy for node.js before running npm:

set http_proxy=http://<your proxy>:<port>

4. Create a new script file “index.js” (or use the name you like) to write code:

// use selenium-webdriver
const webDriver = require('selenium-webdriver');
//to load chrome driver
require('chromedriver');

let By = webDriver.By;
 
// open chrome browser
let driver = new webDriver.Builder().forBrowser('chrome').build();

(async function () {
    await driver.get('https://www.bing.com');
    await driver.findElement(By.id('sb_form_q')).sendKeys('Disneyland');
    await driver.findElement(By.id('sb_form_go')).click();
})();

It will open Chrome browser and search for keyword “Disneyland”. For more information about selenium-webdriver api, go to https://seleniumhq.github.io/selenium/docs/api/javascript/.

By.id is used to tell “findElement” to search for element using “id” property, you can use another form of property, like below:

await driver.findElement({id:'sb_form_q'}).sendKeys('Disneyland');
await driver.findElement({id:'sb_form_go'}).click();

Run the script

Run the below command to run the script, you should be able to see a Chrome browser is automatically opened and navigated to the Bing homepage, and then search for a keyword in Bing Search.

node index.js

Or you can also run it inside CukeTest:

1. Open the “chrometest” folder with CukeTest,
2. Open the "index.js" file in CukeTest editor, and click "Run Script" arrow button:

The advantage is you will have intelli-sense for the automation library, and don’t have to switch between command prompt and editor.

In the next post, we will talk about Chrome development tool.

Previous Post: 06. Generate Cucumber Script with Right Tool
First Post: 01. Create and Run the First Sample