Automate Date Picker | JavaScript Executor | Selenium — Katalon

3 min readMay 3, 2019

Assumption here - we have good understanding of following tool / terminologies.
* Cucumber Tool (Basic Idea)
* Selenium
* Katalon Tool

Problem Statement:

It is always difficult to automate the DATE PICKER CONTROL for any application. Problem becomes more painful where there is a situation where application forces us to select date from Date Picker itself. Let me share real- time challenges. Have a look of calendar control here:

Possible Solution:

Life will become more easy if the DATE Component IS NOT READ-ONLY so user can directly enter date into the field and by pass the DATE Component.
In given situation, people used to write complex code which will open DATE Component and based on date, automation code will navigate on DATE Component (Day, Month, Year) OR they will play with TD / TR HTML element of Component.
All of the above solutions are VALID and may work based on which type of Date control we have used in application. But it that easy? Investing these much efforts worth? In my opinion — NO…… (unless we have no option)

Workaround:

Let’s go back to Original problem. We are not able to write the date due to component is READ-ONLY. Can’t we remove the READ-ONLY Property of component during the automation and Directly send the dates?
If YES, Our problem is RESOLVED and we don’t need to write complex code to traverse the Date control. We can write whichever the date we want (future, past) into the field.
This can be achieved by executing JavaScript and Tempering/Removing the HTML attribute. In given example, it is “readonly” attribute. Based on technology used, attribute name may varies. (ex: It may be “disabled” or something similar)

Let’s revisit the Date Component & observe HTML structure in detail:

Katalon Code:-

Through ‘executeJavaScript’ command we can execute JavaScript and remove the attribute which we want. More info, refer Katalon doc.

  'Need to remove readonly HTML attribute'
  WebUI.executeJavaScript("document.getElementsByClassName('form-control')[11].removeAttribute('readonly');", null)
  
  'Enter Date directly into the field'
  WebUI.sendKeys(findTestObject('startDate'), '03-05-2019')  'Next automation steps'

The removeAttribute() method removes the specified attribute from an element.

Removed Read-only attribute from Date Picker (Reference)

Selenium Webdriver Code:-

JavaScriptExecutor is an Interface that helps to execute JavaScript through Selenium Webdriver. More info, refer Selenium doc.

@Test  
public void CalendarTest()      
{  
   WebDriver driver= new FirefoxDriver();   
          
   // Creating JavascriptExecutor interface object Type casting  
   JavascriptExecutor js = (JavascriptExecutor)driver;  
          
   // Launching the Site.              driver.get("http://keenthemes.com/preview/metronic/theme/admin_1/components_date_time_pickers.html");   
          
  WebElement datePicker = driver.findElement(By.xpath("(//input[@class='form-control'])[11]"));          
          
  // Need to remove readonly HTML attribute  
  js.executeScript("document.getElementsByClassName('form-control')[11].removeAttribute('readonly');", datePicker);
          
  // Enter Date directly into the field
  driver.findElement(By.xpath("(//input[@class='form-control'])[11]")).sendKeys("03-05-2019");      
  }

Conclusion:

We have achieved automation where Date control is Read-only.
Same logic can be applied where you have file upload component and text box is read-only.
It is assumed that automating the Date component is NOT the objective but handling the read-only Date component is the objective.