Locators in selenium

Locators in selenium

Locators in selenium | Locating one or more elements based on ID, class, or name | What is a locator? | Locating by class attribute​ |Locating by ID | Locating by input name

Locators in selenium

As a user, the first thing you do when opening a web page is try to find the part of the page you’re interested in. If it is our social network, this might be the new messages icon; if it is our online banking, this might be our balance. You then use that information to consider your actions. In the same manner, WebDriver provides a wide variety of methods to locate elements on a page. This allows us to examine the page and enables us to check whether we see what we expect.

we’ll cover all the main methods for locating elements on pages. We will also look at how to compose those basic building blocks together into more complicated locators. Locating elements is only half the story. We will also cover ways to manage the different locating strategies you might want to use to make your code friendly and easy to work with.

Unlike human perception, WebDriver’s methods are very strict. If you’re looking for the new messages icon, you might be looking for something that looks like an envelope, but if that envelope is one day bigger or smaller, or a different color than how you remember, you will adapt. WebDriver doesn’t have that intelligence. If the icon changes from an envelope to something else, most users would quickly pick up on the change, but not every WebDriver invocation would. We will look at patterns you can use to make sure that your code remains robust to changes in the page that might otherwise break your code and create a maintenance issue.

Locating one or more elements based on ID, class, or name

WebDriver provides a number of ways to locate elements. We’ll look at how this worvks, and the main ways you can achieve this.

What is a search context?

Locating elements on any page occurs within what WebDriver refers to as a search context. Let’s quickly look at the SearchContext interface:

public interface SearchContext {
List<WebElement> findElements(By by);
WebElement findElement(By by);
}

This interface provides two methods: one that finds all the elements that match an instance of what is known as a locator in selenium, and a second that finds the first element that matches, or throws a NoSuchElementException if it is not found. That means the findElements method is useful for finding elements when you’re not sure if they will be on the page, or if you want to make sure they’re not on the page. Both the WebElement and WebDriver interfaces extend SearchContext , so all drivers and elements will have these methods.

What is a locator?

A locator describes what you want to find, and there is a zoo of them. In Java, you create a locator using the By class. Let’s look at an example of finding an h1 heading element on the current page:

WebElement heading1Element = driver.findElement(By.tagName("h1"));

And, for completeness, finding all the paragraph elements in the current page:

List<WebElement> paragraphElement = driver.findElements(By.tagName("p"));

As discussed, there are a number of core locator in selenium you can use to find elements on a page.

Locator Usage
Class Name
Locates elements by the value of the "class" attribute.
CSS Selector
Locates elements via the driver’s underlying W3 CSS Selector engine. If the browser does not implement the Selector API, a best effort is made to emulate the API. In this case, it strives for at least CSS2 support, but it offer no guarantees.
ID
Locates elements by the value of their id attribute.
Link Text
Locates elements by the exact text it displays
Name
Locates elements by the value of their name attribute.
Partial Link Text
Locates elements that contain the given link text
Tag Name
Locates elements by their tag name
XPath
Locates elements via XPath

Locating by link text

Link text is the preferred locator in selenium for links. Figure Login form http://localhost:8080/login.html  shows the link on the test app’s login page for forgotten passwords:

Figure 1. Login form http://localhost:8080/login.html This is represented by the following HTML:

<a href="#" id="change-password" class="btn">Forgotten Password</a>

And this can be located using the following:

driver.findElement(By.linkText("Forgotten Password"));

Any part of the string “Forgotten Password” can be used as the parameter for this method:

driver.findElement(By.partialLinkText("Forgotten Password"));
driver.findElement(By.partialLinkText("Forgotten "));
driver.findElement(By.partialLinkText("en Passwo"));

You should be cautious when using findElement with this locator. You may find other elements that contain the same partial text, so this should not be used to locate a single element on its own. Naturally, you can use it to locate a group of elements using the findElements method.

Locating by class attribute

Class is a locator in selenium. This locates elements by the value of the class attribute. This can be used only for those elements having a class attribute, but it is not a good selector to use with the findElement method. Class is used for styling pages, and as a result many elements are likely to have the same class. As findElement always returns the first element it finds, if the element you want is not in the first place, you won’t be able to use this to locate it. Even if it is the first element now, if a developer adds a new element with the same class earlier in the page, it will return the newly added element, instead of the element you’re trying to locate. This makes for brittle code.

In the login page in figure Login form http://localhost:8080/login.html , the “Forgotten Password” link has one CSS class: btn ; you can use class name btn to locate it: 

driver.findElement(By.className("btn"))

Locating by ID

Locating an element by its id attribute can be expressed as the following:

driver.findElement(By.id("change-password"))

If the site is built using JavaScript, ID is normally applied to important elements. IDs are meant to be unique, so if an element has an ID, it’s usually the most accurate way to identify the element. While IDs can accidentally appear multiple times on a page (for example, due to a programming error), this is rare. Since they are often added to facilitate JavaScript code, if this mistake occurs, the JavaScript will usually be faulty too, and therefore this will be spotted early in development. If ID is available, make it your first choice.

Locating by input name

This is a locator in selenium which locates elements by the value of the name attribute. Normally it can only be used to locate form elements built using: <input> , <button> , <select> , and <textarea> . Remember, if the same name is used for multiple elements on the same page, only the first encountered element will be returned. So before using this locator, you need to check whether the name is unique on the page. If it is, then it can be used; otherwise, other locators in selenium (or combination thereof) will need to be used. On the login page, there is an email input:

<input name="email" class="form-control" placeholder="Email"/>

So the code you would need would be the following:

driver.findElement(By.name("email"));

Locating by element tag name

This locators in selenium finds elements by their HTML tag name. Since there are often many repeating uses of most tags, it is not often possible to use this method to locate a single element. But it can be combined with other locators in selenium to effectively locate elements. One time you will find it useful is for locating the page’s heading, as there is usually only one of these:

<h1>Welcome to WebDriver!</h1>

driver.findElement(By.tagName("h1"));

Locating using CSS selectors

Alongside XPath locators, the CSS selector locator is powerful. You can use the CSS selector approach to find by ID for example:

#change-password
Locator CSS selector equivalent
By class name "the-class"
.the-class
By ID "the-id"
#the-id
By tag name "h1"
h1
By name "the-name"
*[name='the-name']

The purpose of a CSS selector locators in selenium is to mark part of a page for formatting, not for automation. It is reasonable for a developer to change every CSS selector on a page, especially when a site gets a new coat of paint in the form of a re-skin. This means that CSS selectors, while powerful, can be a somewhat brittle.

CSS selectors locators in selenium can be slower than other locators, and it is worthwhile bearing that is mind if you are thinking of using them. This book is focussed on teaching WebDriver, not on teaching CSS, so you can find out more about CSS on the Mozilla’s web site: https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials. CSS is a good choice if you cannot locate an element by name or ID.

Locating using XPath

XPath locators in selenium  are the most complex selector to use. It requires knowledge in XPath query language, so if you’re not fluent in that query language, you will find it difficult to find elements using XPath queries.

Let’s look at an example usage of an XPath for this HTML:

<a href="#" id="change-password">Change Password</a>
driver.findElement(By.xpath("//a[@id='change-password']"));

Author: Saad Mansuri

Leave a Reply

Your e-mail address will not be published. Required fields are marked *