How To Handle Hidden Elements in Selenium WebDriver | Working with hidden controls in Selenium

In this tutorial, we will learn how to handle Hidden Elements on the web-pages using Selenium WebDriver.

Handle Hidden Elements

Hidden elements are the elements which are not displayed on the Web-Pages, however, it is available in the HTML DOM structure.

Elements are hidden on the web-pages due to below-mentioned reasons - 

• They have a CSS display value of none.

          style=”display: none;”

• They are form elements with type="hidden"
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

Issue - Selenium does not allow to interact with an element which is hidden on the web-page and if we try to do so, then it will throw ''Element Not Visible Exception".

Solution - Selenium provides one feature called 'Javascript Executor' to handle such scenario.

Note - I will take 'https://learn.letskodeit.com/p/practice' website to explain the above concept.

If you open the above link and scroll down a bit, then on the right side you will get one section as displayed in the below image.

 - There are two buttons - 'Hide' and 'Show'

 - Currently, the 'Hide/Show Example' text box is displayed.

 - Once you click on the 'Hide' button, the text box will be hidden.

 - Again you click on the 'Show' button, the text box will be displayed.

Scenario 1 - Write a program to enter text in the text box which is hidden on the web-page.  

Case 1: I will hide the text box and then simply try to enter text 'text123' in the text box. "Element Not Visible Exception" will be thrown. See the below program -

 package com.sessions;  
   
 import org.openqa.selenium.By;  
 import org.openqa.selenium.JavascriptExecutor;  
 import org.openqa.selenium.WebDriver;  
 import org.openqa.selenium.chrome.ChromeDriver;  
   
 public class HiddenElementTest {  
   
      public static void main(String[] args) throws Exception {  
     System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");  
             
           WebDriver driver = new ChromeDriver();  
             
           driver.get("https://learn.letskodeit.com/p/practice");  
             
           driver.manage().window().maximize();  
             
           //Clicking on the Hide button  
           driver.findElement(By.xpath("//input[@id='hide-textbox']")).click();  
                       
           driver.findElement(By.xpath("//input[@id='displayed-text']")).sendKeys("text123");;  
             
   
   
      }  
   
 }  
   

Output -

Case 2: This time I will handle Scenario 1 using Javascript Executor. See the below program -

 package com.sessions;  
   
 import org.openqa.selenium.By;  
 import org.openqa.selenium.JavascriptExecutor;  
 import org.openqa.selenium.WebDriver;  
 import org.openqa.selenium.chrome.ChromeDriver;  
   
 public class HiddenElementTest {  
   
      public static void main(String[] args) throws Exception {  
     System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");  
             
           WebDriver driver = new ChromeDriver();  
             
           driver.get("https://learn.letskodeit.com/p/practice");  
             
           driver.manage().window().maximize();  
             
           //Clicking on the Hide button  
           driver.findElement(By.xpath("//input[@id='hide-textbox']")).click();  
                       
           JavascriptExecutor js = (JavascriptExecutor)driver;  
             
           // Identifying the element using ID attribute and Entering the value in the text box  
     js.executeScript("document.getElementById('displayed-text').value='text123'");  
             
             
           }  
   
 }  
   

Explanation -

• JavascriptExecutor - It is an interface provided by Selenium WebDriver to execute Javascript commands in the Selenium Script.
• getElementById() - It is a Javascript method that is used to locate an element on the web-page using ID attribute of that element.
• executeScript() - It is a method of JavascriptExecutor interface to execute the javascript commands in the Selenium Script.

Note - Since the text box is hidden, so you won't be able to see the text entered in the text box. Run the program and you will find that it runs successfully without any exception. Now,  If you click on the 'Show' button then you will see the text is entered in the box.


That's all guys!!! Do comment and post your doubts related to Selenium!!!