BDD Web Automation 11: Find Elements with findElements

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

Content

• Introduction to the findElements method
• findElement vs. findElements

Introduction to the findElements method

In the previous two posts, we talked about the page elements in such a way that they were positioned using driver.findElement(). Common operations are as follows:

driver.findElement({id:xxxxxxxx});

In selenium-webdriver, findElement method returns a single element, and the findElements method returns an array of all elements that matches the query. Take the Node.js homepage as an example, we want to list the menu items on this page. We use Chrome DevTools to locate one of the menu item:

then, you can copy the CSS selector from the link element in DevTools, which is:

body > header > div > nav > ul > li.nav-foundation > a

For more details on how to do it, refer to the last post: Use Chrome DevTools to Locate Elements Part 2.

To select an array of link elements, you need to modify the selector a bit to make it generic enough:

nav > ul > li > a

The Node.js code is as the following:

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

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

    //use findElements
    let links = await driver.findElements({css:'nav > ul > li > a'});
    for(let link of links) {
        text = await link.getText();
        console.log(text);
    }
    return driver.quit();
})()

Notice that we put the call inside an async function, so that we can use await keyword instead of using then call to chain the async calls of selenium-webdriver. You can run the above piece of code with the steps mentioned in article Use Chrome Browser for Automation.

It outputs texts of menu items:

HOME
ABOUT
DOWNLOADS
DOCS
GET INVOLVED
SECURITY
NEWS
FOUNDATION

findElement vs. findElements

Both of findElement and findElements methods can use 8 locating methods we discussed earlier. The difference between them is the first returns a single element, if no element found, it throws an exception and the latter returns an array of elements, it can return an empty list if no elements match the query.
Here I list the conditions happens to them when there are different number of matching elements.

• findElement
  • 0 match: throws error
  • 1 match: returns the element
  • 2 ~ n matches: returns the first element appear in the DOM
• findElements
  • 0 match: return an empty array
  • 1 match: returns array that contains one element only
  • 2 ~ n matches: returns array with all elements

Remember both of them returns a Promise object, which means you need to use “.then” call to chain the statements after it, or use await keyword inside an async function to call them.

Also see:
Previous Post: 10. Use Chrome DevTools to Locate Elements Part 2
Next Post: 12. Upload Files using Selenium WebDriver
First Post: 01. Create and Run the First Sample