What is calendar Popup / Date Picker

When you need to automate a hotel, travel, or similar websites you need to deal with Date pickers (calendars), and sometimes it is a little bit difficult with automation to select a specific date on the Datepicker or calendar.

Let's deal Datepickers with WebdriverIO, Please do get familiar with different kinds of popup by visiting this site: http://www.mattkruse.com/javascript/calendarpopup/

Sample date Picker

Every application uses different kinds of calendars/date pickers, so it becomes different and hard to automate with a single strategy or using a single way with automation tools.

You can not write a reusable method easily which can be used to handle all types of calendars with WebdriverIO. So we have to use the javascript instead of depending on the WebdriverIO or WebdriberIO.

Handle Calendar with WebdriverIO

Now let's try to handle the calendar popup using WebdriverIO, when we use WebdriverIO we can select the date in different ways.

The way that sometimes works
    • Find the text bar or the date pickers text field using the $ method in WebdriverIO
    • Use sendkeys to fill in the date
This method may or may not work because all the date picker text box might not accept the text
The wrong way :
    • Click the date picker textbar/button
    • Calculate the number of months from today to target(manually) and click the > icon that many times
    • Once clicks are done choose the data based on text
Above one fails when the day changes or when the target date is dynamic
Working way but not so good :
    • Click the date picker textbar/button
    • Calculate the number of the month between today and the target date using the program
    • Perform clicks on the > button based on the number of months
    • Choose the date based on text or other attributes
This way works but we cannot rely on this
Working way but not so better :
    • Click the date picker textbar/button
    • Know the target month name, now using text verify whether it is expected a month or not
    • If it is not expected month then click > icon
    • If it is the correct month then choose the date
It becomes hard when the target month is not the first time month (not within 12 months)
  • Understand the format of the date picker
  • Get the month, date, and years as a number that the date picker accepts
  • Now form the date using date, month, year
  • Force the value to the application using javascript with WebdriverIO
browser.executeScript("document.getElementById('datepicker').value='02/11/2019'");
0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions