BDD Web Automation 09: Use Chrome DevTools to Locate Elements

This is the 9th 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.

Content

• Find elements by id
• Find by name
• Find by class
• Find elements by XPath

Find elements by id

The id attribute specifies the unique attribute of the element in html. If an element has id attribute, it is always recommended to use the id attribute to locate this element. Take Bing search as an example, we can use Chrome DevTools to locate the input box, as shown below:

The “id” of the input box found by the element locator is “sb_form_q”, so in selenium code, we can write the code as:

require('chromedriver');
const { Builder } = require('selenium-webdriver');
let driver = new Builder().forBrowser('chrome').build();
driver.get('http://www.bing.com');

//Use id attribute to locate element
driver.findElement({id:'sb_form_q'}).sendKeys('CukeTest')

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

Find by name

In html page, name attribute can be added to a element, sometimes to identify a field when submit a html form. So if id is not available but name is unique, you can use the name attribute to locate the element. For example, in the Bing search page, the input box name attribute is “q” and “q” is unique across the page. So the code can look like this:

require('chromedriver');
const { Builder } = require('selenium-webdriver');
let driver = new Builder().forBrowser('chrome').build();
driver.get('http://www.bing.com');

//use name attribute to locate element
driver.findElement({name:'q'}).sendKeys('CukeTest');

Find by class

In html class attribute is used to specify CSS class name for an element. In most cases, class is used to define the display styles, class can also be used in the web page to locate element. In Selenium, when a class name is used to locate the element, and there are multiple elements in the page use the same class, the first element is returned. To reduce the possible errors, please ensure that the class name is unique in the page when use it. Also take the Bing search as an example. The class attribute value is “b_searchbox” and it is unique. So we can write code like this:

require('chromedriver');
const { Builder } = require('selenium-webdriver');
let driver = new Builder().forBrowser('chrome').build();
driver.get('http://www.bing.com');

//Use class attribute to locate element
driver.findElement({className:'b_searchbox'}).sendKeys('CukeTest') 

Find by XPath

XPath is a domain language for finding information in an XML document. It can locate elements and attributes in an XML document. Modern web pages are valid html are also XML file. Therefore XPath can be used to locate page elements of html. For the specific syntax learning of XPath, you can refer to XPath Tutorial for information. Here is a way to automatically generate XPath through Chrome developer tools.

1. Open the Bing search and use the Chrome DevTools to locate the input box
2. Right click on the element - Copy--Copy XPath

As shown below:

The code is:

require('chromedriver');
const { Builder } = require('selenium-webdriver');
let driver = new Builder().forBrowser('chrome').build();
driver.get('http://www.bing.com');

// Use XPath to locate element
driver.findElement({xpath:'//*[@id="sb_form_q"]'}).sendKeys('CukeTest');

Summary

We discussed 4 methods to locate a web element during automation testing. Among them, id, name and class attributes are preferred ones. Choose any of them that can uniquely identify the web element. If none of them is unique, then you can resort to XPath, which can always be uniquely when identifying elements. The problem of XPath is that it is more likely to change when a html page is updated, for example, when its layout is changed. Therefore XPath is less stable and the automation script may need more maintenance work compare the the other three methods.

The above are the four most commonly used methods for locating elements, and there are four other methods for locating elements, which will be covered in the next article.

Previous Post: 08. Use Chrome Developer Tools
Next Post: 10. Use Chrome DevTools to Locate Elements Part 2
First Post: 01. Create and Run the First Sample