Mastering Locators in Selenium WebDriver: The Ultimate Guide with Examples


Selenium is a popular open-source tool used for automating web browsers. It allows testers to write scripts in various programming languages such as Java, Python, C#, and Ruby to automate web applications. One of the critical aspects of Selenium automation is identifying web elements on a web page using locators. In this blog, we will discuss locators in Selenium and how to find them.

Locators are nothing but a way to locate web elements on a web page. Selenium WebDriver provides a set of locators that can be used to identify web elements on a web page. 

1. The various types of locators supported by Selenium WebDriver are:

1. ID Locator: This locator is the most common and efficient way to locate an element on a web page. Each web element on a page should have a unique ID. You can use the ID Locator to find an element using its ID.

2. Name Locator: The Name Locator is another way to locate an element using its name attribute. This is particularly useful when you want to locate multiple elements with the same name.

3. Class Name Locator: The Class Name Locator is used to locate elements using their class name attribute. This locator is useful when you want to locate multiple elements with the same class name.

4. Tag Name Locator: The Tag Name Locator is used to locate elements using their HTML tag name. This locator is useful when you want to locate a group of elements with the same tag name.

5. Link Text Locator: The Link Text Locator is used to locate anchor elements on a web page. This locator is useful when you want to locate links on a page.

6. Partial Link Text Locator: The Partial Link Text Locator is similar to the Link Text Locator, but it allows you to locate a link using only a part of its text.

7. CSS Selector Locator: The CSS Selector Locator is a powerful locator that allows you to locate elements using CSS selectors. This locator is useful when you want to locate elements based on their attributes or position on the page.

8. XPath Locator: The XPath Locator is another powerful locator that allows you to locate elements using XPath expressions. This locator is useful when you want to locate elements based on their position on the page, attributes, or text content.

2. How to Use Selenium Locators

Now that we have discussed the various types of locators in Selenium, let's see how to use them to find web elements on a page. Here's an example of how to find an element using the ID Locator:

1. ID Locator

The ID Locator is the most common and efficient way to locate an element on a web page. Each web element on a page should have a unique ID. You can use the ID Locator to find an element using its ID. Here is an example of how to find an element using the ID Locator:

bash
WebElement element = driver.findElement(By.id("element-id"));

  1. Name Locator

The Name Locator is another way to locate an element using its name attribute. This is particularly useful when you want to locate multiple elements with the same name. Here is an example of how to find an element using the Name Locator:

java
WebElement element = driver.findElement(By.name("element-name"));

  1. Class Name Locator

The Class Name Locator is used to locate elements using their class name attribute. This locator is useful when you want to locate multiple elements with the same class name. Here is an example of how to find an element using the Class Name Locator:

java
WebElement element = driver.findElement(By.className("element-class"));

  1. Tag Name Locator

The Tag Name Locator is used to locate elements using their HTML tag name. This locator is useful when you want to locate a group of elements with the same tag name. Here is an example of how to find an element using the Tag Name Locator:


java
List<WebElement> elements = driver.findElements(By.tagName("tag-name"));

  1. Link Text Locator

The Link Text Locator is used to locate anchor elements on a web page. This locator is useful when you want to locate links on a page. Here is an example of how to find an element using the Link Text Locator:

java
WebElement element = driver.findElement(By.linkText("link-text"));

  1. Partial Link Text Locator

The Partial Link Text Locator is similar to the Link Text Locator, but it allows you to locate a link using only a part of its text. Here is an example of how to find an element using the Partial Link Text Locator:

java
WebElement element = driver.findElement(By.partialLinkText("partial-link-text"));

  1. CSS Selector Locator

The CSS Selector Locator is a powerful locator that allows you to locate elements using CSS selectors. This locator is useful when you want to locate elements based on their attributes or position on the page. Here is an example of how to find an element using the CSS Selector Locator:

java
WebElement element = driver.findElement(By.cssSelector("css-selector"));


Inspecting CSS selectors is an essential skill for Selenium automation testing. It allows you to identify the location of elements on a web page and create CSS selector expressions to locate them.

