Understanding Locators in Selenium WebDriver for End-to-End Automation

Automation testing is a powerful way to ensure that web applications work as expected. One of the most popular tools for this is Selenium WebDriver, which allows you to automate actions like clicking buttons, typing text, and navigating websites. But how does Selenium know where to perform these actions on a web page? That’s where locators come in.

In this blog, we’ll dive deep into what locators are, why they’re essential, and how to use them effectively in Selenium WebDriver for end-to-end automation. Let’s get started!

What Are Locators and Why Do We Need Them?

Imagine you’re in a big city with thousands of houses, and you need to find one specific home. You’d use an address to locate it, right? Similarly, in a webpage’s HTML code, there are tons of elements like buttons, text boxes, and links. Locators act like addresses that help Selenium WebDriver find these elements so it can interact with them, whether it’s clicking a button or typing into a text field.

For example, let’s say we’re automating a login process on a Practice Website. On this page, there’s a username text box where we want Selenium to type a username. But how does Selenium know which text box to use? The webpage’s HTML has many elements, so we need a way to tell Selenium, “Hey, go to this specific text box.” That’s where locators step in. They provide the unique “address” of the HTML element we want to target.

Selenium uses these locators in its code to find elements and perform actions like:

• Clicking a button (e.g., “Sign In”).

• Typing text (e.g., entering a username or password).

• Selecting checkboxes or links.

Without locators, Selenium would be lost, unable to figure out where to go on the page. So, locators are the backbone of automation with Selenium WebDriver.

Types of Locators Supported by Selenium

Selenium WebDriver supports several types of locators to identify HTML elements. Think of these as different ways to write an address. Here are the main ones:

• ID: A unique identifier for an element (like a house number).

• Name: A name assigned to an element.

• Class Name: A class attribute that might apply to multiple elements.

• Tag Name: The type of HTML tag (e.g., <input>, <button>).

• XPath: A path through the HTML structure to find an element.

• CSS Selector: A way to select elements using CSS styling rules.

• Link Text: The visible text of a hyperlink (used only for links).

• Partial Link Text: A part of the visible text in a hyperlink (useful when the full text is dynamic or too long).

Not every element on a webpage will have all these locators. For instance, a button might have an ID, but a text box might only have a Name or XPath. The trick is to pick a locator that uniquely identifies the element you want and is easy to use in your Selenium code.

Exploring Locators with a Practice Website

To understand locators better, let’s use the Practice Website. This site has a login form where we can practice automation. Here’s what it includes:

• A text box for username.

• A text box for password.

• A checkbox.

• A “Sign In” button.

• A “Forgot your password?” link.

• A “Reset Login” button (on the Forgot Password page).

Our goal is to automate actions like signing in, resetting a password, and logging out. Let’s see how locators make this possible.

Step 1: Inspecting Elements to Find Locators

Before we can use locators, we need to find them. We do this by inspecting the webpage’s HTML using the browser’s Developer Tools. Here’s how:

• Open the website in Chrome (or any browser).

• Right-click the username text box and select “Inspect.”

• The Developer Tools window opens, showing the HTML code. An arrow icon lets you click any element on the page to highlight its code:

  

For the username text box, the HTML might look like this:

<input type="text" placeholder="Username" id="inputUsername">

Here, we see:

• Tag Name: input (the type of HTML element).

• Attributes: type="text", placeholder="Username", id="inputUsername".

From this, we can use:

• ID: inputUsername (unique and reliable).

• Name: Not present here.

• Tag Name: input (but not unique since there are other <input> tags).

• XPath or CSS: We can build these from the attributes.

Step 2: Writing Selenium Code with Locators

Let’s write some Java code to automate typing “samiksha” into the username text box:

Set up the browser:

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
WebDriver driver = new ChromeDriver();
driver.get("https://rahulshettyacademy.com/locatorspractice/");

This opens Chrome and loads the practice website.

Find the element and type:

import org.openqa.selenium.By;
driver.findElement(By.id("inputUsername")).sendKeys("samiksha");

