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 some times it is a little bit difficult with automation to select a specific date on the Datepicker or calendar.

Let's deal Datepickers with protractor; Please do get familiar with different kinds of popups 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 a protractor. So we have to use the javascript instead of depending on the protractor or WebdriberIO.

Handle Calendar with Protractor

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

The way that sometimes works

    • Find the text bar or the date pickers text field using element method in protractor
    • Use sendkeys to fill 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 text bar/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

Best IDE for Protractor

Working way but not so good :

    • Click the date picker text bar/button
    • Calculate the number of months between today and the target date using program
    • Perform clicks on the > button based on 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 text bar/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)

Selenium vs. Protractor

  • Understand the date 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 the protractor
browser.executeScript("document.getElementById('datepicker').value='02/11/2019'");
						

Ways to find the WebElement

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions