How to Handle jQuery and Kendo Date Time Picker Using Webdriver

In this post, we’ll learn how to handle date time picker controls like jQuery date picker and Kendo date picker using Selenium Webdriver.

Many large portals from the travel and hospitality domain commonly use date time picker calendar for scheduling the hotel and flight bookings. And it is eminent for this control to work properly so that the end user shouldn’t face any trouble while booking his trip.

Hence, it is important for the UI testers to get acquaint of such web elements. They should at least know about the standard controls which sites use frequently.

It will help them in selecting the right strategy to handle controls like the date time picker calendar.

Today, we’ll cover this topic in detail and will provide a sample code for the deeper understanding. Following is the list of main points that we’ll explain in this tutorial.

Handle date time picker calendar in selenium webdriver

What is a date time picker control?

A date-time picker (aka DTP) control provides a simple and user-friendly interface for exchanging date and time information with a user. For example, you can use a DTP control for asking the user to input a date and then quickly fetch the selection. Most of the time, it appears as an input field in an HTML form. When the user selects a date, the feedback gets shown as the input’s value.

 

What are the different types of date time picker controls?

Usually, there are following two types of date picker controls used in web applications that you may need to handle in Webdriver.

  • jQuery DatePicker.
  • Kendo UI DatePicker.

jQuery date picker is a part of the open source project at jQuery.org whereas the Kendo date picker is the proprietary work by the Telerik.com. Though both these widgets offer the common functionality but some of the main differences are as follows.

  • jQuery control doesn’t have a validation of its own while the latter has it.
  • Kendo date picker is mobile compatible while the jQuery isn’t.
  • jQuery requires IE8+ while Kendo is good to work with IE7+.
jQuery and Kendo - Handle date picker in Webdriver

jQuery and Kendo – Handle date time picker in Webdriver.

 

How to automate date time picker calendar in Selenium?

The main challenge with the date picker control which most testers face is when it shows a calendar that includes dates either from a previous or the next month. There can be many versions of the same problem, e.g. when dates from both the previous and next months appear on the calendar.

Hence, we’ll provide you code to handle the three types of date time picker calendars in Selenium Webdriver.

 

1- How to handle date time picker calendar showing dates from multiple months?

Since handling multidate calendar is a bit trickier so we’ll elaborate the main steps before throwing in the full sample code.

First, you need to open the date time picker demo website then, get the date picker object using the ‘Id’ and click on it.

 

Now, add a method to handle date time picker and its calendar which shows similar date values from different months.

Multidate Calendar - Handle Date Time Picker Control

Multidate Calendar.

Here is the code to play with the multi-date calendar.

 

In the method given above, we’ve selected date of the current month with the help of a special XPath style. In the above XPath expression, we’ve tried to exclude the “other month” element which holds the next month dates.

 

If we enter a date value as 2 then, the above expression will evaluate as the one given below.

The multidate handler method would select the “2nd May” (or whatever value you gave) in the calendar and ignore the same date value of the other month.

 

Sample code – Handle jQuery date time picker to select multiple dates.

Now let’s collect all the above pieces of code together, and see the full working code below.

You can test the above code by creating a project in Eclipse and adding the above file. If you want to learn it from scratch, then read tutorials from the Selenium Webdriver Tutorials section on our blog.

 

2- How to handle jQuery date time picker control in an IFRAME?

jQuery data picker is quite popular among large no. of websites who use it to improve their user experience. It’s also very common when you need to handle the date time picker in an IFRAME.

So, we are taking on this problem in the below example. Here, the date picker appears in an IFRAME, so you need to switch to the frame first before hitting any Webdriver command. After that, you click on the date picker to open the calendar. Then, you loop through the array of date values to spot the expected date and click to select it.

At the end of the test, there is a little trick given which sets the -ve Y-coordinates and scrolls the page in the upward direction.

Sample code – Handle jQuery date time picker in IFRAME.

 

3- How to handle Kendo date time picker control in Selenium Webdriver?

Kendo is a stylish date time picker and provides much simpler interface than the jQuery control. So it was also simple to write the code for handling the Kendo date picker.

Here, the difference is in the choice of the locators. Instead of XPath, we are using the <cssSelector> and the <className> locators to access the date time picker control. Now, go through the below Selenium Webdriver example and try it out yourself.

Sample code – Handle Kendo date time picker.

 

Summary – Handle Date Time Picker Using Webdriver.

From this post, you might now know that the calendar controls come in various forms and structure a little differently from each other.

Also, with the above examples and sample code, we expect that you should be able to handle date picker controls in your automation projects.

However, if you come across any issue or need help with a new type of calendar control, then do write to us. We’ll try to respond at the earliest.

 

Keep Learning,

TechBeamers.

2 Comments

  1. akshay gundge Reply
    • Meenakshi Agarwal Reply