Locators in Selenium

Filed Under: Selenium
Selenium Locators

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.

  1. id
  2. name
  3. tagName
  4. className
  5. linkText
  6. partialLinkText
  7. xpath
  8. cssSelector

Why we need to use different locators?

  1. Sometimes developers may not provide all locators for all elements
  2. 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

Locator ID

Right-click on the above web element to inspect the element.

Inspect 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

Login Username

Use the same in your Selenium test script as well:


driver.findElement(By.id("login-username")).sendKeys("seleniumtesting@yahoo.com"); //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

Locator Name

Use the same in your Selenium test script as well:


driver.findElement(By.name("username")).sendKeys("seleniumtesting@yahoo.com"); //name locator for text box
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

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

Inspect LinkText

Use the same in your Selenium test script as well:


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.

Locator PartialLinkText

Locator PartialLinkText

Right click on “Difficulty signing in?” link for inspecting. Now, instead of pasting full text we will give just Difficulty.

Inspect PartialLinkText

Inspect PartialLinkText

Use the same in your Selenium test script as well:


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.

Inspect XPath

Inspect XPath

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

Locator Xpath

Use the same in your Selenium test script as well:


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

Locator CSSSelector

Right-click on the above web element to inspect the element.

Inspect CSSSelector

Inspect CSSSelector

Once inspecting the element, we can see the image as below

Locator CSS Selector

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.

CSSSelector Value

CSSSelector Value

Use the same in your Selenium test script as well:


driver.findElement(By.cssSelector("#login-username")).sendKeys("seleniumtesting@yahoo.com");

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages