Overview
Selenium relative locators are a new feature in Selenium 4 that allows you to locate elements based on their position relative to other elements on the page.
There are five relative locators available:
| Type | Function |
|---|---|
| above(WebElement element) | Locates an element that is directly above the specified element. Parameter: WebElement |
| above(By locator) | Locates an element that is directly above the specified element. Parameter: By |
| below(WebElement element) | Locates an element that is directly below the specified element. Parameter: WebElement |
| below(By locator) | Locates an element that is directly below the specified element. Parameter: By |
| toLeftOf(WebElement element) | Locates an element that is directly to the left of the specified element. Parameter: WebElement |
| toLeftOf(By locator) | Locates an element that is directly to the left of the specified element. Parameter: By |
| toRightOf(WebElement element) | Locates an element that is directly to the right of the specified element. Parameter: WebElement |
| toRightOf(By locator) | Locates an element that is directly to the right of the specified element. Parameter: By |
| near(WebElement element) | Locates an element that is within a specified distance of the specified web element. Parameter: WebElement |
| near(By locator) | Locates an element that is within a specified distance of the specified web element. Parameter: By |
| near(WebElement element, int atMostDistanceInPixels) | Locates an element that is within a specified distance of the specified web element. Parameter: WebElement and at most distance in Pixels in int |
| near(By locator, int atMostDistanceInPixels) | Locates an element that is within a specified distance of the specified web element. Parameter: By and at most distance in Pixels in int |
Selenium Interview Questions 2023
above()
If the search text field element is not easily identifiable for some reason, but the aria-label text element is, we can locate the text field element using the fact that it is an “input” element “above” the aria-label text.
By searchField = with(By.tagName("input")).above(By.cssSelector("input[aria-label='Google Search']"));
driver.findElement(searchField).sendKeys("Hello");below()
If the search text field element is not easily identifiable for some reason, but the aria-label text element is, we can locate the text field element using the fact that it is an “input” element “below” the aria-label text.
By searchField = with(By.tagName("input")).below(By.cssSelector("div[aria-label='Google Search']"));
driver.findElement(searchField).sendKeys("Hello");toLeftOf()
If the login button is not easily identifiable for some reason, but the Forgot Password button element is.
We can locate the login button element using the fact that it is a “button” element to the “left of” the Forgot Password element.
By cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("forgotPassword "));toRightOf()
If the Forgot Password is not easily identifiable for some reason, but the Login button element is, we can locate the Forgot Password button element using the fact that it is a “button” element to the “left of” the Login element.
By cancelLocator = RelativeLocator.with(By.tagName("button")).toRightOf(By.id("cancelBtn "));near()
If the relative positioning is not obvious, or it varies based on window size, you can use the near method to identify an element that is at most 50px away from the provided locator.
One great use case for this is to work with a form element that doesn’t have an easily constructed locator, but its associated input label element does.
By emailLocator = RelativeLocator.with(By.tagName("input")).near(By.id("lbl-email"));How to Chain Relative Locators in Selenium?
We can chain multiple relative together as mentioned below:
By submitLocator = RelativeLocator.with(By.tagName("input")).below(By.id("login")).toRightOf(By.id("forgotPassword"));Conclusion
I hope you guys like this article on relative locators in Selenium. Please feel free to post your queries.