Here are the steps to inspect CSS selectors using the Chrome Developer Tools:

  1. Open the Chrome Developer Tools by pressing F12 or Ctrl + Shift + I.

  2. Click on the Elements tab.

  3. Hover over the HTML element you want to inspect, and right-click on it.

  4. Click on Copy > Copy selector to copy the CSS selector expression of the element.

Alternatively, you can also use the Console tab to inspect CSS selectors:

  1. Open the Chrome Developer Tools by pressing F12 or Ctrl + Shift + I.

  2. Click on the Console tab.

  3. Type $$('CSS-selector-expression') in the console and press Enter. This will return an array of all elements that match the CSS selector expression.

  4. You can then use the console.dir() function to view the properties of the selected elements.

Here is an example of inspecting a CSS selector expression using the Chrome Developer Tools:



  1. XPath Locator

The XPath Locator is another powerful locator that allows you to locate elements using XPath expressions. This locator is useful when you want to locate elements based on their position on the page, attributes, or text content. Here is an example of how to find an element using the XPath Locator:

java
WebElement element = driver.findElement(By.xpath("xpath-expression"));


Let's study XPath in detail,

8.1. What is XPath?

XPath stands for XML Path Language, and it is a query language used for selecting nodes from an XML or HTML document. XPath is an essential tool for web scraping, data extraction, and automation testing with Selenium. It allows you to select specific elements on a web page using their attributes, text content, or position in the HTML tree structure.

XPath expressions can be used with various Selenium locators, including the findElement() and findElements() methods. XPath expressions are powerful, flexible, and can be used to locate elements in complex web applications. XPath expressions can also be used to create more advanced test scenarios, such as selecting multiple elements or selecting elements based on their parent or child nodes.


8.2. Types of XPath:

There are two types of XPath expressions: Absolute XPath and Relative XPath.

  1. Absolute XPath
An Absolute XPath expression starts with a single forward slash / and is used to locate an element from the root node of the HTML document. The Absolute XPath expression specifies the exact location of an element in the HTML tree structure, which means that if the HTML structure changes, the Absolute XPath expression may no longer be valid.

Here is an example of an Absolute XPath expression:

css
/html/body/div[2]/div[1]/form/input[1]
  1. Relative XPath
A Relative XPath expression does not start with a forward slash and is used to locate an element based on its relationship to other elements in the HTML document. Relative XPath expressions are more flexible than Absolute XPath expressions, and they are less likely to break if the HTML structure changes.

Here is an example of a Relative XPath expression:

css
//input[@name='search_query']

8.3. How to Inspect XPaths

Inspecting XPaths is an essential skill for Selenium automation testing. It allows you to identify the location of elements on a web page and create XPath expressions to locate them.

Here are the steps to inspect XPaths using the Chrome Developer Tools:

  1. Open the Chrome Developer Tools by pressing F12 or Ctrl + Shift + I.

  2. Click on the Elements tab.

  3. Hover over the HTML element you want to inspect and right-click on it.

  4. Click on Copy > Copy XPath to copy the XPath expression of the element.



Alternatively, you can also use the Console tab to inspect XPaths:

  1. Open the Chrome Developer Tools by pressing F12 or Ctrl + Shift + I.

  2. Click on the Console tab.

  3. Type $x('XPath-expression') in the console and press Enter. This will return an array of all elements that match the XPath expression.

  4. You can then use the console.dir() function to view the properties of the selected elements.

Here is an example of inspecting an XPath expression using the Chrome Developer Tools:

Now that we have seen how to use the various types of locators in Selenium, let's discuss some best practices when using locators.

3. Example Code for Selenium Locators

Here are some examples of how to find locators for elements on the Selenium practice form at https://www.techlistic.com/p/selenium-practice-form.html:

  1. Using ID Locator:
java
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.chrome.ChromeDriver; 
public class Example { 
public static void main(String[] args) { 
WebDriver driver = new ChromeDriver();
        driver.get("https://www.techlistic.com/p/selenium-practice-form.html");
        WebElement firstNameField = driver.findElement(By.id("firstName")); 
 } }
  1. Using Name Locator:
