Relative Locators in Selenium 4.0 - Tutorial

 

Introduction to Relative Locators in Selenium

• Relative Locators in Selenium are a powerful feature introduced in Selenium 4 that make it easier to locate and interact with web elements based on their relationship with other elements. 

• They provide a more intuitive way to write test scripts by specifying the location of an element relative to another element, such as above, below, to the left of, to the right of, or near an anchor element.

• Relative Locators simplify the process of locating elements in a web page by referencing nearby elements. 

• This makes it easier to write maintainable and robust test scripts, especially when dealing with dynamic web pages.

Syntax of Relative Locators

The syntax for using Relative Locators in Selenium is straightforward. It follows the pattern:

driver.findElement(RelativeLocator.strategy(anchorElement, relativeElement));
 

' RelativeLocator.strategy() ' specifies the relative locator strategy.

' anchorElement ' is the element with respect to which you want to locate the 'relativeElement'.

Relative Locator Strategies

There are five primary Relative Locator strategies:

a. above()

This strategy locates an element that is positioned directly above the anchor element.

b. below()

Finds an element that is positioned directly below the anchor element.

c. toLeftOf()

Locates an element that is positioned directly to the left of the anchor element.

d. toRightOf()

Finds an element that is positioned directly to the right of the anchor element.

e. near()

This strategy locates an element that is positioned near the anchor element. You can specify the proximity with pixel values.

Examples

Let's demonstrate how to use Relative Locators with Selenium WebDriver in Java.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator;
import io.github.bonigarcia.wdm.WebDriverManager;
 
public class RelativeLocatorExample {
    public static void main(String[] args) {
        WebDriverManager.chromedriver().setup();
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.example.com");
 
        // Find the "Sign Up" button above the "Log In" button.
        WebElement signUpButton = driver.findElement(RelativeLocator.withTagName("button")
                .above(driver.findElement(By.linkText("Log In"))));
 
        // Click the "Sign Up" button.
        signUpButton.click();
 
        // Find the "Submit" button to the left of the "Email" input field.
        WebElement submitButton = driver.findElement(RelativeLocator.withTagName("input")
                .toLeftOf(driver.findElement(By.name("email")))
                .below(driver.findElement(By.name("username"))));
 
        // Click the "Submit" button.
        submitButton.click();
 
        // Close the browser.
        driver.quit();
    }
}
 

In this example, we first navigate to a sample web page and then use Relative Locators to locate and interact with elements based on their relationships with other elements on the page.

Conclusion

Relative Locators in Selenium 4 provide a convenient way to locate elements based on their positions relative to other elements. This feature enhances the readability and maintainability of your test scripts, especially when dealing with dynamic web pages.

 Be sure to explore the various Relative Locator strategies and use them in your Selenium tests to make your automation efforts more efficient and robust.