Different Type of Locators in Selenium

In the previous post, we have seen how to use the developers tool? In this post, we will see different Type of Locators in Selenium?

What is locators?

Before moving to the question what is locators?, let’s understand what is object identification first?

In any application, as you see Browser window, page, edit box, button, image, drop down, text etc. , all can be considered as objects, or say elements. Now in automation testing, our task is to identify these objects to perform required actions upon them. All objects posses some properties and values, which are used to define those objects in AUT(Application under Test). Same properties and values will be helpful to identify these objects in automation.

The locators are used to identify these objects or elements in the webpage.In selenium, there are 8 types of locators as given below.

1. id
2. Name
3. Linktext
4. Partial Linktext
5. Tag Name
6. Class Name
7. Css
8. Xpath

Let’s understand them one by one with example.

1. id Locator: The most preferable way to locate an element in the webpage is locating By id. It is always better to identify the object with unique property. Because id is always unique (like employee id, roll number etc) that’s why it will be faster and reliable  way for locating an element.

You can use developer tool(like Firebug) to look for the id of an element.

We can take Gmail application for the demo. Suppose, we need to identify the username in Gmail. let’s see how to create an WebElement (object) by using id.

As we can see in the below figure, username is having id “Email” (Highlighted). So , we will use this value to create the webelement.

Fig 1.0

<input id="Email" type="email" autofocus="" spellcheck="false" value="" placeholder="Enter your email" name="Email"/>

How to use it in the Script?:

//Creating element 'username' with the help of id
WebElement username = driver.findElement(By.id("Email"));

2. name Locator: If id is not available for any element. Then , next preferred locator would be name. 

Fig 1.1

How to use it in the Script?:

//find element with the help of name
WebElement service = driver.findElement(By.name("service"));

3. Linktext Locator: As it name says, we can locate any link By its text with the help of Linktext locator. 

e.g. As there is a link at the gmail page which is “need help?“. Let’s see how to use it.

Fig 1.2

How to use it in the Script?:

//Find element with the help of LinkText
WebElement needHelp_link = driver.findElement(By.linkText("Need help?"));

4. partialLinkText Locator: As it name says, we can use the partial text of link to identify that by using partialLinkText locator. Consider the above example, instead of full link text “need help?” , we can use “need” that is the partial text.

How to use it in the Script?

//Find element with the help of partialLinkText
WebElement username = driver.findElement(By.partialLinkText("Need"));

5. tagName Locator: Every element has some tag like div, input, span etc. Now, tagName locator can be used to find out the list of elements having the same tagName in the webpage.

e.g. Suppose, we need to count the no. of links present in a webpage. A link is represented by the tag name ‘a’. Result will be a list of webElements.

How to use it in the Script?

//Find elements with the help of tagName
List<WebElement> totalLinks = driver.findElements(By.tagName("a"));

Another usage of tagName:

tagName can also be used with  group elements like drop downs, checkboxes etc.

Select select = new Select(driver.findElement(By.tagName("select")));
select.selectByVisibleText("Monday");

6. class name Locator: We can also locate an element by using its class name as shown below in figure 1.3. 

Fig 1.3

//Find element with the help of className
WebElement needHelp = driver.findElement(By.className("need-help"));

7. CSS Selector: CSS stands for Cascading Style Sheets and used for styling webpages. CSS selector can also be used to identify elements in HTML page. 

It is observed that CSS selector are faster than Xpath during execution.

We will be learning in more details about CSS selector in the next post.

How to use it in the Script?

//Find element with the help of CSS selector
WebElement username =driver.findElements(By.cssSelector("input[id=email']"));

8. Xpath Locator: Xpath are used to traverse through the XML document to locate any particular element i.e. can be considered as an path to reach the element. 

There are 2 types of Xpath:

1. Absolute Xpath: It generates the path from the root node of the document and usually starts with single slash (/). Root node starts from tag html.

The disadvantage of using Absolute xpath is that if there is change in the path (some tags are added or removed), then this xpath will not work.

e.g. html/body/div[1]/div[2]/div[2]/div[1]/form/div[1]/div/div[1]/div/div/input[1]

2. Relative Xpath: It can generate path at any position in the document and use double slash(//) to start.

//*[@id='Email']

If path changes , there is a less chance to affect the relative path. because it is made up with the help of any other locator like id , name etc.

We will learn about xpath more in detail and how to use them in next post.