Locators in Selenium WebDriver (By strategy)

Locating an element in Selenium WebDriver is the backbone of our automation script. The more efficiently we locate the element on the webpage, the more more simpler and effective our script will be.

Selenium WebDriver provides 8 different locators to find element on the webpage.

We have prioritized the types of locators to be used while scripting.

  1. id : Selects the element having specified id attribute.
  2. name : Selects the elements having specified name attribute.
  3. linkText : Selects the link (anchor tag) element which  has the matching text specified by linkText.
  4. partialLinkText : Selects the link (anchor tag) element which contains the text specified by partialLinkText .
  5. tagName : Selects the element by specified tag name.
  6. className : Selects the element having specified className.
  7. cssSelector : Locates element by matching with CSS selector.
  8. xpath : Locates element using an XPATH expression.

 

We will look into each locator with relevant example.

How to use ID locator?

The most efficient way of locating an element is ID locator. The reason behind its efficiency is the uniqueness of ID attribute on the webpage.

So, ID should be the first and foremost strategy to locate element on webpage.

HTML :
<div id=“header”></div>

Automation Script :
WebElement elem = driver.findElement(By.id(“header”));

How to use name locator?

When you do not have a unique ID attribute for the element on webpage, you need to look for other locators. And the second choice after ID locator is the name locator.

The reason behind choosing the name locator is, the name attributes are generally used in order to pass data to back-end. So, the frequency of the value of name attribute getting changed is relatively less.

But, name attribute value can not be unique all the times. So, if there are more than one elements on the webpage with the same value, then Selenium will consider the first element always.

HTML :
<div name=“content”></div>

Automation Script :
WebElement elem = driver.findElement(By.name(“content”));

How to use linkText locator?

Linktext is one of the simplest way to find the element. We can find the anchor element by its visible text on webpage.

HTML :
<a href=”#”> Google </a>

<a href=”#”> Yahoo </a>

Automation Script :
WebElement elem = driver.findElement(By.linkText(“Google”));

WebElement yahooLink = driver.findElement(By.linkText(“Yahoo”));

How to use partialLinkText locator?

PartialLinkText is more or less same as linkText. The only difference between the two is partialLinkText returns the element even if the the partial link text is matched.

HTML :
<a href=”#”> Google Chrome </a>

<a href=”#”> Yahoo </a>

Automation Script :
WebElement elem = driver.findElement(By.partialLinkText(“Google”));

Here, the partial link text “Google” is matched, so it returns the Google Chrome link element.

How to use tagName locator?

tagName locator searches the element by the tag name on the webpage. It can be useful to find all the links or images on the webpage.

HTML :
<a href=”#”> Google Chrome </a>

<a href=”#”> Yahoo </a>

<a href=”#”> Bing </a>

Automation Script :
// to get all the links on webpage

List<WebElement> links = driver.findElements(By.tagName(“a”));

How to use className locator?

className locator can be used to locate element using class attribute value (i.e. name of css class).

HTML :

Content goes here…..

Automation Script :

WebElement> content = driver.findElements(By.className(“content”));

How to use cssSelector locator?

cssSelector is one of the tricky way to locate an element. We can make use of HTML tags and their properties-values pair in order to locate the elements efficiently.

Lets have a look at the example.

General Syntax : 

element_name[attribute_name = value]

HTML : 

<input class=’textfield’ name=’firstName’ />

<input class=’textfield’ id=’lastName’ />

Automation Script :

WebElement firstName = driver.findElements(By.cssSelector(“input[name=’firstName’]”));

WebElement lastName = driver.findElements(By.cssSelector(“input[id=’lastName’]”));

OR

WebElement lastName = driver.findElements(By.cssSelector(“input#lastName”));

How to use xpath locator?

Xpath is a language used to traverse through XML nodes. Since, HTML can be considered as an XML, we can use Xpath to locate any element.

Types of xpath :

  1. Absolute Xpath : Its the technique to locate the element from root element. The Xpath expression starts with the root node of DOM.e.g. html/body/div[1]/h1But, its not recommended as even if a single node in the DOM gets changed, the xpath won’t be able to locate the element correctly.
  2. Relative Xpath : Its the technique to locate the element with respect to the DOM element of our choice. Xpath expression does not start with the root element.e.g. //table/tr/td/a
    Its advantageous as compared to Absolute Xpath as we do not need to traverse from the root element.But, xpath locator generally takes more time as compared to other 7 locators. So, the usage of xpath locators is encouraged only if we are unable to locate element using the remaining 7 locating techniques.
Advertisements

#locate-element-by-classname, #locate-element-by-cssselector, #locate-element-by-linktext, #locate-element-by-partiallinktext, #locate-element-by-tagname, #locate-element-by-xpath, #locating-element-by-id, #locating-element-by-name, #locatorsinselenium, #xpath-technique