Relative Locators in Selenium

Selenium 4 introduces Relative Locators, which were earlier called Friendly Locators. This functionality brings a new way to locate elements to help you find the ones that are nearby other elements. Relative Locators are beneficial for unstable applications, elements with dynamic values, and elements without unique attribute values. 

To achieve this, Selenium uses the JavaScript getBoundingClientRect() method, which returns a DOM object providing information about the size of an element and its position relative to the viewport. This function returns properties of an element like left, right, top, and bottom.

Importing With Method

We use static method with method to indicate start of relative locator which you can import using the static import or using the class name.

1. Import with Class Name

Import Statement

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

Syntax

driver.findElement(RelativeLocator.with(""));

2. Static Import

 Import Statement

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

Syntax

driver.findElement(with(""));

Selenium 4 Relative Locators

Selenium 4 introduces 5 Relative Locators:

1. above()
2. below()
3. near()
4. leftof()
5. rightof()

Relative Locators Selenium Example

Demo Website: http://autopract.com/selenium/form2/

1. above()

Finds an element or elements located above a fixed element. Below code will fill in pincode above Course.

WebElement course = driver.findElement(By.cssSelector("select#course")); 
WebElement pincode = driver.findElement(with(By.tagName("input")).above(course));
pincode.sendKeys("122001");

2. below

Finds an element or elements located below a fixed element.  Below code will fill in Email ID below Course.

WebElement course = driver.findElement(By.cssSelector("select#course")); 
WebElement emailid = driver.findElement(with(By.tagName("input")).below(course));
emailid.sendKeys("hello@example.com");

3. near()

finds an element or elements located near a fixed element. It is to locate an element at most 50 pixels away from a specified element. You can give the distance of your choice in an overloaded method. Below code will fill in name text box associated with Name label.

WebElement nameLbl = driver.findElement(By.cssSelector("label[for='name']"));
WebElement nameTxt = driver.findElement(with(By.tagName("input")).near(nameLbl))
nameTxt.sendKeys("Tarun");

4. toLeftOf()

finds an element or elements located to the left of a fixed element. Below code will click on Submit Button which is right of Reset All button.

WebElement resetBtn = driver.findElement(By.cssSelector("input#reset"));
WebElement submit = driver.findElement(with(By.tagName("input")).toRightOf(resetBtn));
submit.click();

5. toRightOf()

finds an element or elements located to the right of a fixed element. Below code will click on Reset All button which is in left of Submit button.

WebElement submitBtn = driver.findElement(By.cssSelector("input#submit"));
WebElement resetAllBtn = driver.findElement(with(By.tagName("input")).toLeftOf(submitBtn));
resetAllBtn.click();

Chaining Relative Locators

You can also chain relative locators if needed and use a combination of them to locate an element. 

By submitLocator = RelativeLocator.with(By.tagName("button")).below(By.id("email")).toRightOf(By.id("cancel"));