Relative locators or friendly locators

Selenium 4 (Alpha) with a new locators called "Relative Locators" earlier it was named "Friendly Locators".

Just to recap, In selenium we have used different types of locators such as ID, Name, CSS Selector, XPath, ClassName, TagName, LinkText and Partial LinkText.

The concept of 'Relative locators' was already implemented in Sahi by Thoughtworks team. It offered a positional way of finding elements that are near, above, below, left of, right of. And it is now available in Selenium aplha version 4.0.0-alpha-3 and not in earlier versions.

Selenium 4 has new locators for finding web elements using Relative Locator. It has the following methods – 'above', 'below', 'toLeftOf', 'toRightOf', and 'near'.

Selenium relative locators

Here is a selenium github link for RelativeLocators.java

above() Element should be searched above the specified element. When we pass a Locator/ WebElement, this methods searches for the position above the specified element.
below() Element should be searched below the specified element. When we pass a Locator/ Webelement, this methods searches for the position below the specified element.
toLeftOf() Element should be searched to the left of specified element. When we pass a Locator/ Webelement, this methods searches for the position to the left of the specified element.
toRightOf() Element should be searched to the right of the specified element. When we pass a Locator/ Webelement, this methods searches for the position to the right of the specified element.
near() Element should be at most 50 pixels far away from the specified element.

Below is the source code how this is implemented -

public RelativeBy near(WebElement element) {
      Objects.requireNonNull(element, "Element to search for must be set.");
      return near(element, 50);
}

We can also modify the pixel value. We need to send the pixel value and it should be greater than 0 always. Check the below implementation -

public RelativeBy near(WebElement element, int atMostDistanceInPixels) {
      Objects.requireNonNull(element, "Element to search for must be set.");
      checkArgument(atMostDistanceInPixels > 0, "Distance must be greater than 0.");

      return near((Object) element, atMostDistanceInPixels);
    }

These locators has ability to find elements that are above, below, left of, right of, near. This will allow us to write robust tests where you find elements to the left of, find the check box to the left of this label. Find the radio button below this, find the input field to the right of this lable or below this label etc.

When the elements are not uniquely identifiable by themselves, we use to loop the WebElements based on certain condition and then select that particular WebElement. In many of such cases we can start using these relative locators and identify them in relation to either some element near them, or using toLeftOf or by the element in which they are available.

To start with these relative locators, we have to download the Selenium 4 Alpha version from Maven repository. Currently we are using version Selenium 4.0.0-alpha-3.

<!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/lift -->
<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>lift</artifactId>
    <version>4.0.0-alpha-3</version>
</dependency>

or

<!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
		<dependency>
			<groupId>org.seleniumhq.selenium</groupId>
			<artifactId>selenium-java</artifactId>
			<version>4.0.0-alpha-3</version>
		</dependency>

We can find elements using relative locators something like below, but we also need to make sure to import import static org.openqa.selenium.support.locators.RelativeLocator.withTagName; : -

Example# 1 :

WebElement relativeElement = driver.findElement(withTagName("li")
.toLeftOf(By.cssSelector(".testcls")));

Example# 2 :

WebElement ele = driver.findElement(withTagName("input")
.toRightOf(By.cssSelector(".usrvalue"))
.below(By.name("user")));
ele.sendKeys("test");

Currently finding elements using relative locators, we have to use method which in turn returns a RelativeLocator.RelativeBy object.

Selenium relative locators withTagName

Selenium Tutorials: 

Add new comment