Relative Locators

Find elements based on their visual position using Selenium 4's friendly locators.

Concept

Relative Locators (introduced in Selenium 4) let you find elements based on their visual position instead of just attributes. They answer questions like:

Which element is above this one?
Which element is to the right of that label?
Which element is near this reference box?

When to Use Relative Locators

This is especially helpful when:

Labels and inputs are separate elements.
Tables or grids have dynamic IDs.
Attributes are unstable, but layout is stable.

To use them, we import:

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

Then we can call with(By.tagName("...")) and chain a direction:

.above(referenceElement) - Finds an element visually above the reference
.below(referenceElement) - Finds an element visually below the reference
.toLeftOf(referenceElement) - Finds an element to the left of the reference
.toRightOf(referenceElement) - Finds an element to the right of the reference
.near(referenceElement) - Finds elements within ~50px (default) of the reference

Interactive Practice

Relative Locators Grid

Above

Left

Reference

Right

Below

Practice using relative locators to find and interact with the surrounding boxes based on the center Reference box.

Java Code Example

RelativeLocatorsExample.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
WebElement referenceBox = driver.findElement(By.id("box-center"));

WebElement aboveBox = driver.findElement(with(By.tagName("div")).above(referenceBox));
System.out.println("Above: " + aboveBox.getText());

WebElement belowBox = driver.findElement(with(By.tagName("div")).below(referenceBox));
System.out.println("Below: " + belowBox.getText());

WebElement leftBox = driver.findElement(with(By.tagName("div")).toLeftOf(referenceBox));
System.out.println("Left: " + leftBox.getText());

WebElement rightBox = driver.findElement(with(By.tagName("div")).toRightOf(referenceBox));
System.out.println("Right: " + rightBox.getText());

WebElement nearBox = driver.findElement(with(By.tagName("div")).near(referenceBox));
System.out.println("Near: " + nearBox.getText());

driver.quit();

Code Breakdown

driver.findElement(By.id("box-center")): Locates the reference box in the center using its id="box-center". This is our anchor element for all relative locators.
with(By.tagName("div")).above(referenceBox): Uses a relative locator to find a <div> that is visually above the reference box.
with(By.tagName("div")).below(referenceBox): Finds a <div> that appears below the reference element in the rendered layout.
with(By.tagName("div")).toLeftOf(referenceBox): Finds a <div> that is to the left of the reference box.
with(By.tagName("div")).toRightOf(referenceBox): Finds a <div> that is to the right of the reference box.
with(By.tagName("div")).near(referenceBox): Finds a <div> that is near the reference box (within about 50px). This will typically return the closest surrounding element.
getText(): Reads the visible text of each box ("Above", "Below", "Left", "Right", "Reference"), which helps verify you found the correct element.
driver.quit(): Closes the browser and ends the WebDriver session once all relative locator checks are done.

Pro Tip

Start with a stable reference

Always use a reliable locator (id, cssSelector, or simple XPath) to find the anchor, then apply relative locators.

Combine with tag filters

with(By.tagName("input")).toRightOf(labelElement) is much safer than searching any element to the right.

Best for layout-stable UIs

Relative locators shine when the visual structure is stable but attributes like IDs or classes change across builds or environments.

Concept

Relative Locators (introduced in Selenium 4) let you find elements based on their visual position instead of just attributes. They answer questions like:

Which element is above this one?

Which element is to the right of that label?

Which element is near this reference box?