Below

Introduction

Selenium 4 introduced Relative Locators, a powerful feature that allows automation engineers to locate web elements based on their position relative to other elements on a webpage. Instead of depending entirely on attributes such as ID, Name, or XPath expressions, Relative Locators use an element’s visual position to identify related elements.

The below() Relative Locator is used to locate an element that appears below another known element on the webpage. This approach is particularly useful when elements do not contain unique attributes but maintain consistent visual relationships.

In this tutorial, you’ll learn what the below() Relative Locator is, why it is used, its syntax, practical examples, real-world use cases, common mistakes, and best practices.

What is the Below Relative Locator?

The below() Relative Locator identifies a web element that is positioned below another known element on the webpage.

Instead of locating an element directly, Selenium first identifies a reference element and then searches for matching elements that appear visually below it.

For example, consider the following webpage layout:

-------------------------
| Username              |
| [______________]      |
|                       |
| Password              |
| [______________]      |
-------------------------

The Password textbox is positioned below the Username textbox.

Selenium can use the Username field as the reference element and locate the Password field using the below() Relative Locator.

Why Use the Below Relative Locator?

The below() Relative Locator is useful because it:

Locates elements using their visual position.
Reduces dependency on complex XPath expressions.
Improves locator readability.
Supports modern webpage layouts.
Improves framework maintainability.
Is widely used in Selenium 4 automation frameworks.

Syntax

driver.find_element(
    locate_with(
        By.TAG_NAME,
        "input"
    ).below(reference_element)
)

Where:

locate_with() → Creates a Relative Locator.
By.TAG_NAME → Defines the element type.
below() → Locates elements positioned below the reference element.
reference_element → Previously located web element used as the reference point.

Example

The Login page contains Username and Password textboxes. Selenium first locates the Username field and then identifies the Password field positioned below it.

The Selenium code is:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with


# Topic: 14. Selenium 4 Relative Locators - Below
# Practice site: https://the-internet.herokuapp.com/login
# Run: pytest -s 14_examples/test_02_below.py
#
# The below() relative locator finds an element positioned below a reference
# element on the page.


def test_relative_locator_below():
    driver = webdriver.Chrome()

    try:
        driver.get("https://the-internet.herokuapp.com/login")

        username_field = driver.find_element(By.ID, "username")

        password_field = driver.find_element(
            locate_with(
                By.TAG_NAME,
                "input"
            ).below(username_field)
        )

        assert password_field.get_attribute("id") == "password"

    finally:
        driver.quit()

Output

The Password textbox is
located successfully using
the below() Relative Locator
with the Username textbox
as the reference element.

Understanding the Code

Import the Required Classes

from selenium.webdriver.common.by import By

from selenium.webdriver.support.relative_locator import (
    locate_with
)

Imports Selenium’s locator strategies and Relative Locator functionality.

Open the Login Page

driver.get(
    "https://the-internet.herokuapp.com/login"
)

Launches the Selenium practice website.

Locate the Username Field

driver.find_element(
    By.ID,
    "username"
)

Locates the Username textbox that will be used as the reference element.

Locate the Password Field

driver.find_element(
    locate_with(
        By.TAG_NAME,
        "input"
    ).below(username_field)
)

Searches for an <input> element positioned below the Username textbox.

Validate the Element

assert password_field.get_attribute(
    "id"
) == "password"

Verifies that Selenium successfully located the Password textbox.

How the Below Relative Locator Works

         Python Script
                │
                ▼
         Locate Reference Element
                │
                ▼
          Username Textbox
                │
                ▼
            Apply below()
                │
                ▼
       Search Elements Below It
                │
                ▼
        Locate Password Field
                │
                ▼
           Perform Validation

Practical Example

Suppose you’re automating a Registration page.

The Confirm Password field appears below the Password textbox, but neither field contains reliable IDs across different environments.

Instead of creating complex XPath expressions, Selenium can locate the Password field first and then use the below() Relative Locator to identify the Confirm Password field reliably.

This significantly improves locator readability and maintainability.

Automation Testing Example

Consider an online banking application.

The Login page contains multiple textboxes arranged vertically. During future UI enhancements, developers may modify HTML attributes while preserving the visual layout.

Selenium uses Relative Locators to identify elements based upon their positions, reducing automation failures during regression testing across environments.

Real-World Example

Automation engineers frequently use the below() Relative Locator while working with:

Banking applications.
E-Commerce websites.
Healthcare portals.
CRM systems.
ERP applications.
SaaS products.
Enterprise web applications.
Registration forms.
Dynamic dashboards.

Relative Locators are particularly useful whenever elements maintain stable visual relationships but contain changing HTML attributes.

Advantages of the Below Relative Locator

Improves locator readability.
Reduces dependency on complex XPath expressions.
Supports dynamic webpage layouts.
Improves framework maintainability.
Produces clean and reusable automation scripts.
Widely used in Selenium 4 automation frameworks.

Limitations of the Below Relative Locator

Depends upon the visual positioning of elements.
UI layout changes may affect locator reliability.
Multiple matching elements may require additional filtering.
Not suitable for every webpage design.

Common Mistakes Beginners Make

Using Incorrect Reference Elements

Incorrect

password_field = driver.find_element(
    locate_with(
        By.TAG_NAME,
        "input"
    ).below(login_button)
)

Correct

password_field = driver.find_element(
    locate_with(
        By.TAG_NAME,
        "input"
    ).below(username_field)
)

Always use the most appropriate reference element.

Ignoring Page Layout Changes

Relative Locators depend upon the visual positioning of elements. Significant UI changes may require locator updates.

Using Relative Locators Unnecessarily

If a stable ID or Name attribute uniquely identifies an element, prefer simpler locator strategies whenever appropriate.

Best Practices

Use stable reference elements whenever possible.
Prefer Relative Locators when visual relationships improve locator reliability.
Verify webpage layouts using browser Developer Tools.
Keep automation scripts simple and readable.
Use Relative Locators alongside traditional locator strategies when appropriate.
Write maintainable and reusable locators within automation frameworks.

Conclusion

The below() Relative Locator introduced in Selenium 4 provides a powerful and readable way to locate web elements based upon their visual relationships with other elements. It significantly improves locator flexibility when working with modern web applications that contain dynamic or frequently changing HTML attributes.

Understanding the below() Relative Locator provides an excellent foundation for learning other Selenium 4 Relative Locators such as above(), to_left_of(), to_right_of(), and near().

Frequently Asked Questions (FAQs)

What is the Below Relative Locator?

The below() Relative Locator identifies an element that is positioned below another known element on a webpage.

What is the syntax for the Below Relative Locator?

driver.find_element(
    locate_with(
        By.TAG_NAME,
        "input"
    ).below(reference_element)
)

Why is the Below Relative Locator useful?

It improves locator readability and allows Selenium to locate elements based upon their visual positions.

Can Relative Locators replace XPath completely?

No.

Relative Locators complement traditional locator strategies such as ID, CSS Selectors, and XPath. The most suitable locator should always be chosen based upon the application’s requirements.

When should I use the Below Relative Locator?

Use it whenever elements maintain stable visual relationships but do not contain reliable or unique HTML attributes.

Key Takeaways

The below() Relative Locator identifies elements positioned below a reference element.
Relative Locators improve locator readability and maintainability.
Use stable reference elements whenever possible.
Relative Locators are widely used in Selenium 4 automation frameworks.
Choose the simplest and most reliable locator strategy for every automation scenario.
The below() Relative Locator is particularly useful when automating modern and dynamic web applications.