Relative Locators – An Intriguing Selenium 4 Feature

Share

Introduction

In the web automation space, companies have been relying on Selenium for many years and majority of the automation engineers might have tried automation with Selenium, at some point in their career, either for project purpose or out of curiosity. The last major release and the currently popular version is Selenium 3, which was released in October 2013 and offered WebDriver and lot of improvements. Now the automation techies are eagerly waiting for Selenium 4 to explore the new features. Currently there are Alpha releases which are available for the public and for those who want to gain knowledge about the latest Selenium 4 change set. In this blog, you delve deeper and gain insights about one of the exciting features of Selenium 4 – Relative Locators.

Current Scenario

Let’s consider a scenario where you are using Selenium 3 and need to automate a user form. The approach would be to identify the element locators and then proceed with scripting. You must look for unique locators like Id, name, CSS or XPath. In few complicated scenarios, you would traverse through the DOM, analyze the element hierarchies and would even go for different XPath axes like following, preceding, parent, sibling etc. This means that you would visualize the DOM and then write relative XP0ath to get a hold of the required web element with the help of known reference element. There was no way in Selenium by which one could identify an element using visual clues. But that’s no longer the case with Selenium 4.

What is Relative Locator?

Selenium 4 has a solution for the above limitation – the use of Relative Locators. (Previously called ‘Friendly Locators’) Now Selenium 4 provides the users with an option to locate an element based on visual clues i.e. you can identify an element based on its GUI location, relative to the layout with other reference elements. The implementation of Relative Locators will definitely help you to speed up the script development.

Selenium 4 offers the below 5 functions for providing Relative Locators, which accepts either ‘By’ locator or a web element as argument. These methods need to be clubbed along with ‘withTagName’ method. Selenium internally make use of the JavaScript function getBoundingClientRect() to find the relative elements, which returns properties of an element such as top, bottom, left and right.

Practical Scenario & Explanation

Let’s take a real-world example and try to relate. For this practice scripting, you will need to automate the user form data entry in RapidValue website’s ‘Contact Us’ page using Relative Locators.

So, to start, you will find the stable locator for a web element which can be used as reference element. In this scenario, you will derive the locator for the above highlighted label “Please fill out this form and we will get in touch with you shortly.” Now that you have the reference element, let’s locate the other elements using their relative positions. Refer the above image and try to correlate the below derivation.

At this point, you have the relative locations which are easy to grasp. Let’s convert it to equivalent Selenium code. Please note that these locators are available only when paired with Tag name.

Additional Info:-

  1. If the specified Relative Locator is not valid, then “openqa.selenium.NoSuchElementException: Cannot locate an element using [unknown locator]” exception will be thrown.
  2. While using Relative Locators along with ‘withTagName‘ directly in the code, you need to import the Relative Locator as Static.
  3. Relative Locator might not work properly with overlapped elements (In GUI).
  4. Functionality or behavior is subject to change, since it’s still in the Alpha release stage.
  5. If you are using Maven project, you must include the below dependency in pom.xml:

If you are interested to explore, learn and be a Selenium 4 expert, then Selenium 4 Alpha releases are available @ Seleniumhq. You can either download the required jars or use in the project or you could go for a maven project and provide the dependencies in pom.xml.

As the saying goes – “Education without application is just entertainment”, don’t forget to check out the upcoming features, correlate it with your project requirements and go the extra mile with feature hands-on. Happy learning!!

By,

Renjith R. Nair, Test Lead

LEAVE A COMMENT

How can we help you?