Relative Locators

In previous tutorial, we have discussed about the documentation modification in Selenium 4. Selenium 4 equipped with W3C standard. In this section we will discuss about the Relative locators in Selenium 4.

Before going deep into Relative locators in Selenium 4, lets have a short look on what is locators.

Location Strategy

“Location Strategy” is the appropriate answer for this. From the name you can guess that this is a strategy to locate the element of the web page.

Do you know what are the elements of the web page?

Yes. You are correct. Elements of the web page are the wrappers and display templates. Following are some example of Elements of web page.

  • Components
  • Wrappers
  • Display Templates
  • Page Body
  • CSS
  • XSLT etc.

Now a days, Selenium is widely used as web automation tool which has lots of advantages like it is Open Source with many more advanced features to handle the web element So it provides a awesome user experience while execute.

Locating elements is the heart of the selenium automation tool. You can locate an element of the web page by a several method like

  • ID
  • Name
  • Link Text
  • Partial Link Text
  • Tag Name
  • Class Name
  • CSSSelector
  • XPath
  • DOM

Now you are clear about the location strategy. Let’s discuss on the advance location strategy which is known as Relative Locators.

This is the advance way of locating strategy of web element. Through Relative locators, we can locate specific Web Element by using easy terms like below.

  • toLeftOf
  • toRightOf
  • above
  • below
  • Near
Relative Locators

In Selenium 3, there were no specific method to locate the web element which are relative to the near by element. It will be easy for automation tester to work Selenium with the help of Relative locators. These Relative locators can be known as Friendly locators in other words. This enables user / tester to user “near”, “To left of”, “To right of”, “above”, “below”. It also supports the usages with the “TagName” in case of Selenium Java and “tag_name”  in case of Selenium Python.

List of Locators: 

Now we are clear about what are the relative locators are introduced in Selenium 4.  Let’s discuss on each locators in deeply.

above(): This will point to the required WebElement which is “above” to the specific / particular element.

below(): This will point to the required WebElement which is “below” to the specific / particular element.

toLeftOf(): This will point to the required WebElement which is “To the left of ”  the specific / particular element.

toRightOf(): This will point to the required WebElement which is “To the right of ” the specific / particular element.

near(): This will point to the required WebElement which is “most 50px away” from the specific / particular element.

As you know we all are writing the automation script and spending more times on maintaining the locators across the build.

Have you ever thought of traversing the web element thorough direction like left, right etc. There are some tools like Sahi, Taiko in which by using direction you can traverse the near by WebElement. But this was difficult in selenium 3 by using complex XPath and CSSSelector.  Selenium 4 provides the solution for this problem by introducing relative locators.

In Selenium 4, a new method introduced which is called as with(By.tagName()). This returns the instance of “RelativeLocators.RelativeBy” class. This is a child class of By. It offers methods by which we can traverse by direction of element by using the specific direction.

Let’s create a sample test case by using Relative Locators.

Example:

You need to follow certain step to work with the relative locators. You need RelativeLocator  class to work with Relative locators strategy.  

Step – 1 :

You need to import RelativeLocators to work with Relative locator strategy.

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

Step -2 :

You need to use with method name to search tag name based on the relative locators either by above or below etc.

WebElement email = driver.findElement(with(By.tagName("input")).above(password));

Let’s use above locators strategy and see how it is working. You can use “https://phptravels.org/index.php?rp=/login” url to validate the use of relative locators.

locators strategy Demo site

Here you can see the login form. In this login form, you have a Email address field in which you need to type Email address and Password field in which you need to fill Password to login.

Above :

This will point to the required WebElement which is “above” to the specific / particular element..

Let’s have a look on below example for above relative locators.

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import static org.openqa.selenium.support.locators.RelativeLocator.with;

import org.openqa.selenium.By;

public class RelativeLocators {

