How To Find Hidden Elements In Selenium WebDriver With Java

Have you ever struggled with handling hidden elements while automating a web or mobile application? I was recently automating an eCommerce application. I struggled with handling hidden elements on the web page.

Usually, we get an ElementNotInteractableException or ElementNotVisibleException when locating any web elements on the web page. This is due to the elements present in DOM but not visible on the web page.

In simple terms, I can say that the book is present on the shelf but not visible.

In the above image, the book is present on the shelf, but it is hidden under other books. In the same way, the web element will be present on the web page, but it is hidden for some reason.

The reason is that sometimes developers need to hide the elements on the web page as per the requirement. While designing the HTML page, UI developers often hide a few things from the UI due to particular conditions or requirements (mentioned later in the blog on how to find hidden elements in Selenium WebDriver with Java). This makes web elements to be hidden from UI and the user as well.

Even though the elements are present in the DOM, they will not be visible to the user or the Selenium automation tests.

You can also watch this video to learn how to find elements by Text in Selenium WebDriver using Java.

When automating, Selenium does not allow direct to perform any web driver action on the web element, which is hidden on the web page. If we try to perform, we get an ElementNotVisibleException or ElementNotInteractableException. Selenium uses JavaScript Executor to handle such exceptions. You can learn more about it by reading this blog on handling exceptions in Selenium.

In this blog, we will discuss how to find hidden elements in Selenium WebDriver with Java. We will start with the What and How of hidden elements.

By the time you finish reading this blog post, you will have a thorough understanding of hidden elements and how to locate and manipulate them using Selenium WebDriver with Java.

Let’s get started with the hide-and-seek game using Web Elements.

What are hidden elements in HTML?

Hidden elements are the elements that are present in the DOM but not visible on the webpage. Normally, 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.

Before handling these elements, we need to know how to hide the web elements on a web page.

Hiding the web elements can be done using many ways:

• We can hide the web element 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 HTML code.

Examples of hidden elements in the DOM

“A link or a button, which should be visible in Desktop view mode but should not be visible in Mobile View mode.” To design as per the requirement, the developer has to hide the link when the user accesses the web page in mobile view mode.

Let us take an example of the Amazon SignUp page.

Desktop View:

Mobile View:

In the desktop view, the “Show password” checkbox is not displayed, but in the Mobile view, the Show password checkbox is displayed. To develop this developer hides the show password checkbox as a hidden element.

Consider another example:

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

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

HTML:

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

Output:

After clicking on the Click Me! button:

Since these web elements are hidden, they are not visible to Selenium. There are two buttons – Click Me! and ‘Hide Me!’

• 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 we shall see how to find hidden elements in Selenium WebDriver with Java.

We use JavaScript Executor to handle the hidden elements. The attribute of the hidden element is changed, making the element visible using visibility:visible. I will be touching upon this aspect through a real-life example.

Note: I will take my personal website to explain the above concept of how to find hidden elements in Selenium WebDriver with Java.

How to handle hidden elements

In this section of the blog on how to find hidden elements in Selenium WebDriver with Java, we will look at how to handle hidden elements.

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

Code:

Element Not Interactable Exception:

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, then I tried entering the text “LambdaTest” in the text field, so it threw “ElementNotInteractableException”.

So, how do we interact with the hidden element such that we do not encounter any exceptions? Let’s look into that in the further section of the blog on how to find hidden elements in Selenium WebDriver with Java.

Demonstration: How to find hidden elements in Selenium WebDriver with Java

We use JavaScript Executor, 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 would cause a change in the style of the page, but it will make it visible to the Selenium scripts. Here we again use Java Script Executor to execute the script.

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

Most often, we will not get the web elements with unique id’s or name’s for them. In that case, we can use XPath and use it in the JavaScript Executor methods as below:

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

Apart from the direct use of JavaScript Executor, we also have one more way to make the web element not-hidden for the Selenium tests. As we discussed, we use CSS to hide the web element. We can tweak the same CSS to unhide the web element as well.

We have used display:none 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 web element will be visible to the Selenium tests at run time.

Here also, we will use JavaScript Executor, setAttribute method to make the web element unhidden or not hidden. We use the below code to make it.

I hope by now, you are clear how to find and test the hidden web elements. In this blog on how to find hidden elements in Selenium WebDriver with Java, we demonstrated two ways to deal with hidden web elements.

Implementation

Code Walkthrough

Before the tests are run, please set the environment variables LT_USERNAME & LT_ACCESS_KEY from the terminal. The account details are available on your LambdaTest Profile page.

For Windows:

set LT_USERNAME=LT_USERNAME
set LT_ACCESS_KEY=LT_ACCESS_KEY

For macOS:

export LT_USERNAME=LT_USERNAME
export LT_ACCESS_KEY=LT_ACCESS_KEY

For Linux:

export LT_USERNAME=LT_USERNAME
export LT_ACCESS_KEY=LT_ACCESS_KEY

To demonstrate, this is the project which I have created.

Step 1: Import the packages of JavaScript Executor and other methods.

Step 2: Create the RemoteWebDriver reference. Remote WebDriver is a 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:

Step 3: The method implemented in @BeforeTest annotation in TestNG sets the browser’s capabilities. A RemoteWebDriver instance is created with the desired browser capabilities, with the Selenium Grid URL set to the cloud-based Selenium Grid on LambdaTest [@hub.lambdatest.com/wd/hub].

You can use the LambdaTest cloud platform to run Selenium tests written in Java on an online browser farm of more than 3,000 real browsers and operating systems. This platform enables you to run Java tests both locally and in the cloud, and you can also use it to speed up Selenium testing with Java by running parallel tests.

Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorial around automated browser testing, Cypress E2E testing, Mobile App Testing, and more.

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

Maximizing the window and waiting for the page to load using the Explicit Wait command in Selenium. Selenium WebDriver must wait until the specified condition occurs before proceeding with the execution code.

We use the maximize() method to maximize the window in Selenium:

To use explicit wait, we have to use ExpectedConditions in Selenium.

We have to initialize the wait object using the WebDriver wait class.

Step 5: Create an Object of JavaScript Executor and pass the web element to the script to interact with the web element to send text.

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

Step 6: We will send the text through JavaScript Executor.

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

Step 7: Close the driver instance.

Execution

The test was successfully run and the LambdaTest automation dashboard indicates the status of the test execution.

The tests were successfully executed on LambdaTest’s cloud Selenium Grid.

Gain expertise in Selenium with Java by earning the LambdaTest Selenium Java 101 certification. This certification program is tailored for Selenium testers and developers who want to enhance their skills and knowledge in this field.

Final Thoughts

To summarize, hidden elements are HTML elements that are 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 by using CSS to set the element’s “display” property to “none”. Hidden elements can be found using web development tools such as the browser’s developer console or by using automated testing tools such as Selenium.

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

In this blog, I walked you through how to find hidden elements in Selenium WebDriver with Java. If you’re looking to improve your Selenium interview skills, check out our curated list of Selenium interview questions and answers.

I hope you found this blog very useful and informative.

Please feel free to share this blog with your friends and colleagues.

Happy Testing…!!!