What are locators in Selenium?
Locators in Selenium are one of the most powerful commands. Its ideally the building block of the Selenium automation scripts. It helps locate the GUI elements like – Text Box, Buttons, Check Boxes etc through which multiple user actions can be performed.
These are one of the important parameters for scripting, and if they end up being incorrect or brittle, they may lead to script failure. A good scripting base foundation requires elements to be located appropriately to ensure that the tests are faster, more reliable or has lower maintenance over releases.
How to locate a web element in DOM?
As we all know, the first thing to start with is to find the HTML element in DOM (Document Object Model), for which we need to grab the locator. We can follow the following steps to identify the web element in DOM on a web browser:
- DOM can be accessed in Google Chrome either by pressing F12 or by right click on the web page and then by selecting Inspect (as shown in screenshot below)
- Once we click on the “Inspect option,” it will open the Developer Tools console, as shown below. By default, it will open the “Elements” tab, which represents the complete DOM structure of the web page. Now, if we hover the mouse pointer over the HTML tags in the DOM, it will highlight the corresponding elements it represents on the webpage.
So, this way, we can easily search the HTML element in the DOM corresponding to a web element on the webpage.
Having understood this, let us dive deeper and understand the various types of locators in Selenium.
Types of Locators in Selenium
There is a diverse range of web elements like text box, id, radio button etc. It requires an effective and accurate approach to identify these elements.
To identify web elements accurately and precisely, selenium makes use of different types of locators. They are as follows:
- Id locator
- Name locator
- linkText & Partial linkText
- className
- CSS Selector
- XPath
Id Locator
The most popular way to identify web element is to use Id. Id’s are considered as the safest and fastest locator option and should always be the first choice even when there are multiple choices.
Now, let us understand the working of ID locator with the help of an example. I will launch Google Chrome and navigate to the practice wesite AutomationPractice
Here, I will try to locate the email text box using ID Locator.
On inspecting the above web element, you can see it has an input tag and attributes like class and id. Now, I will use the value of Id locator i.e. autocomplete to locate select countries text box.
Let us see how to automate the text box and send values to it using Id locator.
When you run the above java program, chrome driver will launch Google Chrome, redirect to https://rahulshettyacademy.com/AutomationPractice/ and will locate web element using ID and enter country name you entered.
I hope this gives you a clear understanding of how Id locator in Selenium works. Now let’s move further and understand how to use name locator.
Name Locator
This is also an effective way to locate an element with a name attribute. With this strategy, the first element with the value of the name attribute will be returned. If no element has a matching name attribute, then a NoSuchElementException will be raised.
Now, let us see the working of name locator with the help of an example. In the below image you can see, the name locator possesses a value called “enter-name”. The difference here is that you should use a name instead of id.
Now when we inspect this web element below is the DOM structure that is present, and we will use name attribute to identify this web element and enter some values in that.
Let us look at the below code to automate the text box.
In the above code I have find web element using name locator and send values in that text box. When you run the above code, the output will be the element will be located with name locator and “Rahul Shetty” will be entered in text box. Now, let us understand one more locator i.e. linkText.
linkText Locator
You can identify the hyperlinks on a web page using linkText. It can be determined with the help of an anchor tag (<a>). To create the hyperlinks on a web page, you can use anchor tags followed by the linkText.
Now, let us see the working of the linkText locator with the help of an example.
On inspecting “REST API” you can see that in DOM we have anchor tag. But this anchor tag does not have any name or id attributes. In such cases, you can use linkText locator.
We will make use of the text and use a linkText locator to write code as shown below.
On executing the above code, you will be redirected to REST API page.
In some situations, you may need to find links by a portion of the text in a linkText element. In such situations, you can use Partial Link Text to locate elements. Let us take the same example and try to locate it. I will choose “REST API” link. Now, instead of pasting full text I will just give it as Trouble. So we will modify code like this
Now, when you run the above code, it will be redirected to “Trouble Signing In?” page, but the difference is that you are using partial value to locate the links. I hope this gives you a clear understanding of how linkText and partialLinkText locator in selenium works. Now let us move further and understand class name locator.
className Selectors
className locator helps in locating element defined through the class attribute. Below is the example of DOM structure of web element that can be identified by className locator.
We will use className locator to identify the text box and enter value in that text box. Below is the code to identify web element using className.
On executing the above code web element will be identified by class name and value will be entered into the text box. I hope this gives you clear understanding of how className locator works in Selenium.
Now let us move further and understand CSS selector.
CSS Selector
Cascading style sheets are used to style your webpages and hence becomes one of the ways to locate your elements. If you are unable to access an element without ID or name, then CSS selector becomes one of the most obvious choices as compared to xpath, though majorly people prefer using CSS selector since those are faster as compared to xpath.
CSS Selectors can be located through various formats available:
- Tag and ID
- Tag and Class
- Tag and Attribute
- Tag, Class and Attribute
- Matches (Starts with, Ends with, Contains)
- Child elements
Tag and ID
To locate element via Tag and ID we use three components.
Syntax: css= (Html Tag) (#) (value of ID attribute)
Below is the DOM structure for button “Open Window” using this we can create css selector for Tag and ID
We can use following code to create css selector in combination with Tag and ID
Tag and Class
This locator works like ID, only difference is in its format. We use dot while denoting the class attribute value rather than hash in case of class.
Syntax: css= (Html Tag) (.) (value of Class attribute)
Below is the DOM structure for button “Open Window” using this we can create css selector for Tag and class name.
We can use below code to create css selector for tag and class name.
Tag and Attribute
As the name specifies the element can be locate via tag name and its corresponding attribute defined with value. In case if multiple elements have the same tag and attribute, the first one will be selected.
Syntax: css= (Html Page)[Attribute=Value]
We can use css selector with name tag to identify web element and below is the code for same.
Tag, Class, and attribute
This locator is used in combination with class name and other attribute value.
Syntax: css= (Html Tag)(.)(Class attribute value)([Attribute=Value])
We can use css selector with name tag to identify web element and below is the code for same.
Note: This combination can also be implied on ID. The only difference is to use hash rather than dot when using ID attribute and defining its ID value in place of class value.
Locating Elements via Matches
Selenium CSS selector,helps in matching multiple strings through the use of multiple patterns like ^, $, *. Below are quick details on the same:
Starts-With
This helps in locating element when we try to match elements with string that starts with a designated value
Syntax: css= (Html Tag)([attribute^=start of the string])
We can use following code to create locator for starts-with.
Ends-With
This helps in locating element when we try to match elements with string that ends with a designated value.
Syntax: css= (Html Tag)([attribute$=end of the string])
We can use following code to create locator for ends-with.
Contains
This helps in locating element when we try to match elements with string that contains a designated value.
Syntax: css= (Html Tag)([attribute*=partial string])
We can use following code to create locator for contains.
Child Elements
With the use of child elements, we can locate elements inside other elements. This is helpful when trying to access data of a table or list of details etc.
We can use following code to create locator for contains.
In this way we can use cssselector with different combinations to identify web elements on web page.
I hope this gives a clear understanding, now let us move to next locator technique xpath.
XPath locator
XPath is a language to query XML documents. Xpath helps in locating elements on the web page using XML expressions.
The basic syntax used for using XPath as a CSS locator in Selenium WebDriver is:
Syntax: xpath= //tagname[@attribute=’value’]
There are multiple ways through which xpath can be defined:
- Standard Xpath
- Using Contains
- Using Xpath with AND & OR
- Using starts-with
- Using text in Xpath
Standard Xpath
This is like defined in syntax above.
A quick example of standard xpath based on below DOM.
We can use following code to create xpath locator in selenium
Contains
This works like CSS selector ‘contains’ symbol. It can be used when any element value changes dynamically and partially. For example, if value of login changes with the login text appended has been constant, then contains would be helpful in locating elements.
Syntax: xpath= //tagname[contains(@attribute,’partial value of attribute’)]
We can use following code to locate web element.
XPath using ‘AND’ & ‘OR’
These are used when we want to locate an element via two condition sets. In case of ‘AND’ both the conditions should be true and for ‘OR’ either of the two should be true.
Syntax using OR : xpath= //tagname[@attribute1=’value 1’ OR @attribute2=’value 2’]
Syntax using AND : xpath= //tagname[@attribute1=’value 1’ AND @attribute2=’value 2’]
We can use below code for AND & OR condition in XPath
Starts-with
This is again like the functionality of CSS selector. It helps in locating element that starts with a specified attribute value.
Syntax: xpath= //tagname[starts-with(@attribute,’starting name of the attribute value’)]
We can use following code to perform action using starts-with
Text
It helps to locate element via xpath using exact text match. Sometimes we have tags containing text, which we wish to locate element through. Locating element through text can help us achieve this.
Syntax: xpath= //tagname[text()=’text to be searched’]
Below is the DOM structure for example
<p class="signup-titel">SIGN UP</p>
Using above DOM we can create following code for locating web element using text
driver.findElement(By.xpath(“//p[@text()=’ SIGN UP’]”)).click();
Absolute Xpath
Absolute Xpath starts with root node, it starts from <html> tag till the node whose web element needs to be located. It starts from single slash(/)
Example:
xpath = html/head/body/form/table/tbody/tr/th
Now using the above xpath we can locate the web element and perform actions on that elements.
driver.findElement(By.xpath(“html/head/body/form/table/tbody/tr/th”)).click();
Relative Xpath
A relative xpath is one where the path starts from the node of your choice. it does not need to start from the root node. It starts with Double forward slash(//).
Xpath = //*[@id=’login’]/ul/li[3]/a
Now using the above xpath we can locate the web element and perform actions on that elements.
driver.findElement(By.xpath(“//*[@id=’login’]/ul/li[3]/a”)).click();
I hope this article will be useful. Please let me know your inputs in the comments.