Calendar PopUp / DatePicker WebdriverIO

Table of content

• What is calendar Popup / Date Picker
• Handle Calendar with WebdriverIO

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.

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

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

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

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

Recommended way :

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