java
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.chrome.ChromeDriver; 
public class Example { 
public static void main(String[] args) { 
WebDriver driver = new ChromeDriver();
        driver.get("https://www.techlistic.com/p/selenium-practice-form.html");
        WebElement lastNameField = driver.findElement(By.name("lastName")); 
 }
}
  1. Using Class Locator:
java
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.chrome.ChromeDriver; 
public class Example { 
public static void main(String[] args) { 
WebDriver driver = new ChromeDriver();
        driver.get("https://www.techlistic.com/p/selenium-practice-form.html");
        List<WebElement> genderButtons = driver.findElements(By.className("form-check-input")); 
 }
}
  1. Using XPath Locator:
java
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.chrome.ChromeDriver; 
public class Example { 
public static void main(String[] args) { 
WebDriver driver = new ChromeDriver();
        driver.get("https://www.techlistic.com/p/selenium-practice-form.html");
        WebElement submitButton = driver.findElement(By.xpath("//button[@type='submit']")); 
 }
}
  1. Using CSS Selector Locator:
java
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.chrome.ChromeDriver; 
public class Example { 
public static void main(String[] args) { 
WebDriver driver = new ChromeDriver();
        driver.get("https://www.techlistic.com/p/selenium-practice-form.html");
        WebElement stateDropdown = driver.findElement(By.cssSelector("select#state")); 
 }
}

4. Best Practices when Using Locators

  1. Use ID Locators wherever possible: ID Locators are the most efficient way to locate an element on a web page. Each web element on a page should have a unique ID, and you should use the ID Locator to find the element.
  2. Avoid using XPath Locators: Although XPath Locators are powerful, they are also slower than other locators. If possible, try to use other locators such as ID or Name Locators.
  3. Use CSS Selector Locators for complex selections: If you need to select multiple elements or elements with complex attributes, the CSS Selector Locator is a powerful and efficient way to do so.
  4. Use Partial Link Text Locators for dynamic content: If the text content of a link changes dynamically, you can use the Partial Link Text Locator to locate the link.
  5. Use Relative XPath expressions: If you must use XPath Locators, try to use Relative XPath expressions instead of Absolute XPath expressions. Relative XPath expressions are faster and more robust than Absolute XPath expressions.

Conclusion

In conclusion, locators are an essential aspect of Selenium automation, and understanding how to use them correctly is crucial to writing robust and efficient test scripts. By using the best practices discussed in this blog, you can write maintainable and scalable Selenium automation scripts that can withstand changes in the web application under test.


What is Selenium WebDriver?  << Previous      ||      Next >>  Selenium WebDriver Commands

Author
Vaneesh Behl
Passionately writing and working in Tech Space for more than a decade.

Follow Techlistic

YouTube Channel | Facebook Page | Telegram Channel | Quora Space
Feel free to ask queries or share your thoughts in comments or email us.

Comments

Post a Comment

Popular posts from this blog

17 Best Demo Websites for Automation Testing Practice

Image
We need demo websites for various purposes, like learning new tools and for automation testing practice. In this post, we cherry-picked some of the best websites to practice Selenium automation testing. This set of demo websites would help you to enhance your automation skills.  This post can help various people like,  Automation Testing learners, Experienced professionals, and even Automation Testing tutors/teachers. They all can benefit from these demo websites. Table of Contents 1. Techlistic Automation Practice Form 2. Amazon like Demo E-Commerce Website 3. Make My Trip like Travel Portal 4. Demo Automation Practice Web Table 5. Google.com 6. Demo Website for Handling Alerts 7. Way2Automation Demo 8. NewTours DemoAUT 9. The Demo Site 10. DemoQA 11. Para Bank 12. Orange HRM 13. Sauce Labs Demo E-Commerce Site 14. Demo Bank Demo Websites for API Automation Testing Practice 15. Restful Booker 16. Pet Store 17. Demo REST API Best Demo Websites for Automation Practice Let's take
Read more

Mastering Selenium Practice: Automating Web Tables with Demo Examples

