Introduction

Hidden Elements are web elements that exist in the HTML DOM but are not visible to users. They may be intentionally hidden using CSS properties such as display: none, visibility: hidden, or may appear only after certain user interactions or JavaScript execution.

Modern web applications frequently use hidden elements for dynamic content loading, dropdown menus, modal dialogs, expandable sections, and advanced UI components. Since Selenium interacts with elements in the same way a real user would, hidden elements generally cannot be clicked or typed into until they become visible.

In Selenium, hidden elements can be handled using JavaScript execution, scrolling techniques, or by waiting until they become visible before interacting with them.

In this tutorial, you’ll learn how to handle Hidden Elements using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.

What are Hidden Elements?

Hidden Elements are webpage elements that exist in the DOM but are not currently visible to users.

Common examples include:

Hidden textboxes
Hidden buttons
Expandable menus
Hidden dropdown options
Modal dialog content
Dynamically displayed form elements

Elements may be hidden because of:

CSS styling (display:none)
JavaScript-based rendering
User interaction requirements
Responsive design behavior
Dynamic page updates

Since Selenium mimics user behavior, hidden elements usually cannot be interacted with directly until they become visible.

Why Automate Hidden Elements?

Automating Hidden Elements helps you:

Validate dynamic user interfaces.
Test JavaScript-driven applications.
Handle expandable sections and menus.
Improve automation coverage.
Verify dynamically loaded content.

Common Methods Used

Method	Purpose
execute_script()	Executes JavaScript inside the browser
find_element()	Locates web elements
get_attribute()	Retrieves element attributes
is_displayed()	Verifies element visibility
scrollIntoView()	Scrolls hidden or off-screen elements into view
WebDriverWait()	Waits for dynamically displayed elements

Example

The following example creates a hidden textbox using JavaScript, makes it visible using execute_script(), and verifies both its value and visibility.

from selenium import webdriver
from selenium.webdriver.common.by import By


# Topic: 27. Dynamic Web Elements - Hidden Elements
# Practice site: https://the-internet.herokuapp.com/inputs
# Run: pytest -s 27_examples/test_04_hidden_elements.py
#
# Hidden elements are not visible but may exist in the DOM. Use JavaScript or
# scroll into view to interact with elements that are off-screen or hidden.


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

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

        driver.execute_script(
            """
            const hidden = document.createElement('input');
            hidden.id = 'hidden-input';
            hidden.type = 'text';
            hidden.style.display = 'none';
            hidden.value = 'secret';
            document.body.appendChild(hidden);
            """
        )

        hidden_input = driver.find_element(
            By.ID,
            "hidden-input"
        )

        driver.execute_script(
            "arguments[0].style.display = 'block';",
            hidden_input
        )

        assert hidden_input.get_attribute("value") == "secret"
        assert hidden_input.is_displayed()

    finally:
        driver.quit()

Output

The hidden textbox becomes visible successfully and contains the value "secret".

The hidden element is created dynamically, made visible using JavaScript, and successfully verified by Selenium.

Understanding the Code

Import the Required Classes

from selenium import webdriver
from selenium.webdriver.common.by import By

Imports:

webdriver for browser automation.
By for locating web elements.

Create the WebDriver

driver = webdriver.Chrome()

Launches a new Chrome browser session.

Open the Practice Website

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

Opens the practice webpage where the hidden element will be created dynamically.

Create a Hidden Element

driver.execute_script(
    """
    const hidden = document.createElement('input');
    hidden.id = 'hidden-input';
    hidden.type = 'text';
    hidden.style.display = 'none';
    hidden.value = 'secret';
    document.body.appendChild(hidden);
    """
)

This JavaScript code:

Creates a textbox dynamically.
Assigns an ID of hidden-input.
Makes it invisible using:

display: none;

Assigns the value:

secret

Adds the element to the webpage.

At this point, the element exists in the DOM but remains hidden from users.

Locate the Hidden Element

hidden_input = driver.find_element(
    By.ID,
    "hidden-input"
)

Although the element is hidden, Selenium can still locate it because it exists in the DOM.

However, most user interactions such as:

click()
send_keys()

cannot be performed until the element becomes visible.

Make the Element Visible

driver.execute_script(
    "arguments[0].style.display = 'block';",
    hidden_input
)

