How to Use Relative Locators in Selenium

Selenium automation scripts work by locating web elements. Traditionally, testers have relied on IDs, XPaths, CSS Selectors, and class names to locate elements on a web page. But, many times, there are cases when these elements are dynamic, inconsistent, or missing across different environments. This is when Relative Locators in Selenium 4 come into play – a powerful feature to locate web elements based on their visual relation to other elements on the page.  

In this article, we will explore everything about relative locators in Selenium, from why to how, along with its examples.

What are Relative Locators in Selenium?

Relative locators, earlier known as Friendly Locators, were introduced in Selenium 4 to allow automation folks to locate elements based on their relative location with other web elements on the page. Instead of depending on fixed locators, relative locators allow you to find an element that is:

• Above another element
• Below another element
• To the left of another element
• To the right of another element
• near (within approximately 50 pixels in any direction by default)

This is extremely useful with dynamic web pages, complex UIs, or when elements lack unique identifiers.

Why use Relative Locators?

Some scenarios where relative locators can be very useful are-

1. Dynamic IDs: When the IDs of elements on a web page keep changing on each page load.
2. Duplicate Class Name: Multiple elements having the same class can make it difficult to differentiate.
3. Complex Layouts: When elements do not have stable attributes but maintain a consistent position relative to others. 
4. Accessibility Testing: Identifying elements visually, like a label above an input box, mimicking how a user perceives the UI.

How do Relative Locators work internally?

Relative locators are implemented using JavaScript to evaluate the on-screen placement of DOM elements. Selenium computes the element positions on the rendered web page to determine the geometric relation between the elements.

Syntax of Relative Locators in Selenium

To start using relative locators in your Selenium code, ensure that you are using Selenium 4 or above and your project dependencies are updated. 

You can use the built-in methods of the RelativeLocators class to locate web elements.

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement password = driver.findElement(By.id("pass"));WebElement uName = driver.findElement(with(By.tagName("input")).above(password));

Available methods are –

• .above(WebElement)
• .below(WebElement)
• .toLeftOf(WebElement)
• .toRightOf(WebElement)
• .near(WebElement)

Examples of Relative Locators –

1. Locate the username field above the password field

WebElement password = driver.findElement(By.id("pass"));
WebElement uName = driver.findElement(with(By.tagName("input")).above(password));
uName.sendKeys(“test user”);

2. Click the Login button below the password field

WebElement password = driver.findElement(By.id("pass"));
WebElement loginBtn = driver.findElement(with(By.tagName("button")).below(password));
loginBtn.click();

3. Locate the element to the left of a label

WebElement label = driver.findElement(By.xpath("//label[text()=’Email’]"));
WebElement icon = driver.findElement(with(By.tagName("img")).toLeftOf(label));

4. Locate the element near a Heading

WebElement heading = driver.findElement(By.tagName("h2"));
WebElement icon = driver.findElement(with(By.tagName("img")).near(heading));

Best Practices for Using Relative Locators

1. Use with reference elements that have unique identifiers like ID or name.
2. Limit the scope of relative locator usage to elements that do not have stable locators.
3. Combine with assertions to ensure that the located element is what you expected.
4. Use .near() carefully, especially in dense UIs, as it might match unexpected elements if the layout changes.

Limitations of Relative Locators

While Relative Locators are a powerful tool, but they come with certain limitations which are discussed below.

• It is fully dependent on page rendering. Elements must be fully rendered as lazy -loaded or hidden elements may cause issues.
• Since it is position-based, any change in the layout can affect the accuracy.
• There can be performance overhead in case of large DOMs as position calculation can impact the execution speed.

Key Takeaways

Relative locators are a powerful feature of Selenium 4 which helps locate web elements relative to the position of another web element. They are of great use when the traditional locators are unreliable, for example, in case of dynamic UIs and complex scenarios. Different methods in RelativeLocators class are present to allow locating a web element. By leveraging Selenium relative locators, you not only improve test resilience but also make your scripts closer to how humans interact with the UI- visually and contextually.