Mastering the Art of Relative Locators: Your Guide to Friendly Locators in Selenium 4

Introduction

Relative Locators in Selenium 4 are known as Friendly Locators.

In the context of Test Automation for web applications, one of our key responsibilities as automation testers is to identify and work with web elements. We're already familiar with the conventional Selenium locators which are described below.

In Selenium 4.0, a valuable addition to the locator toolbox is the 'Relative locator,' initially known as 'Friendly locator.' These locators empower us to pinpoint web elements by considering their position relative to other web elements. Selenium 4.0 introduces five new locators in this category.

1.Above()

To locate a web element just above the specified element.

2.Below()

To locate a web element just below the specified element.

3.toLeftOf()

To locate a web element present to the left of the specified element

4.toRightOf()

To locate a web element present to the right of the specified element

5.near()

To locate a web element at approx. 50 pixels away from a specified element. The distance can be passed as an argument to an overloaded method.

To use Relativelocators, first write this import statement,

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

Let's explore individual locators in detail, accompanied by examples. I have chosen a sample web application to demonstrate how to retrieve the web elements within the contact details form page.

Above()

I intend to ascertain the title located above the company field. To achieve this, I first locate the company field element using its ID locator, and subsequently, I employ the relative locator positioned above it.

Result:

Below()

To accomplish this task, I focused on the footer section, which contains numerous web element sections. My objective was to locate the element positioned below the text element labeled 'Sauce DevOps Test Toolchain'.

Result:

toLeftOf()

Let's contemplate the scenario where we search for the element situated to the left of the phone number field.

Result:

toRightOf()

Now, let's examine the scenario of locating the element situated to the right of the 'First Name' field.

Result:

near()

The 'near' locator proves advantageous when we require locating an element positioned within a proximity of up to 50 pixels from the specified element.Let's attempt to click on the 'Products' navigation bar link, which is in close proximity to the 'Solutions' link. To do this, I will initially locate the web element for the 'Solutions' link. Subsequently, I will utilize the 'near' locator to identify the closest elements. In this case, there are two elements in proximity to the 'Solutions' link, so I will further employ the 'toLeftOf()' locator for precision.

Result:

In Selenium 4, the with method is used as part of the new relative locators feature to specify additional conditions when locating web elements relative to other elements. The primary purpose of the with method is to make your code more expressive and readable .

The with method is used in combination with relative locators to further refine the conditions for locating an element relative to another element. It allows you to specify additional conditions that the target element should have. For e.g,

near(element).withTagName("input") is used to find an element that is near the specified element and also has the tag name "input."

If you want a case-insensitive approach, withTagName("span") is more flexible. If you specifically need a case-sensitive match, use with(By.tagName("span")).

I trust that this blog has provided you with an overview of the new relative (Friendly) locators, one of the many exciting features introduced in Selenium 4.

Thank you for reading!! Happy Learning !!