Selenium 4 New features -Relative Locators with Practical Examples

Vasista TVN

·

Follow

6 min read

·

Dec 18, 2021

--

Listen

Share

Selenium is the most popularly used freeware and open source automation tool. The benefits of Selenium for Test Automation are immense. Importantly, it enables record and playback for testing web applications and can run multiple scripts across various browsers.

Recently selenium4 launched with new features.

1. Capture screenshot of specific web element
2. Open the new tab on the browser
3. Open a new window on the browser
4. Object Location
5. Relative Locators
6. Chrome Dev tools

In this blog will see about Relative Locators

Selenium 4 introduces Relative Locators (previously called as Friendly Locators). These locators are helpful when it is not easy to construct a locator for the desired element, but easy to describe spatially where the element is in relation to an element that does have an easily constructed locator.

Available relative locators

1. toRightOf()
2. toLeftOf()
3. below()
4. above()
5. near()

“We can observe in the above image all the methods are duplicated, it means that overloaded .each of the method can accept By type locater or else it can accept a web element “

1.toRightOf()

“Target web element which is presented to the right of a specified element”

Example: If a user wants to click on the ‘I’m Feeling Lucky’ button on the google home page.

If the ‘I’m Feeling Lucky’ button is not easily identifiable for some reason, but the ‘‘Google Search’’ button element is, we can locate the ‘‘Google Search’’ button element using the fact that it is an “input” element “to the right of” the Google Search element.

Code snippet:

Code Explanation:

1. Webdrivermanager is used, it will help to download browser binaries/executables in an automated way, we have used chrome driver to launch chrome browser
2. Launch the browser and navigate to -> https://www.google.com
3. Write XPath for the ‘Google Search’ button, which is the right of the ‘ I’m Feeling Lucky ‘button
4. Import RelativeLocator ‘withTagName’

“import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;”

5. Enter the tag name of the ‘ I’m Feeling Lucky ‘button, which is ‘input’, and pass the web element reference variable in the ‘toRightof() ‘method

With help of the above code able to click on the, ‘ I’m Feeling Lucky ‘button using the ‘toRightof ‘method

Code:import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebElement;import org.openqa.selenium.chrome.ChromeDriver;import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;import io.github.bonigarcia.wdm.WebDriverManager;public class RelativeLocaters {public static void main(String[] args) {WebDriverManager.chromedriver().setup();WebDriver driver = new ChromeDriver();driver.get("https://www.google.com/");WebElement ww=driver.findElement(By.xpath("//div[@class='FPdoLc lJ9FBc']//input[@name='btnK']"));driver.findElement(withTagName("input").toRightOf(ww)).click();}
}

1.toLeftOf()

Target web element which is present to the left of the specified element.

Example: If a user wants to click on the ‘Gmail’ link on the google home page.

If the ‘Gmail’ link is not easily identifiable for some reason, but the ‘‘ Images’’ link element is, we can locate the ‘‘Images’’ button element using the fact that it is an “a” element “to the left of” the Images element.

Code snippet:

Code Explanation:

1. Webdrivermanager is used, it will help to download browser binaries/executables in an automated way,we have used chrome driver to launch chrome browser
2. Launch the browser and navigate to -> https://www.google.com
3. Write XPath for the ‘Images’ link, which is the left of the ‘ Gmail‘ link
4. Import RelativeLocator ‘withTagName’

“import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;”

5. Enter the tag name of the ‘ Gmail ‘ link, which is ‘a’, and pass the web element reference variable in the ‘toLeftof() ‘method

With help of the above code able to click on the ‘ Gmail‘ link using the ‘toLeftof ‘method

