Different Types of Locators in Selenium WebDriver

Identify WebElements Using Locators in Selenium WebDriver

Now that you know the essentials of Selenium locators (including the additions in Selenium 4) let me deep-dive into each locator in Selenium WebDriver in more detail.

ID Locator in Selenium

ID locator in Selenium is the most preferred and fastest way to locate desired WebElements on the page. ID locators are unique for each element in the DOM.

Since IDs are unique for each element on the page, it is considered the fastest and safest method to locate elements. Unfortunately, developers may or may not follow this rule as browsers do allow bypassing this rule.

Specifically, in the case of a table or list, the IDs may populate incrementally or dynamically depending on the data in the table. In such cases, testers use other locators in Selenium WebDriver to locate the desired element on the page.

One of the Selenium best practices is to leverage the capabilities offered by the ID locator in Selenium since it is the fastest locator of the entire lot. Therefore, choosing the ID locator over other locators in Selenium WebDriver will go a long way to speed up Selenium test case execution.

Below is an example of the TestMu AI eCommerce Playground showcasing how the E-Mail Address field can be located using the id locator:

I have used the Chrome Developer Tools menu to locate the WebElement using the id locator. Below is the DOM structure of the element:

<input type="text" name="email" value="" placeholder="E-Mail Address" id="input-email" class="form-control">

The below method is used for locating the desired element using the id locator:

driver.findElement(By.id("input-email"))

If no DOM element matches the required id, NoSuchElementException is thrown. Therefore, it is important to have a good know-how of the common exceptions in Selenium to build a more robust Selenium test suite.

Name Locator in Selenium

An element can be defined via multiple attributes, one such attribute is Name. A Name locator in Selenium WebDriver can also locate elements like an ID locator.

Unlike ID locators, which are unique for a page, the Name locator may or may not have a unique value. If there are WebElements with the same name, the locator selects the first element with that Name on the page.

In case no such name matches with the defined attribute value, NoSuchElementException is raised.

To demonstrate the usage of the Name locator in Selenium WebDriver, we will identify the same E-Mail Address fields that were located using the ID locator.

<input type="text" name="email" value="" placeholder="E-Mail Address" id="input-email" class="form-control">

Here is how the desired WebElement can be located using the name locator in Selenium:

driver.findElement(By.name("email"));

LinkText Locator in Selenium

Elements can be located by LinkText, which is present in the hyperlinks. For example, the first link would be selected in a scenario with multiple links of the same text.

However, this identifier strategy can only be used for elements with an anchor( < a > ) tag.

Below is an example of the TestMu AI Selenium Playground website showcasing the selection of the Ajax Form Submit link that is available on the home page. The DOM below shows the highlighted element:

Below is the DOM structure of the same:

<a href="https://www.lambdatest.com/selenium-playground/ajax-form-submit-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Ajax Form Submit</a>

Here is how the desired WebElement was located using the linkText locator in Selenium:

driver.findElement(By.linkText("Ajax Form Submit"));

Partial LinkText Locator in Selenium

There is a provision to locate a WebElement using Partial LinkText akin to the normal LinkText locator in Selenium. Locating WebElements using Partial LinkText is preferred when the link text is too long.

Here, the partial text helps identify and use a unique element to perform further actions on it. Sometimes, this can also be locating multiple links on a page with a common partial text.

Below is a snapshot of the TestMu AI DOM highlighting the element with the link name as Auto Healing. Instead of using the complete link text, I used the partial link text locator to locate the element using the Healing link text.

Here is the DOM structure of the element:

<href="https://www.lambdatest.com/selenium-playground/auto-healing" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Auto Healing</a>

Here is how the desired WebElement was located using the partialLinkText locator in Selenium:

The syntax for locating elements by partialLinkText is:

driver.findElement(By.partialLinkText ("Healing"));

For more information on Link Text and Partial LinkText locators, we recommend you check this article to find elements with linkText and partialLinkText in Selenium.

