Locator Recap & Best Practices

Apply a priority strategy for choosing locators and build reusable patterns for real projects.

Core Concepts Recap

In this unit, we explored the full spectrum of Selenium locator strategies. Choosing the right locator is the single most important factor in creating stable, maintainable tests.

The "Golden" Priority List

When inspecting an element, always look for locators in this order:

ID (By.id): Fastest and most unique.
Name (By.name): Great for form fields.
CSS Selector (By.cssSelector): Powerful, flexible, and faster than XPath.
XPath (By.xpath): The "nuclear option" for complex traversals or text-based lookup.

Specialized Strategies

Link Text: Perfect for navigation menus and anchors.
Relative Locators: Use with(By...) to find elements based on visual layout (above, below, near).
Chained Locators: Combine strategies to narrow down search scope.

Avoid Brittle Locators

Never use absolute XPaths like /html/body/div[2]/div[5]/button. They break with the slightest UI change. Always prefer relative paths or attributes.

Comprehensive Code Example

Here is a script that combines multiple locator strategies to interact with a complex page structure.

LocatorMastery.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 1. ID for the main container or form
WebElement loginForm = driver.findElement(By.id("login-modal"));

// 2. Name for input fields
WebElement username = driver.findElement(By.name("user_login"));

// 3. CSS Selector for complex attributes (e.g., data-testid)
WebElement password = driver.findElement(By.cssSelector("input[data-testid='password-field']"));

// 4. XPath for text-based button lookup
WebElement loginBtn = driver.findElement(By.xpath("//button[text()='Sign In']"));

// 5. Relative Locator for a "Forgot Password" link below the password field
WebElement forgotLink = driver.findElement(
    RelativeLocator.with(By.tagName("a")).below(password)
);

// Interaction
username.sendKeys("admin");
password.sendKeys("securePass123");
loginBtn.click();

Strategy Breakdown

By.id("login-modal"): Used for the high-level container because IDs are unique and fast.
By.cssSelector("input[data-testid...]"): Used when no ID/Name is present but a custom attribute exists. CSS is preferred over XPath for attributes.
RelativeLocator.with(...).below(...): Used for elements that are hard to describe by attributes but have a clear visual relationship to a known element.

Pro Tip

Refactor Early

If you find yourself writing complex XPaths, ask developers to add id or data-testid attributes.

CSS > XPath

Browsers optimize CSS selectors better than XPath. Use XPath only when you need to traverse up the DOM or search by text.

Uniqueness

Always verify your locator in the Chrome DevTools Console ($x("...") or $$("...")) to ensure it matches exactly one element.