Element Locators in Selenium Webdriver
Selenium Tutorial for Beginners

Element Locators in Selenium Webdriver | The Eyes (Senses)

What comes to your mind when you hear “Automation Testing”? Yeah! Computerized testing without human intervention. But how does computer know what to do? Yeah! Via Automation script written by a human using any programming language. And how does Automation script comes to know where to click in the application? Yeah! Just like human mind identifies different fields (or application components) by identifying its type like textbox or drop-down, label like ‘Account Number’ or ‘Username’, tool-tip message, etc. – similarly there has to be a way for automation script to identify different elements on an application page. We call it Element Locators in Selenium Webdriver – The Eyes (Senses)!

Element Locators in Selenium Webdriver

Or in other words – We pass the UNIQUE properties for an element to Selenium Automation script so that it can first identify the element and then perform the subsequent action like enter text, click, select value, etc. The different type of properties that can be passed to a Selenium automation script are collectively known as Element Locators in Selenium Webdriver!

Hope you have already read our earlier article “#1. HTML Coding Basics required for Selenium Automation” which would be a per-requisite to understanding this tutorial.

E.g. The automation script launch a browser using Selenium and open the application URL, say Flipkart. The next step in the test case says click on the ‘Search’ textbox >> Now how do you identify this ‘Search textbox’ using Selenium automation script?

When we look at the Search textbox properties (Right click >> Inspect Element), we get the below details:

<input value=”” class=”LM6RPg” placeholder=”Search for Products, Brands and More” title=”Search for Products, Brands and More” name=”q” autocomplete=”off” data-reactid=”46″ type=”text”>

Flipkart Search box

These attribute – value pairs form the properties of this textbox.

  • class=”LM6RPg”
  • placeholder=”Search for Products, Brands and More”
  • title=”Search for Products, Brands and More”
  • name=”q”
  • autocomplete=”off”
  • data-reactid=”46″
  • type=”text”

Or if you inspect the ‘Email or Phone’ field on Facebook login page you will get:

<input class=”inputtext” name=”email” id=”email” value=”” tabindex=”1″ type=”email”>

  • class=”inputtext”
  • name=”email”
  • id=”email”
  • value=””
  • tabindex=”1″
  • type=”email

Now to uniquely identify this search textbox or Email field, we have to use that property combination which is not used by any other element on this webpage. Additionally not all attribute-value pairs can be used in Selenium scripts. The set of allowed properties or the mechanism to uniquely identify the element is known as Element Locators in Selenium Webdriver, i.e. HTML properties of a web element which tells the Selenium about the web element it need to perform action on. The Element Locators in Selenium Webdriver are:

  • Id: looks for an element in the webpage with the ‘id’ attribute same as given in the automation script. i.e. driver.findElement(By.id(“email”))
  • Name: looks for an element in the webpage with ‘name’ attribute value same as given in the automation script. i.e. findElement(By.name(“email”)) OR driver.findElement(By.name(“q”))
  • Identifier: Any of the above values of id or name. i.e. Identifier=email OR Identifier=q are both valid
  • Link: to select links only: link = the text of the link. i.e. Driver.findElement(By.linkText(“Forgotten account?”)) for HTML property <a href=”https://www.facebook.com/recover/initiate?lwv=110″>Forgotten account?</a>
  • DOM (Data Object Modelling): Rely on matching the JavaScript expression referring to an element in the DOM of the page. i.e. document.getElementById(‘email’)
  • XPath (XML Path): The most popular of all Element Locators. XPath is the standard navigation tool for XML; and an HTML document is also an XML document (xHTML). E.g. html/head/body/table/tr/td. For Selenium driver.find_element_by_xpath(“//*[@id=’email’]”)
  • CSS (Cascaded Spread Sheets): string patterns used to identify an element based on a combination of HTML tag, id, class, and attributes. Syntax – css=tag[attribute=value]. i.e. css=input[id=email]

As you might have guessed, Element Locators can be classified into two categories:

  1. Structure-based: rely on the structure of the page to find elements. E.g. XPath, DOM or CSS
  2. Attributes-based: rely on the attribute-value of the elements to locate them. E.g. Identifier, Id, Name, Link or CSS

To summarize, Locators are the HTML properties of a web element which tells the Selenium about the web element on which it needs to perform actions. Some of the element types can be – Text box, Button, Drop Down, Hyperlink, Check Box, and Radio Button. Using the right locator ensures the tests are faster, more reliable or has lower maintenance over releases.

Save

Save

Save

Leave a Reply

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