Selenium Locators

Selenium Locators

September 12, 2018
frontpage, QA
No Comment
WebElements are sometimes hard to find when you are creating automation tests. This means you must find the most robust way to pinpoint those elements, so you won’t need to maintain them so frequently.

In order for Selenium to interact with a certain web pages it will have to gain access to certain elements in the code. To do that you must first get familiar with tools for Element Inspection. All common browsers have such tools:

Firefox: Right click on any element and select Inspect Element or F12. You can use Firebug as an add on (old versions of FF have it as a default)
Chrome: Right click on any element and select Inspect Element or F12.
IE: Go to Developers Tool (F12), then Right click on any element and select Inspect Element
Safari: Go to Preferences, click on Advanced tab and enable Show Developer Menu.

You can use different approaches to locate Elements and use them in your Selenium tests. You can choose from the following:


The first and most easy way is to match an ID to an element. This is most useful when there are unique IDs in the html body for the prefered element/s that you want to search for. They will look like this:

In this case the ID is “email”. The IDs can also be numeric values.


One of the most common ways of finding elements is by using xpath. All of the most commonly used browsers can copy the xpath path of an element to your clipboard. You can use this to get all needed elements just by using the following command:

You can replace FIND with options for an “absolute path” of an element (html/body/div1/pic1), or you can use “relative path” (//pic1).
Using indexing in xpath is also available (//pic1[2]).
The attributes values is also common in xpath location (By.xpath(“img[@alt=’picture’]”)).
You can also specify the needed cell in a table using xpath (//table[@id=’table’]//tr[1]/td[3])

Building a reliable Selenium locators is the bases of all your automation tests. It is always good to keep the paths of the locators short. This includes locators like nth-child() and [n]. If for some reason there is a small change in DOM, the locators will remain the same. A small example for such short locators is:

This means that “a” is a descendant element of a particular type. You can specify it further if needed:

You can also use it with a specific attribute:


The second case is using the Name of an element in the html. The name prefix is used similarly to the ID element. It looks like this:

In this case the name is “inputTextName”. Names can also contain numeric values.


Next option is through searching text in the webpage. This can be done by searching partial part of the text or searching for the text in full. Be warned that if the text is altered in any way, it will not be located by the selector. The text locators look like this:

You can use full text search as you can see here:

Or you can search by partial text:


The tag name element is very easy to locate as long as the elements you are searching for are under the same tag name. They will look like this:

If not specified additionally the tag name element will match only with the first element that is found on the webpage. You can use it to pinpoint certain element, but you will need to get all the elements within that element criteria (e.g.: dropdown menu).


You can also focus on locating elements by class. They will look like this:

In this case the locator will have to find:


The CSS locators are used as common as the xpath ones. It is used to locate element(s) and has a very similar construct as Xpath. They can pinpoint the element using several variables (tags, attributes and values) of the webpage. For instance:

  1. Tag and ID;
  2. Tag and class;
  3. Tag and attribute;
  4. Tag, class, and attribute;
  5. Inner text

Note: you can also use: Ids, Class, Tags, Values of Attributes individually as css locators.
What this means is css=<[attribute^=prefix]>

There is also a distinction about searching by find_elements_by_name and find_element_by_name. If you are searching by elements – it will return a collection/array of matching elements. If you are searching by element – it will only return the first instance of an element with the matching tag name.


The locators look like this:

CSS by Class

The locators look like this:

CSS by Attribute

The locators look like this:

CSS by Inner text

The locators look like this:

It is good to mention that you can select an element by multiple attributes:

Also keep in mind the difference between findElement() and findElements() method. Both are not the same and have different end results when no such element(s) are found in DOM. If there is more than one element to be found when using the findElement(), only the first element will be returned. If you are using the findElements() it will return a full list of the matching instances or if nothing is found it will return an empty list.

You can also use an a list to gather all the findElements() like an array[]. For example you can get all the text of a table:

Keep in mind that there are multiple other elements that can be located by Selenium Webdriver, but they are more difficult to find on a webpage. Such elements are Shadow DOM elements or Flash elements.

Krasimir Krastanov

Quality Assurance & Test Engineer at Dreamix

More Posts - Website

Do you want more great blogs like this?

Subscribe for Dreamix Blog now!