TagName Locator in Selenium

As the name specifies, this CSS locator in Selenium WebDriver is used to identify elements using tag names like div, table, h1, etc.

The TagName locator in Selenium is commonly used to identify all the links on a page and identify broken links in Selenium. It is also used to get the header or the title of the web pages.

Here is the syntax for locating all the links on the TestMu AI Selenium Playground homepage. Notice here that the findElements method is used. It will return a list of all the WebElements with the tagName ”a” that normally holds the links:

driver.findElements(By.tagName("a"));

Watch this video to learn the Actions class in Selenium and how to use it.

ClassName Locator in Selenium

ClassName locator is used for locating WebElements defined using the class attribute. Below is the DOM snapshot of the Ajax Form Submit page that is available on the TestMu AI Selenium Playground website.

For locating the WebElement of the Submit button via the className locator in Selenium, we use the class attribute in the following DOM structure:

<input type="button" class="btn btn-dark selenium_btn bg-black text-white hover:bg-lambda-900 py-5 px-10 rounded" name="btn-submit" id="btn-submit" value="submit">

Here is how the desired WebElement was located using the className locator in Selenium:

driver.findElement(By.className("btn-dark"));

XPath Locator in Selenium

XPath locator in Selenium helps locate elements on the web page using XML expressions. The basic syntax used for using XPath as a CSS locator in Selenium WebDriver is shown below:

XPath: //tagName[@attribute = 'value']

Here, tagName in Selenium signifies the tag in the DOM structure you are targeting to locate the desired WebElement. tagName can be an input tag, anchor tag, etc.

Attributes are defined via the prefix @ and their corresponding value. Thus, attributes like name, id, class, etc., can be used along with tagName.

XPath in Selenium can be used in multiple ways, as shown below:

• Standard XPath: As the name indicates, this is the most basic (or standard) way of writing an XPath. To demonstrate the usage of a standard XPath locator in Selenium, let’s locate the WebElement of the E-Mail Address field on the TestMu AI eCommerce Playground website.

Below is the DOM structure of the element:

<input type="text" name="email" value="" placeholder="E-Mail Address" id="input-email" class="form-control">

The standard XPath of the desired WebElement is //input[@name= ’email’]. Here is how the XPath is used with the findElement() method to locate the element.

driver.findElement(By.xpath("//*[@id="input-email"]"));

• XPath Contains: XPath similarly contains works like CSS Selector contains. It is extensively used on WebElements, whose value changes dynamically. Consider an example where the value of the login changes after appending the login text.

  Here, XPath contains will be super-helpful in locating the desired WebElement.

  Syntax:

//tagname[contains(@attribute, 'partial value of attribute')]

Below is the DOM structure of the element:

<input type="text" placeholder="Full Name*" name="name" value="" class="form-control sign-up-input-2 ">

Here is how the desired WebElement was located using the XPath contains locator in Selenium:

driver.findElement(By.xpath("//input[contains(@class, 'form-control')]"))

XPath Using AND and OR

The AND, and OR operators in the XPath selector in Selenium are used when locating a WebElement based on certain condition sets. In the case of AND, both conditions should be true. On the other hand, either of the two conditions can be true for OR in operator XPath.

Syntax of OR operator in XPath:

//input[@id='login_1' OR @name='login']

Syntax of AND operator in XPath:

//input[@id='login_1' AND @name='login']

Let’s locate the email address field’s element on the TestMu AI eCommerce Playground Account Login page using the AND and OR operators.

Below is the DOM structure of the element:

<input type="text" name="email" value="" placeholder="E-Mail Address" id="input-email" class="form-control">

Here is how we used the OR operator with the XPath locator in Selenium:

driver.findElement(By.xpath("//input[@id="input-email" or @name="email"]"));

Here is how we used the AND operator with the XPath locator in Selenium:

