Selenium WebDriver - Relative Locators

---

---

Selenium 4 gives the options of using the relative locators (also known as friendly locators) apart from the normal locators used for the purpose of identifying elements on a web page.

What are Relative Locators in Selenium?

Relative locators are used to identify an element which does not have enough information to locate it uniquely on a web application. For detecting it, we can identify it spatially with respect to another element (which can be located uniquely with its properties).

Please note that, while using the Relative locators, we would need to add the import statement −

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

Also, in case if a Maven project is used, Selenium Dependencies for versions greater than four should be added in the pom.xml. This is because the relative locators are only supported from Selenium 4.0 onwards.

The relative locators used in Selenium Webdriver are listed below −

• above()
• below()
• near()
• toLeftOf()
• toRightOf()

Example - above() Relative Locator

Let us take an example of the highlighted elements in the below page, where we would identify the text Practice Form which is appearing above the link login with the help of the above locator.

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element 
WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element above the first link element
WebElement e = driver.findElement(RelativeLocator.with(By.tagName("a")).above(l));

Code Implementation

package org.example;

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 java.util.concurrent.TimeUnit;

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

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='collapseTwo']/div/ul/li[2]/a"));

      // identify element above the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("a")).above(l));

      // Getting element text value the above identified element
      System.out.println("Getting element text: " + e.getText());

      // Closing browser
      driver.quit();
   }
}

Dependencies added in pom.xml file −

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>org.example</groupId>
   <artifactId>SeleniumJava</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
      <maven.compiler.source>16</maven.compiler.source>
      <maven.compiler.target>16</maven.compiler.target>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
   </properties>

   <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
   <dependencies>
      <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>4.11.0</version>
      </dependency>
   </dependencies>
</project>

Output

Getting element text: Practice Form

Process finished with exit code 0

In the above example, we had identified the element with the help of the above relative locator and obtained its text with the message in the console - Getting element text: Practice Form.

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example - below() Relative Locator

Let us take another example of the highlighted elements in the below page, where we would identify the link Login which is appearing below the link Register with the help of the below locator.

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element 
WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element below the first link element
WebElement e = driver.
   findElement(RelativeLocator.with(By.tagName("a")).below(l));

Code Implementation

package org.example;

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 java.util.concurrent.TimeUnit;

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

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='collapseTwo']/div/ul/li[2]/a"));

      // identify element below the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("a")).below(l));

      // Getting element text value the below identified element
      System.out.println("Getting element text: " + e.getText());

      // Closing browser
      driver.quit();
   }
}

Output

Getting element text: Register

In the above example, we had identified the element with the help of the below relative locator and obtained its text with the message in the console - Getting element text: Register.

Example - toLeftOf() Relative Locator

Let us take another example of the highlighted elements in the below page, where we would identify the label text Name which is appearing to the left of an input box with the help of the toLeftOf locator.

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element 
 WebElement l = driver.findElement(By.xpath("value of xpath locator"));
 
// identify element to left of the first element
WebElement e = driver.
   findElement(RelativeLocator.with(By.tagName("a")).toLeftOf(l));

Code Implementation

package org.example;

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 java.util.concurrent.TimeUnit;

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

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='name']"));

      // identify element left of the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("label")).toLeftOf(l));

      // Getting element text to left of identified element
      System.out.println("Getting element text: " + e.getText());

      // Closing browser
      driver.quit();
   }
}

Output

Getting element text: Name:

In the above example, we had identified the element with the help of the toLeftOf relative locator and obtained its text with the message in the console - Getting element text: Name:.

Example - toRightOf() Relative Locator

Let us take another example of the highlighted elements in the below page, where we would identify the text Selenium - Automation Practice Form which is appearing to the right of the page logo with the help of the toRightOf locator.

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element 
WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element to right of the first element
WebElement e = driver.
   findElement(RelativeLocator.with(By.tagName("h1")).toRightOf(l));

Code Implementation

package org.example;

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 java.util.concurrent.TimeUnit;

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

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("/html/body/div/header/div[1]/a"));

      // identify element right of the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("h1")).toRightOf(l));

      // Getting element text to right of identified element
      System.out.println("Getting element text: " + e.getText());

      // Closing browser
      driver.quit();
   }
}

Output

Getting element text: Selenium - Automation Practice Form

In the above example, we had identified the element with the help of the toRightOf relative locator and obtained its text with the message in the console - Getting element text: Selenium - Automation Practice Form.

Example - near() Relative Locator

Let us take another example of the highlighted elements in the below page, where we would identify and check the checkbox which is appearing near the label Sports with the help of the near locator.

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element 
 WebElement l = driver.findElement(By.xpath("value of xpath locator"));
 
// identify element to near of the first element
WebElement e = driver.
   findElement(RelativeLocator.with(By.tagName("input")).near(l));

Code Implementation

package org.example;

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 java.util.concurrent.TimeUnit;

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

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='practiceForm']/div[7]/div/div/div[1]/label"));

      // identify element near the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("input")).near(l));

      // check checkbox
      e.click();

      // verify is selected
      System.out.println("Verify if selected: " + e.isSelected());

      // Closing browser
      driver.quit();
   }
}

Output

Verify if selected: true

In the above example, we had identified the checkbox with the help of the near relative locator and verified if the checkbox is checked with the message in the console - Verify if selected: true.

Example - Chaining of Relative Locator

Let us take another example of the highlighted elements in the below page, where we would enter the text Selenium in the input box which is appearing above the label Email: and right of the label Name: with the help of the chaining locators above and toRightOf.

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element 
WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element the second element 
WebElement m = driver.findElement(By.xpath("value of xpath locator"));

// identify element by chaining relative locators
// identify element by chaining elements
WebElement e = driver.findElement(RelativeLocator.with
   (By.tagName("input")).above(l).toRightOf(m));

// enter some text
e.sendKeys("Selenium");

Code Implementation

package org.example;

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 java.util.concurrent.TimeUnit;

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

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='practiceForm']/div[1]/label"));

      // identify second element
      WebElement s = driver.findElement(By.xpath("//*[@id='practiceForm']/div[2]/label"));

      // identify element by chaining elements
      WebElement e = driver.findElement(RelativeLocator.with
         (By.tagName("input")).above(s).toRightOf(l));

      // input text
      e.sendKeys("Selenium");

      // verify is selected
      System.out.println("Value entered is: " + e.getAttribute("value"));

      // Closing browser
      driver.quit();
   }
}

Output

Value entered is: Selenium

In the above example, we had identified the element with the help of the chain of relative locators and obtained the text entered with the message in the console - Value entered is: Selenium.

Conclusion

This concludes our comprehensive take on the tutorial on Selenium WebDriver Relative Locators. Weve started with describing what are relative locators in Selenium, and examples to illustrate how to use relative locators in Selenium Webdriver. This equips you with in-depth knowledge of the Selenium WebDriver Relative Locators. It is wise to keep practicing what youve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.