How to use Locators in selenium WebDriver | Selenium Tutorial for beginners

In this tutorial, I am going to cover different types of locators used in Selenium scripts to identify web-elements on the web-page.

Topics to be covered - 

• What is locator?
• Different types of locators.
• How to identify locators and how to use them to locate web-elements.

Locators

Locators are the property-value pairs or attributes of the web-elements in HTML document structure. They are used to identify web-element on the web-page. They give the exact location of the web-elements on the web-page. We can say that the locators provide the address of web-elements on the Web-Page.

Different Locators - 

• Id 
• Name
• ClassName
• PartialLinkText
• Linktext
• X-Path
• CSS
• TagName

Note - I will take the Facebook application to explain the concept of locators.

Locate Element by Id - 

Step 1 - Launch Facebook application.

Step 2 - Inspect 'Password' field.

To inspect a web-element, right click on it and select 'inspect' option. Developer tools will be opened highlighting the attributes of the web-element. 

We can notice the highlighted portion in the above image. There is one attribute, id="pass". This 'id' is nothing but the Id locator that can be used in the selenium script to locate the 'Password' field as shown below.

 driver.findElement(By.id("pass"));  

Locate Element by Name -

Step 1 - Launch Facebook application.

Step 2 - Inspect 'email or phone' field.

We can notice the highlighted portion in the above image. There is one attribute, name="email". This 'name' is nothing but the Name locator that can be used in the selenium script to locate the 'email or phone' field as shown below.

 driver.findElement(By.name("email"));  

Locate Element by TagName -

TagName locator does not locate a specific element on the web-page but it locates a set of the same sort of web-elements on the web-page. 

For example - All the text field on the web-page, all the links on the web-page and so on.


Step 1 - Launch Facebook application.

Step 2 - Locate all the links in the application.

Step 3 - Print name of all the links and the total number of links on the console window.

1:  package com.sessions;  
2:    
3:  import java.util.List;  
4:    
5:  import org.openqa.selenium.By;  
6:  import org.openqa.selenium.WebDriver;  
7:  import org.openqa.selenium.WebElement;  
8:  import org.openqa.selenium.chrome.ChromeDriver;  
9:    
10:  public class Links {  
11:    
12:       public static void main(String[] args) {  
13:            System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");  
14:              
15:            WebDriver driver = new ChromeDriver();  
16:              
17:            driver.get("https://www.facebook.com");//launch facebook application.  
18:              
19:            driver.manage().window().maximize();//maximizing browser.  
20:              
21:            //Storing all the links available on the application  
22:            List<WebElement> links = driver.findElements(By.tagName("a"));  
23:              
24:            //Printing total number links on the FB application  
25:            System.out.println(links.size());  
26:              
27:            //Printing name of all the links on the application  
28:            for(WebElement link : links)  
29:            {  
30:                 System.out.println(link.getText());//getText() is used to get the text of the web-element.  
31:            }  
32:    
33:    
34:       }  
35:    
36:  }  
37:    

Note -

• Link in HTML document is represented by <a> tag.
• Line number 21 shows the use of TagName in the Selenium script. Here 'a' is the tag name of the link.
• At line number 22, we used  List<WebElement> to store all the links. Since there are many links, so findElements() command is used instead of findElement() to locate all the links.
• To use List, we need to import - java.util.list; and for WebElement - org.openqa.selenium.WebElement;
• The list is an important concept of Java which is used to store and manipulate a set of similar type of objects. In our case we stored web-elements.

Locate Links on the Web-Page -

Link basically refers to the URL of the other web-page. Once clicked will open the web-page either on the same window or in a new window. 

Note - Link in HTML document is represented by <a> tag.


Selenium provides two locators to locate Links on the web-page -


1. LinkText - It uses the full-text name of the link to locate it on the web-page.


Step 1 - Launch Facebook application.

Step 2 - Locate 'Forgotten account' link as shown in the image above.

Step 3 - Click on it.

As we can see in the above image 'a' tag representing the link and 'forgotten account?' is the name of the link.

1:  package com.sessions;  
2:    
3:  import java.util.List;  
4:    
5:  import org.openqa.selenium.By;  
6:  import org.openqa.selenium.WebDriver;  
7:  import org.openqa.selenium.WebElement;  
8:  import org.openqa.selenium.chrome.ChromeDriver;  
9:    
10:  public class Links {  
11:    
12:       public static void main(String[] args) {  
13:            System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");  
14:              
15:            WebDriver driver = new ChromeDriver();  
16:              
17:            driver.get("https://www.facebook.com");//launch facebook application.  
18:              
19:            driver.manage().window().maximize();//maximizing browser.  
20:              
21:            //Locating the link and clicking on it.  
22:              
23:            driver.findElement(By.linkText("Forgotten account?")).click();  
24:    
25:    
26:       }  
27:    
28:  }  
29:    

2. PartialLinkText - It uses the partial-text name of the link to locate it on the web-page.

Here we will use only a part of the link text to locate it.

For Example -

 Link name - 'Forgotten account?' 

We will use only 'Forgotten' to locate the link as shown in the below code.

1:  package com.sessions;  
2:    
3:  import java.util.List;  
4:    
5:  import org.openqa.selenium.By;  
6:  import org.openqa.selenium.WebDriver;  
7:  import org.openqa.selenium.WebElement;  
8:  import org.openqa.selenium.chrome.ChromeDriver;  
9:    
10:  public class Links {  
11:    
12:       public static void main(String[] args) {  
13:            System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");  
14:              
15:            WebDriver driver = new ChromeDriver();  
16:              
17:            driver.get("https://www.facebook.com");//launch facebook application.  
18:              
19:            driver.manage().window().maximize();//maximizing browser.  
20:              
21:            //Locating the link and clicking on it.  
22:              
23:            driver.findElement(By.partialLinkText("Forgotten")).click();  
24:    
25:    
26:       }  
27:    
28:  }  
29:    

One thing is common in LinkText and PartialLinkText - 

If there are two links having the same link-text, above both the locators will locate the first link always.

So what if a user wants to click on the non-first link?

In such a scenario, we can use X-Path or CSS selector.




That's all guys!!! 

Please post your queries related to Selenium Locators.

Next Tutorial - X-Path in Selenium