driver.findElement(By.xpath(""//input[@id="input-email" AND @name="email"]"));

starts-with() Method in XPath

The starts-with() method in XPath offers functionalities similar to the CSS Selector in Selenium. It helps in locating elements that start with a specified attribute value. The starts-with() method in XPath is majorly used for locating WebElements whose value changes on the refresh of a page.

Syntax:

//tagname[starts-with(@attribute,'starting name of the attribute value')]

Shown below is the DOM structure for locating the Password field on the TestMu AI eCommerce Playground website’s Account Login page:

Below is the DOM structure of the element:

<input type="password" name="password" value="" placeholder="Password" id="input-password" class="form-control">

Here is how we locate the Password element using the starts-with() method with xpath in Selenium:

driver.findElement(By.xpath("//input[starts-with(@name,'pass')]"));

XPath Text

Text in the XPath locator in Selenium helps locate WebElements via XPath using exact text match. It can be used when elements have to be located by looking into the tags containing certain text.

Syntax:

//div[text()='Logged In']

To demonstrate XPath text usage, we will locate the Submit button on the Auto Healing page on the TestMu AI Selenium Playground website.

Here is the DOM structure of the required WebElement:

<button type="submit" class="bg-black hover:bg-transparent hover:text-black border border-black text-white rounded focus:outline-none selenium_btn py-5 px-10 rounded mt-20 w-120">Submit&lt;/button>

Here is how we locate the Submit button element using the xpath text:

driver.findElement(By.xpath("//button[text()='Submit']"));

Both CSS Selector and XPath are helpful when running complex Selenium test automation scenarios. The choice between XPath and CSS Selector purely depends on the scenario complexity and your convenience in locating WebElements using the corresponding locator.

When choosing, always look into the maintainability aspects of the locators, as that can make your job easier!

CSS Selector Locator in Selenium

CSS (Cascading Style Sheets) is used to style web pages. At the same time, CSS is also one of the widely-used ways to locate WebElements in the DOM.

The CSS Selector in Selenium should be chosen if you cannot locate an element using ID or Name locators. It can be chosen over the XPath locator.

Since multiple debates go around the corner for both of them, their usage may depend on the complexity of the scenario. However, most people prefer using CSS Selectors since those are faster than XPath.

Here are the different ways in which QA engineers can make use of CSS Selectors in Selenium:

Tag and ID in CSS Selector

To locate elements by Tag and ID, you have to use the following components:

• HTML tag: It provides the tag we wish to locate (e.g., input tag).
• #: It is used to represent the ID attribute. Remember that when you wish to locate an element via ID through a CSS Selector, it must have a hash sign on the same. For other attributes, we need not use the hash sign.
• Value of the ID attribute: This represents the ID value we use to locate the element.

Syntax:

css=(Html tag )(#) (value of the ID attribute)

Example:

Below is the DOM part indicating the First Name field on the Register Account page of the TestMu AI eCommerce Playground website.

<input type="text" name="firstname" value="" placeholder="First Name" id="input-firstname" class="form-control">

Here is how you can locate the required WebElement using the cssSelector:

driver.findElement(By.cssSelector("input#input-firstname"))

Tag and Class in CSS Selector

Apart from the syntax (or format) difference, the tag and class locator are identical to the ID locator. A dot (.) is used when denoting the class attribute value rather than hash (#) in the case of class.

Syntax:

css=(HTML tag)(.)(Value of Class attribute)

Example:

Here is the DOM snapshot and the corresponding command to access the required WebElement using CSS Selector in Selenium for the Login button on the Account Login page of the TestMu AI eCommerce Playground website.

<input type="submit" value="Login" class="btn btn-primary">

Tag and Attribute

The element can be located via tag name, and the corresponding attribute is defined using its value. The first one will be selected if multiple elements have the same tag and attribute.

Syntax:

css=(HTML Page)[Attribute=Value]

Example:

Here is the DOM structure:

<input type="phone" placeholder="Phone*" name="phone" value="" class="form-control sign-up-input-2 ">

Here is how the WebElement – ‘phone’ can be located using the cssSelector in Selenium.

driver.findElement(By.cssSelector("input[name="phone"]"))

Tag, Class, and Attribute

This locator is used with the class name and other attribute values.

Syntax:

css=(HTML tag>)(. )(Class attribute value)([attribute=Value of attribute])

Let’s locate the Submit button on the Input Form Demo page on the TestMu AI Selenium Playground website.

Here is the DOM structure of the WebElement for the Submit button.

<button type="submit" class="bg-lambda-900 hover:bg-transparent hover:text-lambda-900 border border-lambda-900 text-white rounded p-10 focus:outline-none w-180 selenium_btn py-5 px-10 rounded">Submit</button>

Here is how you can locate the Submit button:

driver.findElement(By.cssSelector("button.bg-lambda-900[type="submit"]"));

This combination can also be implied on ID. The only difference is to use a hash (#) rather than a dot (.) when using an ID attribute and defining its ID value in place of the Class value.

Wild (*, ^ and $) in CSS for Classes

CSS Selector in Selenium helps in matching multiple strings through the use of multiple patterns like ^, $, *. Wildcard selectors in CSS are used to select various elements simultaneously.

Here is how wild cards can be effectively used with the CSS Selector in Selenium:

• Starts-With in CSS Selector
  The starts-with helps locate elements when we try to match elements with a string that starts with a designated value.

Syntax:

css=(HTML tag)([attribute^=start of the string])

Example:

Here is the DOM structure for locating the WebElement:

<input type="email" name="email" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt-3 form-control-lg">

Here is how the CSS [attribute^=value] Selector is used for locating the desired WebElement:

driver.findElement(By.cssSelector("input[name^='em']"));

• Ends-With in CSS Selector
  This helps locate elements when we try to match elements with a string that ends with a designated value.

Syntax:

css=(HTML tag)([attribute$=end of the string])

Example:

Here is the DOM structure of the element:

<input type="email" name="email" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt-3 form-control-lg">

</li>
</ul>

Here is how ends-with in CSS Selector is used for locating the required WebElement:

driver.findElement(By.cssSelector("input[name$='ail']"));

• Contains in CSS Selector
  This helps locate elements when we try to match elements with a string containing a designated value.

Syntax:

css=(HTML tag)([attribute*=partial string])

Example:

Here is the DOM structure to locate the element:

<input type="email" name="email" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt-3 form-control-lg">

Here is how contains in CSS Selector is used for locating the required WebElement:

driver.findElement(By.cssSelector("input[class*='control']"));

Child Elements in CSS Selector

With the use of child elements, we can locate elements inside other elements. Child elements in CSS Selector are particularly useful when accessing data from a table, list of details, and more.

Example:

To demonstrate the use of child elements in CSS Selector, we will locate the menu links on the TestMu AI Selenium Playground home page.

Here is the DOM structure to locate the element:

<ul class="list-disc pl-10 pb-30 grid grid-cols-4 w-full gap-10 mt-30 smtablet:grid-cols-1"><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/ajax-form-submit-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Ajax Form Submit</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/auto-healing" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Auto Healing</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/bootstrap-alert-messages-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Bootstrap Alerts</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/bootstrap-date-picker-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Bootstrap Date Picker</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/bootstrap-dual-list-box-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Bootstrap List Box</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/bootstrap-modal-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Bootstrap Modals</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/bootstrap-download-progress-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Bootstrap Progress bar</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/broken-image" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Broken Image</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/checkbox-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Checkbox Demo</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/context-menu" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed"> Context Menu</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/data-list-filter-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Data List Filter</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/download-file-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Download File Demo</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/drag-drop-range-sliders-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Drag &amp; Drop Sliders</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/drag-and-drop-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Drag and Drop</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/dynamic-data-loading-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Dynamic Data Loading</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/generate-file-to-download-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">File Download</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/geolocation-testing" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Geolocation Testing</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/hover-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Hover Demo</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/iframe-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">iFrame Demo</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/input-form-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Input Form Submit</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/javascript-alert-box-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Javascript Alerts</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/jquery-date-picker-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">JQuery Date Picker</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/jquery-download-progress-bar-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">JQuery Download Progress bars</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/jquery-dual-list-box-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">JQuery List Box</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/jquery-dropdown-search-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">JQuery Select dropdown</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/key-press" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Key Press</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/nested-frames" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Nested Frames</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/overlapped-element" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed"> Overlapped Element</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/bootstrap-progress-bar-dialog-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Progress Bar Modal</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/radiobutton-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Radio Buttons Demo</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/redirection" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed"> Redirection</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/select-dropdown-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Select Dropdown List</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/shadow-dom" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed"> Shadow DOM</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/simple-form-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Simple Form Demo</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/status-code" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed"> Status Codes</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/table-data-download-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Table Data Download</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/table-search-filter-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Table Data Search</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/table-records-filter-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Table Filter</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/table-pagination-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Table Pagination</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/table-sort-search-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Table Sort &amp; Search</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/upload-file-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Upload File Demo</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/virtual-dom" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed"> Virtual DOM</a></li><li class="pt-10"><a href="https://www.lambdatest.com/selenium-playground/window-popup-modal-demo" class="text-black text-size-14 hover:text-lambda-900 leading-relaxed">Window Popup Modal</a></li></ul>

To locate elements, the following syntax would be used:

Css= tagname.class name li:nth-of-child(index of the referenced child which in our case is 3)

Here is how you can get the blog link from the page:

driver.findElement(By.cssSelector(".container__selenium ul > li:nth-child(1) > a");

Similarly to access responsive we can use, last-child reference as below:

Css= .container__selenium ul li
    driver.findElement(By.cssSelector(".container__selenium ul li:last-child");

Demo: Relative Locators in Selenium WebDriver

To demonstrate the usage of relative locators in Selenium 4, we will locate the WebElements on the TestMu AI eCommerce Playground page. The following test scenario will be automated using the relative locators in Selenium WebDriver. The tests will be run on the TestMu AI cloud grid on the latest version of Chrome browser on the Windows 10 platform.

TestMu AI is an AI-powered test orchestration and execution platform that lets developers and testers perform automation testing at scale on an online browser farm of 3000+ real browsers and operating systems.

Test Scenario

• Locate the WebElement for the iMac product on the product page.
• Locate the WebElement for the iMac product price displayed below the iMac product using the relative locator.
• Locate the Apple Cinema 30 product, displayed to the right of the iMac product, using the toRightOf relative locator.
• Locate the iPod Nano product displayed above the Apple Cinema 30 product using the above relative locator.
• Locate the iPod Shuffle product displayed to the left of the iPod Nano product using the toLeftOf relative locator.
• Perform assertions on every WebElement after locating the WebElement and getting its text.

The first unique WebElement on the page is located using the following method:

WebElement FirstElement = driver.findElement(By.Id("idvalue"));

Here is how the relative locator in Selenium 4 is used to locate the element below the element we searched earlier:

driver.findElement(with(By.tagName("tagName")).below(FirstElement));

The next set of WebElements on the page is identified using the above, below, toLeftOf, and toRightOf relative locators in Selenium 4.

Here is the code snippet that showcases the usage of relative locators in Selenium 4:

public class LocatorTests {
    WebDriver driver;
    String username = System.getenv("LT_USERNAME") == null ? "LT_USERNAME" : System.getenv("LT_USERNAME");
    String accesskey = System.getenv("LT_ACCESS_KEY") == null ? "LT_ACCESS_KEY" : System.getenv("LT_ACCESS_KEY");
    String gridURL = "@hub.lambdatest.com/wd/hub";

    @BeforeTest
    public void setup() throws MalformedURLException {
        ChromeOptions browserOptions = new ChromeOptions();
        browserOptions.setPlatformName("Windows 10");
        browserOptions.setBrowserVersion("122.0");
        HashMap<String, Object> ltOptions = new HashMap<String, Object>();
        ltOptions.put("project", "Selenium Locator Demo");
        ltOptions.put("w3c", true);
        ltOptions.put("plugin", "java-testNG");
        ltOptions.put("build", "Demonstration: Selenium Locator Demo on LambdaTest");
        browserOptions.setCapability("LT:Options", ltOptions);

        driver = new ChromeDriver();
        driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), browserOptions);

    }

    @Test
    public void testRelativeLocator() {

        driver.get("https://ecommerce-playground.lambdatest.io/index.php?route=product/manufacturer/info&manufacturer_id=8");


        WebElement iMac = driver.findElement(By.linkText("iMac"));
        WebElement iMacPriceViaBelow = driver.findElement(with(By.cssSelector("div.price> span")).below(iMac));
        assertEquals(iMacPriceViaBelow.getText(), "$170.00");

        WebElement fetchToTheRight = driver.findElement(with(By.tagName("h4")).toRightOf(iMac));
        assertEquals(fetchToTheRight.getText(), "Apple Cinema 30"");

        WebElement fetchViaAbove = driver.findElement(with(By.tagName("h4")).above(fetchToTheRight));
        assertEquals(fetchViaAbove.getText(), "iPod Nano");

        WebElement fetchViaToLeftOf = driver.findElement(with(By.tagName("h4")).toLeftOf(fetchViaAbove));
        assertEquals(fetchViaToLeftOf.getText(), "iPod Shuffle");

    }
    @AfterTest
    public void teardown() {
        driver.quit();
    }

}

Code Walkthrough

As the tests will run on the TestMu AI cloud platform, we need to provide the TestMu AI Username and Access Key. These credentials can be found on your TestMu AI Profile > Account Settings > Password & Security.

The credentials are confidential values that should not be hardcoded in the code. The following line of code will help set the Username and Access Key using the environment variables. The gridURL helps connect the remote session to the TestMu AI cloud grid.

Next, we need to set the TestMu AI automation capabilities to set the platform, browser and its version, build name, test name, and other mandatory options required for running the tests on the TestMu AI platform.

The TestMu AI Capabilities Generator helps in easily setting the capabilities by selecting the desired options from the UI. It provides the auto-generated code that can be used directly in the code.

The following lines of code sets the capabilities for running the test on Chrome browser version 122.0 on the Windows 10 platform.

ChromeOptions class is used as we need to run the tests on the Chrome browser. Similarly, if we need to run the tests on Edge browser, we can use EdgeOptions and likewise for other browsers. Finally, a new instance of RemoteWebDriver is created by supplying the username, accesskey, and gridURL with the browserOptions variables.

The @BeforeTest annotation in TestNG placed on the top of the setup() method will run this method before any of the tests, so the configuration for running the test on the TestMu AI platform is set correctly.

The testRelativeLocator() method will run the test by locating the WebElements using the below, toRightOf, above, and toLeftOf relative locators, as discussed in the test scenarios.

After all the tests are run successfully, the driver session will be closed when the driver.quit() statement is invoked. This statement will be called after each test as the @AfterTest annotation of TestNG has been used above the tearDown() method.

Test Execution

The following screenshot shows the output of the test execution performed using IntelliJ IDE:

You can also use a combination of relative locators to locate the desired WebElement.

WebElement fetchwithmutipleRelative=driver.findElement(with(By.tagName("h4")).below(fetchviatoLeftOf).toRightOf(fetchviaabove));

The above code identifies an element below a given WebElement and to the right of the newly searched element.

Also, subscribe to the TestMu AI YouTube Channel and get detailed tutorials around Selenium automation, Appium automation, and more.