Image
Demo Webtable 1 (Static Table) This table has 7 rows and 3 columns. So, the distribution of rows and columns is even. We can assume this table is a static or linear table. This table is easy to automate.  Company Contact Country Google Maria Anders Germany Meta Francisco Chang Mexico Microsoft Roland Mendel Austria Island Trading Helen Bennett UK Adobe Yoshi Tannamuri Canada Amazon Giovanni Rovelli Italy Demo Webtable 2 (Dynamic Table) This table has an uneven distribution of rows and columns the last row has two columns only, but the other rows have 7 columns each. So, let's assume it is a dynamic table. This table is a tougher task. Structure Country City Height Built Rank … Total 4 buildings Burj Khalifa UAE Dubai 829m 2010 1 Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 Taipei 101 Taiwan Taipei 509m 2004 3 Financial Center China Shanghai 492m 2008 4 Selenium Practice Exercises for Demo Table 2 -  Verify that there are only 4 structure values present in the table with Seleniu
Read more

Automation Practice: Automate Amazon like E-Commerce Website with Selenium

Image
In this post, you will learn to automate different functionalities of an e-commerce website. To automate this practice assignment,  you should have sound knowledge of all the Selenium concepts. We'll create a test plan and then automate an e-commerce website that is quite similar to amazon.com. Automate Amazon-like e-Comm website with Selenium for Automation Practice Table of Content 1. What should you know before starting this Project assignment? 2. Which functionalities will we automate in this Project assignment? 3. Create Test Plan for Amazon like e-commerce website 4. Automate Amazon like e-commerce website: Automate User Registration and Login of e-commerce website Automate Search feature of e-commerce website Automate "Buy Product" feature of e-Commerce website 1. What should you know before automating this automation assignment? You should know the following topics, before starting this project assignment: Software Testing Concept
Read more

14 Best Selenium Practice Exercises for Automation Practice

Image
  This page contains the list of Selenium Program exercises for automation practice. Your skills will definitely get a boost after solving these Selenium Practice Assignments. In these assignments, you will find the Sample Applications for Automation Testing . These Practice Assignments are designed in such a way that learners can enhance their automation skills. They also include multiple Sample Test Cases for Selenium along with step-by-step description which needs to be automated.  Reference links to  Selenium WebDriver Commands  for solutions are provided in the assignments. 10 Best Selenium Practice Exercises for Automation Practice Automate Amazon-like e-Comm Website with Selenium WebDriver In this self-learning project assignment, we'll automate all the major e-commerce website features with Selenium and Java. We'll automate Sign-up and login, search products, and purchase products for Amazon an e-commerce website. Automate GoDaddy.com Website features with Selenium WebD
Read more

How to Automate Google Search with Selenium WebDriver

Image
In this post, you will learn to automate Google Search using Selenium Webdriver with Java. This is a real-time example of Explicit wait command. Google search is an Ajax call. We will handle this Ajax call using the Explicit wait command of Selenium Webdriver. We can also say that we'll automate the auto-suggestion feature of search in this post. 1. What is Ajax search? Ajax stands for Asynchronous JavaScript and XML. Ajax is a new technology for creating faster and more interactive web applications. What Ajax does is: Update a web page without reloading/refreshing it Read data from the server after the page is loaded When you write something into a Search Box say "app" and it shows you similar search options that are Ajax. And you can automate that auto-suggestion box with the help of Explicit command in Selenium WebDriver . Google search is the best example of Ajax. In the case of Google search, you simply type any keyword in the search bar and just below the s
Read more

Top 10 Highly Paid Indian CEOs in the USA

Image
Top Indian CEOs in the USA Indian Americans have been making significant contributions to the US economy for decades. Many Indian-origin executives have reached the pinnacle of success in American corporations and hold some of the highest-paid positions in the country. In this post, we will take a look at the top 10 highly paid Indian-origin CEOs in the USA, their history, academics, salary, and net worth. 1. Sunder Pichai   Salary US$ 199.7 million Sundar Pichai is the CEO of Google and Alphabet Inc. Born in Tamil Nadu, India, Pichai grew up in a middle-class family and earned a Bachelor’s degree in Metallurgical Engineering from the Indian Institute of Technology in Kharagpur. He went on to earn a Master’s degree in Material Sciences and Engineering from Stanford University and an MBA from the Wharton School of the University of Pennsylvania. Pichai joined Google in 2004 and rose through the ranks to become CEO in 2015. His annual salary in 2021 was $2 million, and his net wort
Read more

