Selenium Relative Locators

Table of content

Selenium Relative Locators
Working of relative locators in selenium
Disadvantages of Relative locators

Selenium Relative Locators

Relative locators do now work based on the visual of the web application. Selenium developers have introduced the Relative locator concept in selenium from version v4.0.0-alpha-3.

Selenium relative locator finds the required element based on some target/specified element which we are confident that the target element will not change the position of the locator (internally HTML).

Relative locator finds one element relative to another element

The RelativeLocator class is present in the org.openqa.selenium.support.locators package and we will be using a static method called withTagName to handle relative locators;

withTagName() method accepts a tagname of the required element (the one we want to find). other relative locators are used to find the permanent element so that based on this permanent element we can find the required element.

Yes, withTagName() accept only the tagname locator; nothing else

The basic syntax for the relative locators

driver.findElement(RelativeLocator.withTagName("required element")
				.relativeLocator(By.tagName("target/permanent element"))).sendKeys("hello");

Actual example for relative locators in selenium

driver.findElement(RelativeLocator.withTagName("input")
				.toLeftOf(By.tagName("button"))).sendKeys("hello");

Before going to the actual topic let me ask questions (which makes me hesitant to use relative locator), answers will be present in later of this article

Who decides what is on top or bottom?
Do these locators work based on what the user sees rather than actual code?

List of relative locators in latest Selenium:

Selenium Relative locators are overloaded to accept By class or WebElement

toLeftOf() : finds the element located to the left of the target element.
toRightOf() : finds the element located to the right of the target element.
above() : finds the element located above with respect to the target element.
below() : finds the element located below with respect to the target element.
near() : finds the element is at most 50 pixels far away from the target element. The pixel value can be modified.

Normalize space XPath in Selenium

Working of relative locators in selenium

above():

The above() method finds the required element based on the target/permanent element, for example, consider the below webpage where the "Sample target" button is the permanent element and we will use this element to find other elements.

Now guess which textbox is the above textbox relative to the target button?

Well, textbox 1 is the above textbox.

If I use the above() locator, then selenium finds textbox 1 and sets the text box.

import org.openqa.selenium.support.locators.RelativeLocator;
public class Selenium4RelativeLocators {
	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver", "C:PATHchromedriver.exe");
		WebDriver driver = new ChromeDriver();
		driver.get("https://chercher.tech/practice/relative-locators");
		driver.findElement(RelativeLocator.withTagName("input")
				.above(By.tagName("button"))).sendKeys("hello");
	}
}

The output of the program

toRightOf():

toRightOf() locator finds the required element which is present on the right side of the target element.

public class Selenium4RelativeLocators {
	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver", "C:PATHchromedriver.exe");
		WebDriver driver = new ChromeDriver();
		driver.get("https://chercher.tech/practice/relative-locators");
		driver.findElement(RelativeLocator.withTagName("input")
				.toRightOf(By.tagName("button"))).sendKeys("hello");
	}
}

Program gets confused in below

Now we have discussed of above and right side relative locators let's discuss on left side locator.

In the above image, guess which element is present left side of the "sample target" button?

As per me, textbox 2 is the left side element.

import org.openqa.selenium.support.locators.RelativeLocator;
public class Selenium4RelativeLocators {
	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver", "C:UsersPATHchromedriver.exe");
		WebDriver driver = new ChromeDriver();
		driver.get("https://chercher.tech/practice/relative-locators");
		driver.findElement(RelativeLocator.withTagName("input")
				.toLeftOf(By.tagName("button"))).sendKeys("hello");
	}
}

In the above code, we have used toLeftOf() locator but selenium finds the top element rather than the left side element.

I do not know the answer to how it worked like above.

below() relative locator:

below() locator finds the required element present below the target element.

import org.openqa.selenium.support.locators.RelativeLocator;
public class Selenium4RelativeLocators {
	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver", "C:PATHchromedriver.exe");
		WebDriver driver = new ChromeDriver();
		driver.get("https://chercher.tech/practice/relative-locators");
		driver.findElement(RelativeLocator.withTagName("input")
				.below(By.tagName("button"))).sendKeys("hello");
	}
}

Answers to the questions that I asked at the top?

Who decides what is on top or bottom?

Selenium decides the position of the element based on the HTML line present in the source code, irrespective of CSS Values.

Does CSS value have the capability to change the places of the elements on HTML?

Yes, they do; the above example is a witness for it.

Do these locators work based on what the user sees rather than actual code?

Selenium does not care where the element is present for the user viewing, selenium purely works based on the assumption that the developer does not influence the element position using the CSS values.

Actual code for the above practice page.

Dropdowns in Selenium

Disadvantages of Relative locators

withTagName() accepts only the tagname, so if there are duplicates then it can create confusion as we saw on the toLeftOf() locator.
We can use the dependent/independent concept in XPath to handle the same scenario.
Relative locators do not guarantee that they will find only the right element.
There is no way to know the actual element that selenium gonna find before the execution
Relative XPath is constructed in a way it depends on the Permanent element what if the locator of the permanent element changes

Architecture of Selenium Webdriver

Selenium Relative Locators