How to Handle Hidden Elements in Selenium WebDriver

Sri Priya

Posted On: June 12, 2024

view count170767 Views

Read time10 Min Read

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 (before clicking on the Click Me! button)

Output (after 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.

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

Can Selenium WebDriver Interact With Hidden Elements?

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.

 text box

Implementation:

github

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.

Hide button

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.

hidden element visible

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

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.

style attribute

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

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.

Info 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.

import packages

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:

execute the tests

@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.

annotation in TestNG

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

@Test annotation

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:

maximize() method

To use explicit wait, use ExpectedConditions in Selenium.

 ExpectedConditions in Selenium.

Initialize the wait object using the Selenium WebDriverWait class.

Selenium WebDriverWait

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.

execute script

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.

Object Model of the web page

Close the driver instance using the quit() method.

quit method

Test Execution:

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

LambdaTest Web Automation Dashboard

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.

Frequently Asked Questions (FAQs)

What are the hidden elements in Selenium?

Hidden elements in Selenium typically have CSS properties like display: none or visibility: hidden, making them not visible on the web page.

How to show hidden elements in inspect?

To show hidden elements in the inspect tool, you can manipulate the CSS properties of the element to change its display or visibility settings.

What to do if the element is not visible in Selenium?

If an element is not visible in Selenium, you can try using actions like scrolling, resizing the window, or switching to an iframe context to interact with it.

How to validate invisible elements in Selenium?

To validate an invisible element in Selenium, you can check its attributes or properties using methods like is_displayed(), get_attribute(‘style’), or execute_script() to inspect its visibility status.

Author Profile Author Profile Author Profile

Author’s Profile

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.

Blogs: 3



linkedintwitter