This JavaScript changes:

display: none;

to:

display: block;

making the element visible on the webpage.

Verify the Element Value

assert hidden_input.get_attribute(
    "value"
) == "secret"

This assertion verifies that the hidden textbox contains the expected value.

Verify the Element is Visible

assert hidden_input.is_displayed()

The is_displayed() method confirms that the textbox is now visible and available for user interaction.

Close the Browser

driver.quit()

Closes the browser and terminates the WebDriver session.

This is a recommended practice to ensure that browser resources are released properly after test execution.

Making Hidden Elements Visible

Hidden elements can be displayed using JavaScript.

Example:

driver.execute_script(
    "arguments[0].style.display='block';",
    element
)

Similarly, elements that are off-screen may be brought into view using:

driver.execute_script(
    "arguments[0].scrollIntoView();",
    element
)

Both approaches are commonly used for handling dynamic user interfaces.

Practical Example

Suppose an e-commerce website displays additional shipping options only after selecting a particular delivery method.

The automation script:

Selects the delivery option.
Waits for the hidden section to become visible.
Verifies that the shipping options are displayed correctly.

This validates both the application’s functionality and its dynamic behavior.

Automation Testing Example

Consider an online banking application.

After selecting:

Transfer Funds

additional account fields become visible dynamically.

The automation script:

Performs the required selection.
Waits for the hidden fields to appear.
Enters the transaction details.
Verifies successful submission.

Hidden Elements are extremely common in modern enterprise applications that use dynamic user interfaces.

Real-World Example

Hidden Elements are commonly used in:

Banking applications
E-commerce websites
CRM systems
Healthcare portals
HR management systems
Airline booking systems
Enterprise web applications

They are particularly useful for building responsive and interactive user interfaces.

Advantages of Automating Hidden Elements

Improves automation coverage.
Supports dynamic web applications.
Handles complex user interfaces.
Validates JavaScript-based functionality.
Improves automation reliability.

Common Mistakes Beginners Make

Attempting to Click Hidden Elements

Many beginners write:

element.click()

without verifying that the element is visible.

Hidden elements cannot usually be clicked until they become visible.

Ignoring Synchronization

If an element becomes visible dynamically, use:

WebDriverWait()

before interacting with it.

Using Fragile Locators

Always prefer stable locators such as:

ID
Name
CSS Selector

Avoid brittle XPath expressions whenever possible.

Using JavaScript Unnecessarily

If Selenium can interact with an element normally, avoid using JavaScript.

JavaScript should primarily be used when standard Selenium interactions are insufficient.

Best Practices

Prefer normal Selenium interactions whenever possible.
Use JavaScript only when necessary.
Verify element visibility before interaction.
Use Explicit Wait for dynamically displayed elements.
Prefer stable locators such as ID and CSS Selector.
Use scrollIntoView() for off-screen elements.
Validate both visibility and functionality after interacting with hidden elements.

Conclusion

Hidden Elements are widely used in modern web applications to provide dynamic and responsive user experiences. Properly handling hidden elements using JavaScript execution, synchronization techniques, and visibility checks significantly improves automation reliability. Understanding when and how to interact with hidden elements is an important skill for building robust Selenium automation frameworks.

Frequently Asked Questions (FAQs)

Can Selenium locate hidden elements?

Yes.

If the element exists in the DOM, Selenium can usually locate it successfully.

Can Selenium click hidden elements?

No.

Hidden elements generally cannot be clicked until they become visible.

How can I make hidden elements visible?

JavaScript can be used to modify CSS properties such as:

display: block;

or to scroll elements into view.

When should I use JavaScript?

JavaScript should be used when standard Selenium interactions are insufficient or when applications dynamically display content.

Are Hidden Elements commonly used in Selenium automation?

Yes.

They are widely used across modern enterprise applications that employ dynamic user interfaces and JavaScript-based rendering.

Key Takeaways

Hidden Elements exist in the DOM but are not visible to users.
JavaScript can be used to make hidden elements visible when necessary.
Use execute_script() and scrollIntoView() appropriately.
Verify both element visibility and functionality before interaction.
Prefer stable locators such as ID and CSS Selector.
Use Explicit Wait when hidden elements are displayed dynamically.
Proper synchronization significantly improves automation reliability when working with dynamic web applications.