BDD Web Automation 10: Use Chrome DevTools to Locate Elements Part 2

This is the 10th 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 element by CSS
• Find element by linkText
• Find element by partialLinkText
• Find element by tagName

Find element by CSS

We know CSS (Cascading Style Sheets) is used to define styles for HTML elements. Also in web development, jQuery is very popular and it uses CSS selector to find elements. In web automation, we can also use CSS selector to locate web elements. For tutorials on CSS selector, you can refer to CSS Selector Reference. Here is a way to quickly get CSS selector for an element:

Open the Chrome Developer Tools and navigate to the Bing input box.
Right click on the element – Copy – Copy selector, 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 css path to select element 
driver.findElement({css:'#sb_form_q'}).sendKeys('CukeTest')

Find element by linkText

Selenium-webdriver can locate element by matching hyperlink text. For example, Google search page has a link to Gmail. We can locate this web element by the text value on the link.

Suppose we want to click on the “Gmail” to jump to the Google mail page. The code is:

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

// use linkText to locate element
driver.findElement({linkText:'Gmail'}).click();

Find element by partialLinkText

With linkText we can locate hyperlink elements, partialLinkText does the same thing, but uses partial matching. We use the same example as above, which is to click “Gmail” link on Google Search page. When find by linkText you have to match the link text exactly (and should be case-sensitive). When using the partialLinkText method, you only need to do partial match, as long as the text you search for is substring of the link text, the element will be considered a match. Please note that it should still be case sensitive match. Notice below I use “mail” to do search and it partial matches “Gmail”:

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

// Use partialLinkText to locate
driver.findElement({partialLinkText :'mail'}).click();

Find element by tagName

As the name tagName is the tag name of each element in html, like INPUT, A, BUTTON, IMG etc.

//... the same as above sample ...

driver.findElement({tagName :'input'}).click();

This is hardly used in automation, because multiple elements with the same tag type can appear on a web page. The selenium-webdriver API document does not encourage you to use this method to locate elements.

Summary

The above are four methods to locate elements in selenium-webdriver, including css, linkText, partialLinkText, tagName. Among them, css is used more than other 3 ones. These 4 are less frequently used compare the other 4 methods we discussed in the previous article:

Also see:
Previous Post: 09. Use Chrome DevTools to Locate Elements
Next Post: 11. Find Elements with findElements
First Post: 01. Create and Run the First Sample