1. What is a Selenium Locator?
Selenium Locators are used for identifying the web elements on the web page. To access the HTML elements from a web page locators are used. In Selenium, we can use locators to perform actions on text boxes, checkboxes, links, radio buttons, list boxes, and other web elements. Locators help us in identifying the objects.
This tutorial explains different types of locators, how, when and ideal Strategies to use these locators.
2. Different types of Selenium Locators
We have 8 types of locators in Selenium Webdriver to find elements on web pages.
- id
- name
- tagName
- className
- linkText
- partialLinkText
- xpath
- cssSelector
Why we need to use different locators?
- Sometimes developers may not provide all locators for all elements
- Some locators may be duplicated sometimes.
So we have to choose any one unique locator to identify the element. Let’s look into these selenium locators one by one.
2.1) ID Locator
Ids’ are the most preferred way to locate elements on a web page, as each id is supposed to be unique which makes ids faster and more reliable way to locate elements on a page.
With ID Locator strategy, the first element with the id attribute value matching the location will be returned.
A NoSuchElementException will be raised, if no element has a matching id attribute.
Example: Now, let’s understand the working of ID locator with an example. Here we will launch Google Chrome and navigate to yahoo.com. Here, We will try to locate the email text box using ID Locator.
Locator ID
Right-click on the above web element to inspect the element.
Inspect Element
On inspecting the above web element, you can see an input tag with attributes like id and class. Now, we will use the value of Id locator i.e login-username to locate the email text box.
Login Username
Use the same in your Selenium test script as well:
|
1 2 3 |
driver.findElement(By.id("login-username")).sendKeys("[email protected]"); //id locator for text box |
Even though id is the most preferred locator, obviously it is not realistic for all objects to have ids on a web page. In some cases, developers will give non-unique ids on a web page, in that case id should be avoided.
2.2) Name Locator
This is also the most efficient way to locate an element with a name attribute. With this strategy, the first element with the value name attribute will be returned.
A NoSuchElementException will be raised, if no element has a matching name attribute.
Example: Now, let’s understand the working of the name locator with an example. In the below image you can see, the name locator with a value called username. The difference is that you should use a name instead of id.
Locator Name
Use the same in your Selenium test script as well:
|
1 2 3 |
The tagName and className locators are similar to ID and name locators. They are used to select the elements having the html tag or css class.
2.3) linkText Locator
Selenium linkText locator is used for identifying the hyperlinks on a web page. It can be identified with the help of an anchor tag “a”. In order to create the hyperlinks on a web page, you can use anchor tags.
Example: Now, let’s understand the working of the linkText locator with an example. Suppose you want to locate ‘Difficulty signing in?’ link as shown below.
Locator LinkText
Right-click on “Difficulty signing in?” link for inspecting-you can notice that it starts with an anchor tag, which doesn’t have any id and name attributes. In those cases, you can use linkText locator.
Inspect LinkText
Use the same in your Selenium test script as well:
|
1 2 3 |
driver.findElement(By.linkText("Difficulty signing in?")).click(); //linkText locator for links |
2.4) partialLinkText Locator
In some situations, we may need to find links by a portion of the text in a linkText element. In those situations, we use Partial Link Text to locate elements.
Example: Now, let’s understand the working of PartiallinkText locator with an example. Suppose you want to locate ‘Difficulty signing in?’ link as shown below.
Right click on “Difficulty signing in?” link for inspecting. Now, instead of pasting full text we will give just Difficulty.
Inspect PartialLinkText
Use the same in your Selenium test script as well:
|
1 2 3 |
driver.findElement(By.partiallinkText("Difficulty")).click(); //partiallinkText locator for links |
2.5) XPath Locator
XPath also called as XML Path is a language to query XML documents. XPath is an important strategy to locate elements in selenium.
Example: Now, let’s understand the working of XPath locator with an example. Suppose you want to locate the search box using XPath of google.com. On inspecting the web element you can see an input tag and attributes like class and name. To construct XPath we make use of tag names and attributes to locate the search bar.
Click the Elements tab and press Ctrl + F to open a search box in Chrome’s developer’s tool. In the above image, you can see an input tag.
Now, I will start with //input, where //input implies a tag name. Here we make use of name attribute and pass ‘q’ in single quotes as its value.
This will give the below XPath expression:
//input[@name=’q’]
Locator Xpath
Use the same in your Selenium test script as well:
|
1 2 3 |
driver.findElement(By.xpath("//input[@name="q"]")).sendKeys("Selenium Webdriver"); //xpath for search box |
2.6) CSS Selectors
CSS Selector is the combination of an element selector and a selector value which identifies web element within a web page. Like Xpath, CSS Selector is also used to locate web elements having no ID, class or Name.
Example: Now, let’s understand the working of CSS Selector with an example. Here we will launch Google Chrome and navigate to yahoo.com. Here, I will try to inspect the email text box using CSS Selector.
Locator CSSSelector
Right-click on the above web element to inspect the element.
Inspect CSSSelector
Once inspecting the element, we can see the image as below
Locator CSS Selector
Click Elements tab and press Ctrl + F to open a search box in Chrome’s developer’s tool. CSS Selector always starts with # and on giving the value of id attribute as login-username, the element gets highlighted.
Use the same in your Selenium test script as well:
|
1 2 3 |
Conclusion
Now we have successfully learned how to locate elements in Selenium. As you can see locating element by name, id, linkText, partialLinkText is simple. We just need to select the right locator based on the uniqueness of the element i.e we mostly prefer using id because the id of elements is generally unique. In some scenarios, we might not have an id, name attributes that might not fetch the unique web element. In those scenarios, we should use XPath and CSSSelector locators. These two locators are very powerful and help in creating robust locators for complex web elements.