Code:import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebElement;import org.openqa.selenium.chrome.ChromeDriver;import io.github.bonigarcia.wdm.WebDriverManager;public class RelativeLocatersLeftof {public static void main(String[] args) {WebDriverManager.chromedriver().setup();WebDriver driver = new ChromeDriver();driver.get("https://www.google.com/");try {Thread.sleep(5000);} catch (InterruptedException e) {// TODO Auto-generated catch blocke.printStackTrace();}
WebElement ww=driver.findElement(By.xpath("//a[contains(text(),'Images')]"));//Clicking on gmail  link  using "Images" linkdriver.findElement(withTagName("a").toLeftOf(ww)).click();}}

3.below()

Web element located below for the specified element.

Example: If a user wants to enter some text in the search bar on the google home page.

If the ‘search bar ’ XPath is not easily identifiable for some reason, but the ‘‘ google logo’’ XPath element is, we can locate the ‘‘google logo’’ element using the fact that it is an “input” element to the “ below” the google logo element.

Code Explanation:

1. Webdrivermanager is used, it will help to download browser binaries/executables in an automated way, we have used chrome driver to launch chrome browser
2. Launch the browser and navigate to -> https://www.google.com
3. Write XPath for the ‘google logo ’ , which is the below of ‘ search bar‘
4. Import RelativeLocator ‘withTagName’

“import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;”

5. Enter the tag name of the ‘ search bar‘ , which is ‘input’, and pass the web element reference variable in the ‘below ‘method

With help of the above code able to send text in the ‘search bar‘ using the ‘below() ‘method

Code:import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebElement;import org.openqa.selenium.chrome.ChromeDriver;import io.github.bonigarcia.wdm.WebDriverManager;public class RelativeLocatersBelow {public static void main(String[] args) {WebDriverManager.chromedriver().setup();WebDriver driver = new ChromeDriver();driver.get("https://www.google.com/");try {Thread.sleep(5000);} catch (InterruptedException e) {// TODO Auto-generated catch blocke.printStackTrace();}WebElement ww=driver.findElement(By.xpath("//img[@alt='Google']"));//Entering text using google image Xpathdriver.findElement(withTagName("input").below(ww)).sendKeys("super QA");}}

4.above()

Web element located above for the specified element.

Example: If a user wants to enter some text in the search bar on the google home page.

If the ‘search bar ’ XPath is not easily identifiable for some reason, but the ‘‘ Google search ’’ button XPath element is, we can locate the ‘‘Google search’’ element using the fact that it is an “input” element to the “ above” the google search element.

Code Explanation:

1. Webdrivermanager is used, it will help to download browser binaries/executables in an automated way, we have used chrome driver to launch chrome browser
2. Launch browser and navigate to -> https://www.google.com
3. Write XPath for the ‘google search , which is the above of ‘ search bar‘
4. Import RelativeLocator ‘withTagName’

“import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;”

5. Enter the tag name of the ‘ search bar‘, which is ‘input’, and pass the web element reference variable in the ‘above ‘method

With help of the above code able to send text in the, ‘search bar‘ using the ‘above() ‘method

Code:import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebElement;import org.openqa.selenium.chrome.ChromeDriver;import io.github.bonigarcia.wdm.WebDriverManager;public class RelativeLocatersAbove {public static void main(String[] args) {WebDriverManager.chromedriver().setup();WebDriver driver = new ChromeDriver();driver.get("https://www.google.com/");try {Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}WebElement ww=driver.findElement(By.xpath("//div[@class='FPdoLc lJ9FBc']//input[@name='btnK']"));//Entering text using Google Search buttondriver.findElement(withTagName("input").above(ww)).sendKeys("super QA");}}

To use above add the below dependency in your pom.xml

// Selenium 4-alpha 5

<dependency>

<groupId>org.seleniumhq.selenium</groupId>

<artifactId>selenium-java</artifactId>

<version>4.0.0-alpha-5</version>

</dependency>

// webdriver manager

<dependency>

<groupId>io.github.bonigarcia</groupId>

<artifactId>webdrivermanager</artifactId>

<version>4.4.3</version>

</dependency>

Reference: https://www.selenium.dev/documentation/webdriver/elements/locators/

Happy coding !!