Python Behave Tutorial: A Comprehensive Guide to Behavior-Driven Development (BDD)

Image
In this tutorial, we'll explain each and every aspect of Behavior Driven Development. This BDD Python tutorial will help you create and design your automation tests and framework. Table of Content 1. What is BDD? 2. What is Gherkin Language in BDD? 3. What is Behave in Python? 4. Installing and Setup Behave 5. Project Structure for Behave Python (BDD) 6. Feature Files, Step Functions and Other Files in Behave Feature File Step Functions Step Parameters Passing String Param from Feature File Passing Integer Param from Feature File environment.py file behave.ini file 7. Run Feature files in Behave Run a single feature file Run multiple feature files Generate JUNIT xml reports with behave Run feature files with Python suite file Upcoming Tutorials: 8. API Automation Testing with BDD Python (Behave) 9. Selenium Automation with BDD Python (Behave) 1. What is BDD? BDD stands for Behavior Driven Development. BDD is an agile process of development. It encourages non-technical or business t
Read more

Selenium IDE Tutorial: How to Automate Web Testing with Easy-to-Use Interface

Image
1. What is Selenium IDE? Selenium IDE (Integrated Development Environment) is a browser-based tool used for automating web application testing. It is an open-source record-and-playback tool that allows testers and developers to create automated test cases without the need for extensive programming knowledge. Selenium IDE provides a simple and user-friendly interface for creating and executing test cases. It records user interactions with a web application and generates corresponding code in Selenium's scripting language. This makes it easy to create automated tests quickly and efficiently. Table of Contents 1. Introduction to Selenium IDE      1.1 What is Selenium IDE?      1.2 Benefits of Using Selenium IDE      1.3 Features of Selenium IDE      1.4 Difference between Selenium IDE and Webdriver      1.5 Getting Started with Selenium IDE 2. How Selenium IDE Works 3. Recording and Playing Back Test Cases      3.1 Recording Test Cases      3.2 Playing Back Test Cases      3.3 Managin
Read more

What is Robot Class in Selenium WebDriver?

Image
Selenium can't interact with Window dialogs on it's own. You all must know that Selenium can only handle browser windows and not OS windows. So, when we have to upload any file on a webpage and as soon as we click on the Browse or Upload button, a windows tab opens up from which we have to select the file. We cannot handle that windows tab directly with Selenium WebDriver. But we can use other libraries and integrate them with Selenium code to handle window based dialogs. Robot class is one of them. We can use Robot class to upload or download a file using selenium. What is Robot Class in Selenium WebDriver? Robot Class is used to perform Keyboard actions. It has direct support to perform actions like press and release key. Robot class has key codes for each key present on the keyboard. So, if we want to press any key, then we need to call that key code. In automation we make use of Robot class to handle Windows tabs by interacting with them via virtual keyboard. One i
Read more

Top 51 Most Important Selenium WebDriver Interview Questions

Image
This Selenium Interview questions post will definitely help you prepare for a Selenium automation interview and brush up your Selenium skills easily. You can find Selenium interview questions and answers and also Selenium Java interview questions from Experienced to Beginners in this post. Selenium interview questions are divided into different topics for the sake of ease. Table of Contents 1. Selenium Basic Interview Questions 2. Actions Class Interview Questions 3. Selenium Locators Interview Questions 4. Windows and Frame Handling Interview Questions 5. Advanced Selenium Interview Questions 6. Selenium Automation Framework Questions 7. Java OOPS Interview Questions 8. Top 21 Selenium TestNG Interview Questions 9. Expert Tips to avoid Interview Blunders that can cost you the JOB! 10. Top 10 Interview Preparation Websites 11. Top Websites to Boost Your Career by Enhancing Skills 1. Selenium Basic Interview Questions Q1 - What is the syntax to launch the browser in Selenium WebDr
Read more