How To Handle Different Types Of Calendars In Selenium: Part 1

Hello Folks,

In this post we will see a very important topic “Handling calendar in Selenium”.

  • We always see some input boxes where we need to select date from calendar widget. When we click on that input box, a calendar widget gets open and we need to select proper date value from that widget.
  • You can see different types of calendar widget varying across applications. For example:

MakeMyTrip.com:

Jquery Type 1:

Jquery Type 2:

  • Since every application uses different types of calendars, so it becomes little confusing and difficult to Selenium people to select date from it. You can not write a reusable method easily which can be used to handle all types of calendar.
  • Examples shown above are mostly used in applications. So I will explain handling of above calendars in this post. You can use the same logic for other types of calendar as well.

 



Understanding Calendar HTML:

There are so many types of calendar but there are something common across all types. We must know those common points about calendars.

  • Maximum calendars are a table which consists of rows and tables. Generally week will be created with “tr” and dates will “td”.

 

  • “Class” attribute for “td” tag gives more information about if date is past, current , weekend or upcoming. Refer below image, You will see the class name is different.
  • Red marked column is past date.
  • Yellow marked column is current date.
  • Green marked column is week-end.
  • Blue marked column is future date.

  • Every td will have attributes which is “data-month” and “data-year” which gives information about month and year to which td belongs. For example: “data-month” as 2 means day belongs to March month.

Handling MakeMyTrip’s calendar:

Logic:

  1. We will take Year, Month and day from user.
  2. First we will get year in first month(left hand side). If year is not matching with desired year, we will click on next till we get desired year. For example: If I need to select 2018, and current year is 2017, we will keep clicking of next button till we get year as 2018.
  3. Once we get desired year, we need to get desired month. We will retrieve month value from left most month and if month is not matching with desired month, we will keep clicking on Next button till we get desired month. For example: If current month is September and desired month is November. We will click on Next button till we get month November in left most month.
  4. The major step is finding valid dates of desired month. We should filter past dates and dates of other months. We should also filter empty date columns.
  5. Java has a number for each month of year which is equal to actual position of month-1. For example: Java month number for March will be 3-1=2.
  6. Using java month number, we can filter dates from other months.

Java Code:

Output:

You can customize and add more validation for proper valid dates. But whatever you want to do, above logic will help you in selecting date.

In upcoming posts, we will see other two types of calendar.

If you have any doubt, feel free to ask here.

If you like my posts, please like, comment, share and subscribe.

#ThanksForReading

#HappySelenium

14 thoughts on “How To Handle Different Types Of Calendars In Selenium: Part 1”

  1. I’ve a calendar automation task related with my company product. The previous date are disabled and previous month arrow is also disabled. I’ve written a code for current and future months. But i’m stuck with previous date part and I’ve to show an error if past date is selected. Can you help me ??

  2. Hi Amod,
    i need your help to handle one calendar,where start Date always take current Date end end date will taken any of the date within 15th day from the starting date. could u give u email id so i will send the screenshot. i tried may of the ways but i’m not getting solution. so check this and help me to resolve this issue please.

  3. How to handle a calendar which is not designed using table and doesn’t have a constant attribute value to find the element. Only class attribute is available but i.e common for all the dates in calendar and by using class attribute the entered date value is getting reversed.

  4. Hi Amod,
    I executed your code.
    Till the year value does not match the next button is clicked but it i clicked till the last month i.e Jun 2019.
    I changed the year input value to 2019.
    It does not select the month value & day value after that.
    Can you please have a look.

    1. Hi Vaibhav,
      I have shared logic to select a date from calendar. Since I have used some public application, locator might be changed and result may not be expected. You can use debugger and check where its failing and also put your code in comment to help others.
      Thanks.

      1. Hi Amod,
        Locators for Makemytrip are the same.
        For below code:
        if(!currentYear.equals(year))
        {
        do{
        driver.findElement(By.xpath(“(//span[text()=’Next’])[1]”)).click();
        }while(!driver.findElement(By.xpath(“//div[@class=’ui-datepicker-title’]/span[@class=’ui-datepicker-year’]”)).getText().equals(year));

        }

        It executes the code but navigates to last month i.e Jun 2019 after which next element is disabled.
        Now as it does not find next element enabled it does not perform any operation.

        My query is after checking if the year value matches or not ( which is 2019 in my case) it should go to check the month value but it does not.It keeps clicking on Next element/button.

        As per my understanding the logic of your code is right but i’m not able to understand why doesnt it go to next if loop after it finds the matching year value in calendar control.

          1. Hi Amod..My mistake i was setting Month value to ‘September 2019’ which was not accessible after ‘June 2019’.
            The code executes properly & appropriate date is selected.

          2. Ohh.. Great..but you can add extra mechanism to handle negative scenarios like this

  5. It doesnt work as you suggested here. I was trying to select from and to in makemytrip but that also doesnt work.
    Select FromDD=new Select(driver.findElement(By.xpath(“//input[@id=’hp-widget__sfrom’]”)));
    FromDD.selectByIndex(5);

  6. Hi, I observed one calendar on a website which is not inspect-able. Please let me know how to handle calendar which is not inspect-able ( unable to locate date /month/year to handle this calendar ).

Leave a Reply

Your email address will not be published. Required fields are marked *