Relative Locators in Selenium 4

What are Relative Locators?

In Selenium 4.0, a new locator has been introduced which is known as relative locators, also known as friendly locators. This new concept helps us to locate elements based on their position with respect to other web elements on the webpage. It provides a more readable and intuitive way to identify the web elements in a more natural way. In broader terms, relative locators are a way to locate elements based on the visual representation on the web page.

Relative locators can help locate web elements that are otherwise difficult to locate using the existing selenium locators such as id, name, class name, link text, partial link text, tag name, css selector and xpath. You can use relative locator methods, when the web elements do not have any unique attributes or for those elements that are being dynamically generated during a page refresh.

Consider an example, where you want to inspect a “Submit” button on the web page. What if the “Submit” button does not have an id, name, or class attribute? In this case, we can not use the traditional locators such as id, name, or class name to locate the web element. Now consider, we also have a “Cancel” button located on the right side of “Submit” button. We can use the relative locator toRightOf() method to locate the element present on the right side of the base element.

Below are the 5 relative locators that are being added in Selenium 4 -

1.     above()

2.     below()

3.     toRightOf()

4.     toLeftOf()

5.     near()

How to Use Relative Locators?

Relative locators can make our life easy when we have to deal with complex web pages. The syntax for using relative locators is similar to using the traditional locators. The relative locators can be used by passing an argument to the findElement() or findElements() methods of Selenium Webdriver.

1.     above() -

The above() method is used to locate the element(s) just above the specified web element.

2.     below() -

The below() method is used to locate the element(s) just below the specified web element.

3.     toRightOf() -

The toRightOf() method is used to locate the element(s) to the right of a specified web element.

4.     toLeftOf() -

The toLeftOf() method is used to locate the element(s) to the left of a specified web element.

5.     near() -

The near() method is used to locate the element(s) that are near to the specified web element. The default value is 50 pixels.

Relative locators Example -

To demonstrate the relative locators concept, let us consider a below example from the LinkedIn page. It is a “Sign Up” page used to signup on LinkedIn, which will help us understand relative locators in a better way.

We need to add the below import statement while using the Relative locators:

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

We can also use the static import to avoid writing the class name every time:

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

Please refer above screenshot to understand this example,

1. above() -

Let us consider a scenario, where we need to find the “Email” field, which is above the “Password” field. Firstly, we will inspect the "Password" field through its id and then we will use the above() locator to find the email field.

2. below() -

Now let us consider a reverse scenario where we need to find the “Password” field, which is below the “Email” field. Firstly, we will inspect the email field through its id and then we will use the below() locator to find the password field.

3. toLeftOf()-

Now let us find an element on the left side of the “Sign In” link. We will inspect the “Sign In” link using the xpath and then we will use toLeftOf() locator to find the “Already On Linked In” label.

4. toRightOf()

Now let us consider the reverse case, where we want to find the element on the right side of the “Already On Linked In” label. We will inspect the “Already On Linked In” label and then use toRightOf() locator to find the “Sign In” link.

5. near()

near() is helpful when we need to find an element that is at most 50px away from the specified element. In this case, we would like to find the “Remember Me” field by first finding the checkbox.

JAVA Code:

Please find below snippet of code in Java to locate the web elements on LinkedIn page using relative locators.

package seleniumsessions;

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 static org.openqa.selenium.support.locators.RelativeLocator.with;

public class RelativeLocatorsConcept {

            public static void main(String[] args) throws InterruptedException {

             WebDriver driver = new ChromeDriver();

             driver.get("https://www.linkedin.com/signup");

             // 1.above()

             WebElement linkedInPwd = driver.findElement(By.id(“password”));

             WebElement linkedInEmail = driver.findElement(with(By.tagName("input")).above(linkedInPwd));

             // 2. below()

             WebElement linkedInEmail = driver.findElement(By.id("email-address"));

             WebElement linkedInPwd = driver.findElement(with(By.tagName("input").below(linkedInEmail));    

 // 3. toLeftOf()

             WebElement signInLink = driver.findElement(By.xpath(“//a[text()='Sign in']”));

             WebElement alreadyOnLinkedInLabel = driver.findElement(with(By.tagName("p")). toLeftOf(signInLink));

            // 4. toRightOf()

            WebElement alreadyOnLinkedInLabel = driver.findElement(By.xpath(“//p[contains(text(),'Already on

LinkedIn?')]”));

            WebElement signInLink = driver.findElement(with(By.tagName("a")).toRightOf(alreadyOnLinkedInLabel));

    //5. near()

            WebElement checkBoxField = driver.findElement(By.id("remember-me-checkbox"));

            WebElement rememberMeLabel = driver.findElement(with(By.tagName("label")).near(checkBoxField));

            }

}

The relative locators are not available in previous versions and it is specific to Selenium 4 version. Please note that Selenium WebDriver version is compatible with Selenium 4, before using relative locators to locate the web elements in your project.

Conclusion:

Relative locators plays an important role in locating the web elements when another element is not known.

It adds another layer of finding elements with methods such as above(), below(), toLeftOf(), toRightOf(), and near() locators.

Thank you for reading! Happy Learning !