All about 8 Locators in Selenium Webdriver with Examples

In UI automation, every automation tool has to first identify/locate the test object (like Button, Checkbox, forms, links, text box, etc) available on the application under test before performing human-like action on it. So Selenium does likewise and for Selenium every test object is a web element.

What are Locators in Selenium Webdriver?

Locator in Selenium provides a mean to uniquely identify a web element on the web page. Without appropriate object identification, we can’t even think of UI automation.

Selenium has eight different locators to identify a web element on a web page. The following is the list of locators in Selenium Webdriver.

• id
• name
• tagName
• linkText
• partialLinktext
• className
• cssSelector
• Xpath

Note: All the aforesaid locators return only single elements, however, you can use the .findElements() method to find multiple elements that match the same properties provided using the locators.

How To Find Web Elements Using Selenium in DOM and Understand their Properties

If you are stepping into the world of automation for the first time, first you need to understand about Web Element properties. The pillar of automation solely depends on how good you are in identifying web elements uniquely because there might be similar kinds of multiple objects on the browser page. So, how come Selenium will know on which web element it needs to perform the intended action.

Nowadays almost all browser comes with a default inspecting tool using what you can view the web elements properties. I will be explaining the examples using the Chrome browser. Open the Facebook website https://www.facebook.com/ in the Chrome browser in incognito mode so that it does not let you automatically log in if the browser has saved your session. After opening the browser press F12 Key. You will see the Developers tool console opened either on the right side or bottom of the page.

Click on the mouse icon as highlighted in the above screenshot and click on the ‘Email or phone‘ text box. It will start showing you the properties of ‘Email or phone‘ web element in the Document Object Model (DOM).

The properties of the web element are defined by its tag name, attribute, and its values. The following image will make it more clear.

Every web element has a tag name that will vary depending on its type. For example, for text box, checkbox, and radio button it would be input. In our example, the ‘Email or phone‘ text box has five attributes and each attribute will have a value associated with it. Each attribute employe as one property. We can uniquely identify a web element by using one property or by a combination of multiple properties. You will have to smartly play around the web element properties to uniquely identify them. This is all about finding the web element properties in the DOM. Now let’s proceed further to understand how different locators to uniquely identify the web elements.

Locate Element by ID in Selenium

This is the most common fast and reliable way of locating web elements on a web page as ID’s are supposed to be unique for each element. However, sometimes developers assigned the same id to multiple objects in that situation it will not work. In the case of Facebook, the id for the ‘Email or phone‘ is email.

The syntax for locating the ‘Email or phone‘ element is as follows:

driver.findElement(By.id(“email”));

Note: If in case, Id is changed in future or no such value matches with id, NoSuchElementException will be raised.

Locate Element by Name in Selenium

The name locator can be used in a similar fashion as we used the id locator.

The syntax for locating the ‘Email or phone‘ element of the Facebook login page is as follows:

driver.findElement(By.name(“email”));

Note: In the Facebook login page value of both id and name attribute is “email“.So don’t get confused with that as we are using the same value in both the locators.

Locate Element by tagName in Selenium

This locator uses HTML tag names to identify elements having the same tag name on a web page. The HTML tag names could be like input, a, div, span, li, button, etc.

The following is the syntax for locating the web elements with anchor tag a and it returns a list of hyperlinks on the page. 

driver.findElements(By.tagName(“a”));

You can iterate this list and perform the desired action on the required element.

Note: In this case, I have used findElements() method instead of findElement().

Locate Element by linkText and partialLinkText in Selenium

You can locate a hyperlink element on a web page using either linkText or partialLinkText.These both these locators will only work for elements containing anchor tags (<a>). The linkText locator is used to find the exact match of link’s text and partialLinkText is used to find a link using partial link’s text. If multiple hyperlinks with the same texts are found on the web page, Selenium chooses the first one.

The syntax for locating a hyperlink via linkText is as follows:

driver.findElement(By.linkText(“Click Me”));

It will look for an exact match of link text “Click Me” and will identify it.
The syntax for locating a hyperlink via partialLinkText is as follows:

driver.findElement(By.partialLinkText(“Click”));

It will identify any link that contains ‘Click’ in the hyperlink text. If several links are found having text “Click,” then Selenium will select the first one.

Locate Element by className in Selenium

Class Name locator is used to locate the web element based on the class attribute. Let’s take the same example of the Facebook login page.

As per the DOM structure, the class name of of the email element is inputtext login_form_input_box

The syntax of locating element via class name is as follows

driver.findElement(By.className(“inputtext login_form_input_box”));

Note: If you will try this class name to identify the email field, Selenium will throw NoSuchElementException as this class name is not a unique property on the page. If you see the DOM structure of the email and password element in the above screenshot you will notice that developer has given same class name for both the elements.

Locate Element by cssSelector in Selenium

CSS or Cascading style sheets are also a common way to locate web elements.CSS selector is a much faster way to identify web elements as compared to XPath.

The following is the DOM structure of the email field in the Facebook login page.

We can use the following syntax to locate the email field.

driver.findElement(By.cssSelector(“input[name=’email’]”));

To know more about CSS Selector please refer to the detailed article How to Use CSS Selector in Selenium WebDriver written on it.

Locate Element by XPath in Selenium

Xpath is generally used in finding elements on the web page using XML expressions. The basic syntax of identifying a web element using relative XPath in Selenium WebDriver is as follows:

//tagname[@attribute=’value’]

You can also use a combination of attributes using AND or OR operator.

//tagname[@attribute1=’value1′ and @attribute2=’value2′]

//tagname[@attribute1=’value1′ or @attribute2=’value2′]

XPath is very helpful in identifying elements that are dynamic in nature.

Let’s see how we can identify the email field of the Facebook login page. As we have seen previously the DOM of the email text field is as follows.

The tag name is input and the rest of the things are attribute names and their corresponding values. So we can use any of the following XPath to find the email element.

• //input[@type=’email’]
• /input[@name=’email’]
• //input[@id=’email’]
• //input[@data-testid=’royal_email’]

The sample code to find the element using XPath is as follows.

driver.findElement(By.xpath(“//input[@type=’email’]”));

XPath in itself is a vast topic that requires a detailed discussion. The details of XPath will cover be covered in more depth in another article XPath in Selenium WebDriver with Example.

Conclusion

We have learned how to use various locators available in Selenium to identify web elements. In the real world of automation finding elements using single property (attribute and its value) sometimes become very challenging due to various reasons like web element properties are dynamic in nature or there is no single unique property to identify the element. In that situation, XPath or CSS act as a savior. A combination of different attributes and tag names can be used with CSS and XPath to identify web elements having complex DOM structures.

I hope you will find this article helpful and informative,please don’t forget to share and like it.

Recommended Posts

• Selenium Webdriver Login Test Script
• How to Set Text Value in TextBox In Selenium WebDriver
• Click a Button in Selenium WebDriver and Carry out Other Validations
• Handle Dynamic Web Tables In Selenium WebDriver
• Read and Write Excel File in Java Using Apache POI Lib
• Page Object Model (POM) & Page Factory in Selenium WebDriver