    public static void main(String[] args) {
		  System.setProperty("webdriver.chrome.driver", "chromedriver.exe");  
		  WebDriver driver = new ChromeDriver();
		 
		  driver.get("https://phptravels.org/index.php?rp=/login");
		  WebElement password = driver.findElement(By.id("inputPassword"));
		  WebElement email = driver.findElement(with(By.tagName("input")).above(password));
		  
		  password.sendKeys("Welcome");
		  email.sendKeys("Testinglpoint@gmail.com");

	}

}

Explanation :

In this example, you can see we have used with() method and searching for Email by using the above keyword. Here as we see user name field is above of the password field. So we can give password webelement to the above () as parameter as below.

driver.findElement(with(By.tagName("input")).above(password));

Below ():

This will point to the required WebElement which is “below” to the specific / particular element..

Same like above, we can use below relative locator.

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator.*;
import static org.openqa.selenium.support.locators.RelativeLocator.with;

import org.openqa.selenium.By;

public class RelativeLocators {

	public static void main(String[] args) {
		  System.setProperty("webdriver.chrome.driver", "chromedriver.exe");  
		  WebDriver driver = new ChromeDriver();
		 
		  driver.get("https://phptravels.org/index.php?rp=/login");
		  WebElement email = driver.findElement(By.id("inputEmail"));
		  WebElement password = driver.findElement(with(By.tagName("input")).below(email));
		  email.sendKeys("Testinglpoint@gmail.com");
		  password.sendKeys("Welcome");
		 }
}

Explanation :

In this example, you can see we have used with() method and searching for password field by using the below relative keyword. Here as we see password  field is below to the email field. So we can give email webelement to the below() method as parameter.

WebElement password = driver.findElement(with(By.tagName("input")).below(email)); 

toLeftOf():

This will point to the required WebElement which is “To the left of ”  the specific / particular element.

Let’s have a look on toLeftOf() with a simple example.

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator.*;
import static org.openqa.selenium.support.locators.RelativeLocator.with;

import org.openqa.selenium.By;

public class RelativeLocators {

	public static void main(String[] args) {
		  System.setProperty("webdriver.chrome.driver", "chromedriver.exe");  
		  WebDriver driver = new ChromeDriver();
		 
		  driver.get("https://phptravels.org/index.php?rp=/login");
		  WebElement knowledgebase = driver.findElement(By.id("Primary_Navbar-Knowledgebase"));
		  WebElement Announcement = driver.findElement(with(By.tagName("li")).toLeftOf(knowledgebase));
		  Announcement.click();
        }
}

Explanation :

In this example, you can see we have used with() method and searching for Announcement menu by using the toLeftOf relative keyword. Here as we see Announcement menu item is left of the the knowledgebase menu item. So we can give knowledgebase webelement to the toLeftOf() method as parameter.

toRightOf():

This will point to the required WebElement which is “To the right of ” the specific / particular element.

Let’s have a look on toRightOf() with a simple example.

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator.*;
import static org.openqa.selenium.support.locators.RelativeLocator.with;

import org.openqa.selenium.By;

public class RelativeLocators {

	public static void main(String[] args) {
		  System.setProperty("webdriver.chrome.driver", "chromedriver.exe");  
		  WebDriver driver = new ChromeDriver();
		 
		  driver.get("https://phptravels.org/index.php?rp=/login");
		  WebElement knowledgebase = driver.findElement(By.id("Primary_Navbar-Knowledgebase"));
		  WebElement networkStatus= driver.findElement(with(By.tagName("li")).toRightOf(knowledgebase));
		  Announcement.click();
		 

	}

}

Explanation :

In this example, you can see we have used with() method and searching for networkStatus menu by using the toRightOf relative keyword. Here as we see networkStatus menu item is right of the the knowledgebase menu item. So we can give knowledgebase webelement to the toRightOf() method as parameter.

near():

This will point to the required WebElement which is “most 50px away” from the specific / particular element.

  WebElement Announcement = driver.findElement(with(By.tagName("li")).near(knowledgebase));

Leave a Reply

Your email address will not be published. Required fields are marked *