How to Handle Hidden Elements in Selenium WebDriver

When running automated tests with Selenium WebDriver, testers might encounter ElementNotInteractableException or ElementNotVisibleException if the web page elements are hidden or can’t be interacted with.

This happens because the elements exist in the Document Object Model (DOM) but aren’t visible on the web page. In such cases, testers can use JavaScriptExecuter to handle hidden elements in Selenium WebDriver.

What Are Hidden Elements?

Hidden elements are the ones that are present in the DOM but not visible on the web page. Usually, hidden elements are defined by the CSS property style=display:none.

In case an element is a part of the < form > tag, it can be hidden by setting the attribute type to the value hidden.

Hiding the elements can be done using the following ways:

• Using the style attribute and display:none value.
• Using a block value for the display property within the style attribute.
• Using a hidden value for visibility property.
• Giving a hidden value to the type attribute in the HTML code.

What is DOM Implementation of Hidden Elements?

If an element is only hidden until a specific action, such as clicking a link or button, it can be displayed on the web page after the action is performed.

I have created the below web page for the demo of hidden elements:

Here, I have used style.display = ‘block’; and style=”display:none;” for hiding the Hide Me button.

Output (before clicking on the Click Me! button):

Output (after clicking on the Click Me! button):

Since these elements are hidden, they are not visible to Selenium WebDriver.

From the above output, there are two buttons: Click Me! and Hide Me! Here, we do the following checks:

• Check if the Click Me! button is displayed.
• Click on the Click Me! button and the Hide Me! button will be displayed.
• Click on the Hide Me! button and the text and Hide Me! button will be hidden.

While handling hidden elements, you can enhance your Selenium testing process with AI-driven test agents like KaneAI.

KaneAI by LambdaTest is an innovative AI test assistant built for fast-paced quality engineering teams, offering unique AI-powered features for test authoring, management, and debugging. It allows users to easily create and update complex test cases using natural language, making it much easier and faster to get started with test automation without needing deep expertise.

Can Selenium WebDriver Interact With Hidden Elements?

Now you have a gist of the DOM implementation of hidden elements, let’s look at how to handle hidden elements in Selenium WebDriver.

To check if Selenium WebDriver can interact with hidden elements, I will use my portfolio website.

For this, we will use JavaScriptExecutor to handle the hidden elements in Selenium WebDriver. The attribute of the hidden element is changed, making the element visible using visibility:visible.

Subscribe to the LambdaTest YouTube Channel for quick updates on the tutorials on Selenium testing, Selenium Java, and more.

Let’s take a scenario – there are two buttons, Hide and Show. The Hide and Show button and the text box appear when the page is loaded. Once we click on the Hide button, the text box will be hidden. Again, the text box will appear when we click the Show button.

Implementation:

Selenium does not allow us to perform any action on the hidden elements on the web page. In the above case, I clicked on the Hide button, and then I tried entering the text LambdaTest in the text field, so it threw ElementNotInteractableException.

So, how do we interact with the hidden element so that we do not encounter any exceptions? Let’s look into how to handle hidden elements in Selenium WebDriver.

Demonstration: Handle Hidden Elements in Selenium WebDriver

We will use JavaScriptExecutor, tweaking the display:none; for the style attribute to visibility:visible; so that we can make the hidden element visible to the Selenium script.

We can change the display:none value of the style attribute to visibility:visible at run time while running the tests.

Changing the style attribute will change the style of the page, but it will make it visible to the Selenium scripts. Here, we again use the execute_script() method to execute the script.

We will be using the getElementById() method of JavaScript and pass the ID as in the below syntax:

We often will not get the elements with unique IDs or names for them. In that case, we can use XPath and use it in the JavaScriptExecutor methods as below:

We use arguments[0].click() as it holds the web element in the first line of code, which is hidden on the web page.

Apart from the direct use of JavaScriptExecutor, we also have another way to make the element unhidden for the Selenium tests. As we discussed, we use CSS to hide the element. We can tweak the identical CSS to unhide the element as well.

We have used the display:none property for the style attribute to hide this element.

We can change the display:none value of the style attribute to visibility:visible while running the Selenium test.

Changing the style attribute will change the CSS of the text field, and the element will be visible to the Selenium tests at run time.

Here, we will also use JavaScriptExecutor and the setAttribute() method to make the element unhidden or not hidden. We use the below code to make it.

Next, we will run tests to handle hidden elements in Selenium WebDriver. Testing on a cloud grid is feasible to achieve better scalability and reliability. For this, we leverage cloud-based testing platforms such as LambdaTest.

It is an AI-powered test orchestration and execution platform that allows you to perform automation testing with Selenium WebDriver on a remote test lab of different browsers and operating systems.

Note

Automate Selenium Java Tests Across 3000+ Real Browsers and OS. Try LambdaTest Today!

 
Implementation:

Code Walkthrough:

The below snap shows the structure of our web project.

Import packages using JavaScriptExecutor and other methods.

Create the RemoteWebDriver class that implements the WebDriver interface to execute the tests on the Remote WebDriver server on a remote machine. It is implemented under the package below:

@BeforeMethod annotation in TestNG sets the browser’s capabilities. A RemoteWebDriver instance is created with the desired browser capabilities, with the Selenium Grid URL ([@hub.lambdatest.com/wd/hub]) set to the cloud-based Selenium Grid on LambdaTest.

All the test navigation steps are implemented under the @Test annotation. Here is how we navigate to the desired URL:

Maximize the window and wait for the page to load using the explicit wait in Selenium. Selenium WebDriver must wait until the specified condition occurs before executing the code.

Use the maximize() method to maximize the window in Selenium:

To use explicit wait, use ExpectedConditions in Selenium.

Initialize the wait object using the Selenium WebDriverWait class.

Create an object of JavaScriptExecutor and pass the element to the script to interact with the element to send text.

The executeScript() method executes the test script in the context of the currently selected window or frame.

Send the text through JavascriptExecutor. The document.getElementById() method returns the element of the specified id. The document refers to a web page that is the Document Object Model of the web page. If we want to access any element in an HTML page, we need to access the document object.

Close the driver instance using the quit() method.

Test Execution:

Once you run the test, navigate to the LambdaTest Web Automation Dashboard to view your test results.

Final Thoughts!

In this blog, we learned how to handle hidden elements in Selenium WebDriver.
To summarize, hidden elements are HTML elements not visible to the user when a web page is displayed in a web browser. They can be created using the hidden attribute in HTML or CSS to set the element’s display property to none.

When performing Java automation testing on hidden elements, it is important to ensure that the elements are accessible to the test script and that interacting with them does not cause any unexpected behavior in the web application.

Sri Priya

An ISTQB certified tester with primary focus on Software Quality and making sure that Software is Bug free. She has a strong background in Testing Tools, API testing , Linux OS , UI and Backend Automation testing. I will enjoy to work in team and learning from others, across all areas of business and technologies. I love to share my knowledge and write about latest technology stacks.

See author's profile