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'");  
             
             
           }  
   
 }  
   

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

In this tutorial, I am going to explain how to select a date from a calendar of any websites.

Handle Date Time Picker In Selenium

We often observe Date Time Picker fields on the websites mostly on E-Commerce and Travel Booking websites. Different websites use the Date Time Picker field/Calendar having different UI, but the functionality is the same. So in this tutorial, we will learn how to handle Date Time Picker field/Calendar using Selenium WebDriver.

 package com.sessions;  
   
 import org.openqa.selenium.JavascriptExecutor;  
 import org.openqa.selenium.WebDriver;  
 import org.openqa.selenium.chrome.ChromeDriver;  
   
   
 public class CalendarTest {  
   
      public static void main(String[] args) {  
             
           System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");  
             
           WebDriver driver = new ChromeDriver();  
             
           driver.get("http://www.yatra.com/");  
             
           driver.manage().window().maximize();  
             
           //Typecating driver as a JavascriptExecutor and assigning it to the variable of JavascriptExecutor  
           JavascriptExecutor js = (JavascriptExecutor )driver;  
             
           //Putting date to the the selected date picker.  
           js.executeScript("document.getElementById('BE_flight_origin_date').value='03/10'");  
   
      }  
   
 }  
   

• Javascript Executor is an Interface provided by Selenium WebDriver which is used to run Javascript commands from Selenium script.
• This Interface provides a method executeScript() - to run the Javascript commands.
• We need to import one package called org.openqa.selenium.JavascriptExecutor.
• Since the driver can execute only selenium commands so we need to typecast driver as a JavascriptExecutor so that Javascript commands can be run from Selenium script.  
• document.getElementById('BE_flight_origin_date').value='03/10'