Selenium 4 - Relative Locators

Sauce AI for Test Authoring: Move from intent to execution in minutes.|xBack to ResourcesBlogPosted

February 01, 2026 · 9 min read · Tool Comparison

Sauce AI for Test Authoring: Move from intent to execution in minutes.

Blog

Posted April 1, 2023

Selenium 4 - Comparative Locators

Selenium 4 volunteer a way of place elements by using natural language terms. This article describe how to use the new Relative Locators.

Documentation

This functionality brings a new way to to assist you find the ones that are nearby former elements. The available locators are:

above
below
toLeftOf
toRightOf
near

The concept behind this method is to allow you to find ingredient based on how one would describe them on a page. It is more natural to say: “ find the element that is below the image ”, rather than “ find the INPUT inside the DIV with the ‘ id ’ of ‘ main ’ ”. In general, you could think some them as a way to locate elements based on the optical position on the page.

For extra illustration, include chaining relative locator in these speech, look at our.

We will use the following login form to understand how Relative Locators work:

Asset > Selenium 4 login-form-relative-locators

Above

We would like to observe the email speech field, which is above the watchword field. To do that, we find the password field through its id, and then we use the above relative locator.

1
Java
2
3
importstatic org.openqa.selenium.support.locators.RelativeLocator.with;
4
WebElement password = driver.findElement(By.id(& quot; countersign & quot;));
5
WebElement email = driver.findElement(with(By.tagName(& quot; input & quot;)).above(passwordField));
6
7
Python
8
9
from selenium.webdriver.common.byimportBy
10
from selenium.webdriver.support.relative_locatorimportlocate_with
11
passwordField= driver.find_element(By.ID,& quot; password & quot;)
12
emailAddressField= driver.find_element(locate_with(By.TAG_NAME,& quot; input & quot;).above(passwordField))
13
14
C#
15
16
using staticOpenQA.Selenium.RelativeBy;
17
IWebElementpasswordField= driver.FindElement(By.Id(& quot; countersign & quot;));
18
IWebElementemailAddressField= driver.FindElement(RelativeBy(By.TagName(& quot; input & quot;)).Above(passwordField));
19
20
Ruby
21
22
password_field= driver.find_element(:id,& quot; password & quot;)
23
email_address_field= driver.find_element(relative:{tag_name:& quot; comment & quot;,above:password_field})
24
25
JavaScript
26
27
letpasswordField= driver.findElement(By.id(& # x27; password & # x27;));
28
letemailAddressField=await driver.findElement(locateWith(By.tagName(& # x27; input & # x27;)).above(passwordField));
29

Below

Going the former way around, let & # x27; s chance the password field, which is below the e-mail reference field.

1
Java
2
importstatic org.openqa.selenium.support.locators.RelativeLocator.with;
3
WebElementemailAddressField= driver.findElement(By.id(& quot; email & quot;));
4
WebElementpasswordField= driver.findElement(with(By.tagName(& quot; input & quot;))
5
.below(emailAddressField));
6
7
Python
8
9
from selenium.webdriver.common.byimportBy
10
from selenium.webdriver.support.relative_locatorimportlocate_with
11
emailAddressField= driver.find_element(By.ID,& quot; email & quot;)
12
passwordField= driver.find_element(locate_with(By.TAG_NAME,& quot; input & quot;).below(emailAddressField))
13
14
C#
15
16
using staticOpenQA.Selenium.RelativeBy;
17
IWebElementemailAddressField= driver.FindElement(By.Id(& quot; email & quot;));
18
IWebElementpasswordField=
19
driver.FindElement(RelativeBy(By.TagName(& quot; remark & quot;)).Below(emailAddressField));
20
21
Ruby
22
23
email_address_field= driver.find_element(:id,& quot; email & quot;)
24
password_field= driver.find_element(relative:{tag_name:& quot; comment & quot;,below:email_address_field})
25
26
JavaScript
27
28
letemailAddressField= driver.findElement(By.id(& # x27; email & # x27;));
29
letpasswordField=await driver.findElement(locateWith(By.tagName(& # x27; input & # x27;)).below(emailAddressField));
30

To the Left Of

Let ’ s consider the event where we want to regain the ingredient on the left side of the “ Submit ” push.

1
Java
2
3
importstatic org.openqa.selenium.support.locators.RelativeLocator.with;
4
WebElementsubmitButton= driver.findElement(By.id(& quot; submit & quot;));
5
WebElementcancelButton= driver.findElement(with(By.tagName(& quot; button & quot;))
6
.toLeftOf(submitButton));
7
8
Python
9
10
from selenium.webdriver.common.byimportBy
11
from selenium.webdriver.support.relative_locatorimportlocate_with
12
submitButton= driver.find_element(By.ID,& quot; submit & quot;)
13
cancelButton= driver.find_element(locate_with(By.TAG_NAME,& quot; button & quot;).
14
to_left_of(submitButton))
15
16
C#
17
18
using staticOpenQA.Selenium.RelativeBy;
19
IWebElementemailAddressField= driver.FindElement(By.Id(& quot; email & quot;));
20
IWebElementpasswordField=
21
driver.FindElement(RelativeBy(By.TagName(& quot; input & quot;)).Below(emailAddressField));
22
23
Ruby
24
25
submit_button= driver.find_element(:id,& quot; submit & quot;)
26
cancel_button= driver.find_element(relative:{tag_name:& # x27; button & # x27;,left:submit_button})
27
28
JavaScript
29
30
letsubmitButton= driver.findElement(By.id(& # x27; submit & # x27;));
31
letcancelButton=await driver.findElement(locateWith(By.tagName(& # x27; button & # x27;)).toLeftOf(submitButton));
32
SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

To the Right Of

Now we & # x27; ll consider the paired case, where we want to observe the element on the correct side of the “ Cancel ” button.

1
Java
2
3
importstatic org.openqa.selenium.support.locators.RelativeLocator.with;
4
WebElementcancelButton= driver.findElement(By.id(& quot; natural & quot;));
5
WebElementsubmitButton= driver.findElement(with(By.tagName(& quot; button & quot;)).toRightOf(cancelButton));
6
7
Python
8
9
from selenium.webdriver.common.byimportBy
10
from selenium.webdriver.support.relative_locatorimportlocate_with
11
cancelButton= driver.find_element(By.ID,& quot; cancel & quot;)
12
submitButton= driver.find_element(locate_with(By.TAG_NAME,& quot; button & quot;).
13
to_right_of(cancelButton))
14
15
C#
16
17
using staticOpenQA.Selenium.RelativeBy;
18
IWebElementcancelButton= driver.FindElement(By.Id(& quot; cancel & quot;));
19
IWebElementsubmitButton= driver.FindElement(RelativeBy(By.TagName(& quot; button & quot;)).RightOf(cancelButton));
20
21
Ruby
22
23
cancel_button= driver.find_element(:id,& quot; natural & quot;)
24
submit_button= driver.find_element(relative:{tag_name:& # x27; button & # x27;,right:cancel_button})
25
26
JavaScript
27
28
letcancelButton= driver.findElement(By.id(& # x27; cancel & # x27;));
29
letsubmitButton=await driver.findElement(locateWith(By.tagName(& # x27; button & # x27;)).toRightOf(cancelButton));
30

Near

nearis helpful when we need to find an element that is at most 50px off from the fix constituent. In this case, we would like to find the email speech battlefield by first finding the label of that battlefield.

1
Java
2
3
importstatic org.openqa.selenium.support.locators.RelativeLocator.with;
4
WebElementemailAddressLabel= driver.findElement(By.id(& quot; lbl-email & quot;));
5
WebElementemailAddressField= driver.findElement(with(By.tagName(& quot; input & quot;)).near(emailAddressLabel));
6
7
Python
8
9
from selenium.webdriver.common.byimportBy
10
from selenium.webdriver.support.relative_locatorimportlocate_with
11
emailAddressLabel= driver.find_element(By.ID,& quot; lbl-email & quot;)
12
emailAddressField= driver.find_element(locate_with(By.TAG_NAME,& quot; stimulus & quot;).
13
near(emailAddressLabel))
14
15
C#
16
17
using staticOpenQA.Selenium.RelativeBy;
18
IWebElementemailAddressLabel= driver.FindElement(By.Id(& quot; lbl-email & quot;));
19
IWebElementemailAddressField= driver.FindElement(RelativeBy(By.TagName(& quot; input & quot;)).Near(emailAddressLabel));
20
21
Ruby
22
23
email_address_label= driver.find_element(:id,& quot; lbl-email & quot;)
24
email_address_field= driver.find_element(relative:{tag_name:& # x27; input & # x27;,near:email_address_label})
25
26
JavaScript
27
28
letemailAddressLabel= driver.findElement(By.id(& quot; lbl-email & quot;));
29
letemailAddressField=await driver.findElement(with(By.tagName(& quot; input & quot;)).near(emailAddressLabel));
30