Handle hidden elements with Selenium WebDriver

Are you getting ElementNotVisibleException while locating any Web elements on the web page? If yes, then there might be one reason that your element is hidden, and it is not visible on the web page, however, the implementation of the element is available in DOM structure. Today’s agenda is to discuss the technique to handle hidden elements with Selenium WebDriver. The above exception might disrupt your test execution, but after reading this article you will be filled with knowledge to handle hidden elements in any kind of web page.

But, before that, we will discuss a quick difference between ElementNotVisibleException and NoSuchElementException. I am just trying to build the knowledge base for you. Please don’t get bored. 😊

Vijay Mallya is hidden behind this house, but, he is not hidden element 😀

Difference between ElementNotVisibleException & NoSuchElementException

ElementNotVisibleException appears when the web element is hidden on the web page, however, the HTML implementation is present in the DOM. That hidden element may appear on satisfying certain conditions. Today we are going to discuss the techniques which will guide you to handle hidden elements.

NoSuchELementException occurs when the element which you are trying to fetch through its locators is overlapping with a similar type of element. So, at one instance you can handle it by finding the index. We will discuss in a separate tutorial to handle this exception. As of now, I wanted to build some base, but later we will surely discuss.

Let’s focus on today’s agenda which guides you to handle hidden elements with Selenium WebDriver.

What is the DOM implementation of hidden web elements?

When you inspect any hidden element, you will find hidden in its attribute. It signifies that that element is hidden by default but may appear on satisfying certain conditions. Following is the sample code of one of the hidden elements:

<a href=”https://www.inviul.com/avinash-mishra” title=”Avinash Mishra” 
<div style=”float:right; width: 50%; visibility:hidden; height: 20px; visibility:hidden”>Avinash Mishra
</div></a>

In the above sample code, you see hidden is set for visibility. Hence, that element will not be visible and when you try to fetch such element, then WebDriver will return ElementNotVisibleException.

How to handle hidden elements by using Selenium WebDriver?

At first, let me tell you one thing, Selenium does not support interaction with hidden elements; so you have to think in beyond way to first make the visibility of that hidden element then perform click operation. JavaScript works well to make element visible, hence, we can interact with hidden elements and perform click over there by using JavascriptExecutor. We have already discussed tutorials on performing click operation through JavascriptExecutor.

Let’s discuss the techniques to handle hidden elements with Selenium.

Technique# 1: Wait until Expected conditions are met

You can use Explicit wait conditions which are visibilityOfElementsLocated(). This method allows WebDriver to wait for visibility of the hidden elements then you perform click operation. Click on below link to learn more about Explicit wait.

Explicit wait – A smart wait in Selenium

Technique# 2: Click using JavaScript

As discussed above, we can use JavaScript commands to click on hidden elements. Here are some of the JavaScript commands:

A. When the id of the hidden element is known

String jsCommand = “javascript:document.getElementById(“sample_id”).click();”;

Use this js command in the executeScript method.

((JavascriptExecutor)driver).executeScript(jsCommand);

B. When XPath is defined

WebElement ele = driver.findElement(By.xpath(“xpath”)));
((JavascriptExecutor)driver).executeScript(“arguments[0].click();”,ele);

C. Scroll web page until it is visible

WebElement ele = driver.findElement(By.xpath(“xpath”)));
((JavascriptExecutor)driver).executeScript(“arguments[0].scrollIntoView(true);”,ele);

D. Make hidden elements visible at runtime

WebElement ele = driver.findElement(By.xpath(“xpath”)));
((JavascriptExecutor)driver).executeScript(“arguments[0].setAttribute(‘style’,’visibility:visible;’);”,ele);

This was all about handling hidden elements in your automation project by using Selenium WebDriver with Java programming language. Here is one bonus article for you. 😊

How to use the current date and future date in Selenium?