Monday, May 8, 2017

Types of locators in selenium with Simple examples

Locators in selenium are used to locate the web elements in page. Identification of correct expected web element and to perform some action on it will be the expectation in Automation. Selenium IDE is the plugin that will be more helpful to identify the locate the elements in GUI page. We can use that locator value while doing the scripting. Each and every web element are presented in HTML tag with open and End tag will be identified through its attributes.

Different types of locators in selenium are listed below.

  • ID
  • Name
  • Link
  • CSS Selector
  • Xpath
  • DOM


Target Area - IDE

Locating by ID:

Always ID is the attribute present in html tag of the web element will be unique. Some of the web elements will not have the ID attribute.

Syntax :

 id= value of Id of that Specific element

Locating by Name:
Name attribute will be used to identify the element using the name attribute of element.

Syntax :

Name = Value of Name attribute of that specific element


Locating by Link:

It used to identify the hyperlink element in the webpage.

Syntax :

Link = linktext

Locating by CSS Selector:

It is used to identify the web elements using string patterns. When an element doesn’t have usual attributes with unique values such as ID,Name, Class name etc, we can make use of it.
It will be very fast in accessing the web elements comparing to other locators.

Syntax and its CSS types:

  • Tag and ID   ----> css=Tag#id
  •  Tag and class ----> css= Tag.class
  •  Tag and attribute ----> css= tag[attribute = Value]
  • Tag, class, and attribute ----> css=tag.class[attribute = value]
  •  Inner text ---> Tag:contains("text")


When using this strategy, we always prefix the Target box with "css=" as will be shown on the following examples.

Locating by Xpath:

XPath is the language used when locating XML (Extensible Markup Language) nodes. There are two types in Xpath.

Absolute path – Full path
          Relative path – Reference path


Syntax and its Xpath types:

  • Using Single attribute  -//Tag[@attribute = ‘value’] 
  • Using Multiple attribute-//Tag[@attribute1=’value1’] [@attribute2=’value2’]
  • Using Contains method   -//Tag[contains(@attribute,’value’)]
  • Using Starts-with       -//Tag[starts-with(@attribute,’value’)]
  • Using Following         -//Tag[@attribute =’value’]/following::Tag/
  • Using Preceding         -//Tag[@attribute =’value’]/preceding::Tag/
  • Parent                  -//Tag[@attribute ='value']/parent::*---->
  • Child                   -//child::tag
  • Siblings                -//Tag[@attribute =’value’]/preceding-sibling::Tag/
  • Siblings                -//Tag[@attribute =’value’]/following-sibling::Tag/


Document Object Model (DOM)

HTML elements are structured. Selenium IDE is able to use the DOM in accessing page elements.

Syntax for DOM:

  •      document.getElementById("pass")
  •      document.getElementsByName("servClass")[1]
  •      document.forms["home"].elements["userName"]   ----> Only applicable when having forms
  •      document.forms[0].elements[3]