• findElement(By.id("inputUsername")): Uses the ID locator to find the email text box.

• sendKeys("samiksha"): Types “samiksha” into it.

When we run this, Selenium opens the browser, navigates to the site, and types “samiksha” into the username box. Cool, right?

Step 3: Using Different Locators

Now, let’s try the password field. Its HTML might be:

<input type="password" placeholder="Password" name="inputPassword">

There’s no ID, but we have a Name (inputPassword). The code becomes:

driver.findElement(By.name("inputPassword")).sendKeys("randompass");

For the “Sign In” button:

<button class="submit signInBtn" type="submit">Sign In</button>

It has a Class Name (submit signInBtn). Since there are two classes (separated by a space), we can use either:

driver.findElement(By.className("signInBtn")).click();

This clicks the button. If the login fails (because “randompass” is wrong), we’ll see an error message like “Incorrect username or password.”

Capturing Text with Locators

After clicking “Sign In” with wrong credentials, an error message appears. Let’s capture it. The HTML is:

<p class="error">Incorrect username or password</p>

We can use a CSS Selector this time:

• Syntax: tagname.classname (e.g., p.error).

String errorMessage = driver.findElement(By.cssSelector("p.error")).getText();
System.out.println(errorMessage);

This prints “Incorrect username or password” to the console.

Why CSS Selectors and XPath Are Special?

Unlike ID or Name, which need specific attributes in the HTML, CSS Selectors and XPath can be built from whatever’s available. For example:

• CSS: p.error (uses tag and class).

• XPath: //p[@class='error'] (scans the HTML for a <p> tag with class “error”).

If the HTML lacks ID or Class, we can still use:

• CSS: tagname[attribute='value'] (e.g., input[placeholder='Username']).

• XPath: //tagname[@attribute='value'] (e.g., //input[@placeholder='Username']).

These are universal and flexible, making them powerful tools.

Validating Locators

To ensure a locator is unique, use tools like SelectorsHub or ChroPath (browser plugins). For example:

• Type p.error in SelectorsHub. If it says “1 element matching,” it’s unique.

• Or, in the browser console, use $('your_css_here') or $x('your_xpath_here'). For example, type $('p.error') in the console. If it highlights one element, you’re good. Check below image for reference:

  

Handling Synchronization Issues

Sometimes, Selenium moves too fast. After clicking “Sign In,” it might try to grab the error message before it appears, causing a “No such element” error. Why? The page takes a couple of seconds to display the message, but Selenium doesn’t wait.

Solution: Implicit Wait

We can tell Selenium to wait using an implicit wait:

import java.time.Duration;
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));

This means Selenium will wait up to 5 seconds for an element to appear before failing. After adding this after WebDriver driver = new ChromeDriver();, the code works:

• Clicks “Sign In.”

• Waits for the error message.

• Prints it successfully.

Automating the Forgot Password Flow

Now, let’s click the “Forgot your password?” link:

<a href="#">Forgot your password?</a>

It’s a link, so we can use Link Text or Partial Link Text:

// Using full Link Text
driver.findElement(By.linkText("Forgot your password?")).click();

// Or using Partial Link Text
driver.findElement(By.partialLinkText("Forgot")).click();

This opens a form to reset the password.

For the “Name” field:

<input type="text" placeholder="Name">

Use XPath:

driver.findElement(By.xpath("//input[@placeholder='Name']")).sendKeys("John");

For the “Email” field:

driver.findElement(By.cssSelector("input[placeholder='Email']")).sendKeys("john@rsa.com");
driver.findElement(By.cssSelector("input[placeholder='Email']")).clear(); // Clears the field
driver.findElement(By.cssSelector("input[placeholder='Email']")).sendKeys("john@gmail.com");

For the “Phone Number” field:

driver.findElement(By.xpath("//form/input[3]")).sendKeys("9876543210");

Click the “Reset Login” button:

driver.findElement(By.cssSelector(".reset-pwd-btn")).click();

Handling a Popup Issue

