Unleashing the Power of Selenium 4: A Deep Dive into Relative Locators

By /

With the launch of Selenium 4, a new feature known as relative locators (or friendly locators) was introduced, offering improvements over Selenium 3.

What are Relative Locators?

Relative locators provide a new method for finding web elements by describing their position in relation to other elements on the page. This is especially useful when an element lacks a unique identifier, but its location can be easily described relative to another element that is easy to find.

Selenium 4 uses the JavaScript function getBoundingClientRect() to accurately determine the size and position of web elements. This information is then used to locate adjacent elements, greatly improving Selenium’s web automation capabilities.

For instance, if you need to find a newsletter checkbox that doesn’t have a unique ID, name, or class, but it’s located near a label with the ID “newsletter,” you can use the near() relative locator to find it.

Relative locators are intended to supplement traditional locators, not replace them. They offer greater flexibility and make the code more readable.

How to Use Relative Locators

Selenium 4 offers five relative locators to find elements based on their position relative to other elements:

  • above(): Finds elements located above a specified element.
  • below(): Finds elements located below a specified element.
  • toLeftOf(): Finds elements located to the left of a specified element.
  • toRightOf(): Finds elements located to the right of a specified element.
  • near(): Finds elements within a certain distance of a specified element (the default is 50 pixels).

The syntax for relative locators is similar to traditional locators. You pass the relative locator to the findElement() or findElements() methods. You can also chain multiple relative locators to refine your search.

For example, to find an element that is to the left of an element with the ID “p6” and below an element with the ID “p2,” you would write:

Java

WebElement element = driver.findElement(RelativeLocator.with(By.tagName("div")).toLeftOf(By.id("p6")).below(By.id("p2")));

To find elements that are near an element with the ID “bar” (within 100 pixels), you would write:

Java

WebElement elements = driver.findElements(RelativeLocator.with(By.tagName("div")).near(By.id("bar"), 100));

Why Use Relative Locators?

Relative locators offer several advantages over traditional locators, including:

  • Greater Readability: They are more intuitive because they describe web elements in plain language.
  • Increased Resilience: They are less likely to break when the web page layout changes because they don’t rely on the exact attributes or positions of elements.
  • Improved Element Location: They can find elements that are difficult or impossible to locate with traditional methods, such as those without unique attributes or that are dynamically generated.

Code Examples

To see relative locators in action, we’ll use a product gallery page as a reference.

To use relative locators in Java, you need to import the following package:

Java

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

You can also use a static import to simplify your code:

Java

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

Here are a few examples of relative locators in Java:

Java

@Test
public void testLeftBelowRelativeLocators() {
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("p6")));
    String id = driver.findElement(RelativeLocator.with(By.tagName("div"))
            .toLeftOf(By.id("p6")).below(By.id("p2")))
            .getAttribute("id");
    System.out.println("ID= " + id);
    assertEquals(id, "p5");
}

@Test
public void testRightAboveRelativeLocators() {
    String id2 = driver.findElement(RelativeLocator.with(By.tagName("div"))
            .toRightOf(By.id("p2")).above(By.id("p6")))
            .getAttribute("id");
    System.out.println("ID2= " + id2);
    assertEquals(id2, "p3");
}

@Test
public void testNearPixelsRelativeLocators() {
    String id3 = driver.findElement(RelativeLocator.with(By.tagName("div"))
            .near(By.id("p9"), 100))
            .getAttribute("id");
    System.out.println("ID3= " + id3);
    assertEquals(id3, "p6");
}

You can find the full code example on the QA Club GitHub page.

Conclusion

Relative locators are a valuable new feature in Selenium 4 that allow you to locate web elements based on their spatial relationships with other elements. They are more readable, flexible, and resilient than traditional locators, making them a great tool for dealing with complex or dynamic web pages.

If you’re interested in learning more about Selenium 4 and test automation, consider joining the QA Club, a community platform dedicated to test automation. There, you can find tutorials, best practices, and connect with other testers and developers. Don’t miss out on the opportunity to master test automation. 🙂

Related Posts

Scroll to Top