Sometimes, clicking “Reset Login” fails with an ElementClickIntercepted error. This happens because the page slides (it’s a single-page app), and a popup overlaps the button while Selenium tries to click.

Solution? Add a wait:

Thread.sleep(1000); // Wait 1 second. Replace with explicit wait for production

Grab the reset message:

String resetMessage = driver.findElement(By.cssSelector("form p")).getText();
System.out.println(resetMessage);

Logging In with the Correct Password

Click “Go to Login”:

driver.findElement(By.xpath("//div[@class='forgot-pwd-btn-container']/button[1]")).click();
Thread.sleep(1000); // Wait for the view to stabilize

Now, log in:

Username:

driver.findElement(By.cssSelector("#inputUsername")).sendKeys("samiksha");

Password:

driver.findElement(By.xpath("//input[contains(@type,'pass')]")).sendKeys("rahulshettyacademy");

Checkbox:

driver.findElement(By.id("chkboxOne")).click();

Sign In:

driver.findElement(By.xpath("//button[contains(@class,'submit')]")).click();

Validating Successful Login

String loginMessage = driver.findElement(By.tagName("p")).getText();
// Requires import and testng dependency
import org.testng.Assert;
Assert.assertEquals(loginMessage, "You are successfully logged in.");

Validate the greeting:

String name = "samiksha";
String greeting = driver.findElement(By.cssSelector("div.login-container h2")).getText();
Assert.assertEquals(greeting, "Hello " + name + ",");

Logging Out

Click the “Log Out” button:

driver.findElement(By.xpath("//button[text()='Log Out']")).click();
driver.close(); // Close the browser

Making the Password Dynamic

public static String getPassword(WebDriver driver) throws InterruptedException {
    driver.get("https://rahulshettyacademy.com/locatorspractice/");
    driver.findElement(By.linkText("Forgot your password?")).click();
    Thread.sleep(1000);
    driver.findElement(By.cssSelector(".reset-pwd-btn")).click();
    String passwordText = driver.findElement(By.cssSelector("form p")).getText();
    String[] passwordArray = passwordText.split("'");
    String password = passwordArray[1].split("'")[0];
    return password;
}

Call it in the main code:

String password = getPassword(driver);
driver.findElement(By.xpath("//input[contains(@type,'pass')]")).sendKeys(password);

Running in Different Browsers

To run in Firefox or Edge, just change the driver setup:

Firefox:

System.setProperty("webdriver.gecko.driver", "path/to/geckodriver.exe");
WebDriver driver = new FirefoxDriver();

Edge:

System.setProperty("webdriver.edge.driver", "path/to/msedgedriver.exe");
WebDriver driver = new EdgeDriver();

The locators remain the same across browsers.

Maximizing the Browser and Navigation

Maximize the browser:

driver.manage().window().maximize();

Navigate between pages:

driver.get("https://google.com");
driver.navigate().to("https://www.selenium.dev/");
driver.navigate().back(); // Back to Google
driver.navigate().forward(); // Forward to selenium.dev

Traversing with XPath: Parent, Child, and Siblings

On the Automation Practice Website

• Parent to Child: //header/div/button[1] (first button under div).

• Sibling to Sibling: //header/div/button[1]/following-sibling::button[1] (next button).

• Child to Parent: //header/div/button[1]/parent::div (back to div).

Example:

driver.get("https://rahulshettyacademy.com/AutomationPractice/");
driver.findElement(By.xpath("//header/div/button[1]/following-sibling::button[1]")).click();
System.out.println(driver.findElement(By.xpath("//header/div/button[1]/parent::div")).getText());

Conclusion

Locators are the key to Selenium WebDriver automation. Whether it’s ID, XPath, CSS, Link Text, or Partial Link Text, they guide Selenium to the right elements. By mastering locators inspecting elements, writing code, handling waits, and traversing HTML you can automate complex flows like logging in, resetting passwords, and validating results.

Practice with tools like SelectorsHub, experiment with different browsers, and soon, Selenium will feel like a cakewalk!

Check out the complete Selenium Series for more such articles. Thank you for reading :)