Handle Date Time Picker Control Using Webdriver

Many large portals who are in the travel and hospitality domain use date time picker control 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. So, it is important for a tester too as he needs to test and automate the data time picker functionality for providing an early feedback. He first has to learn how to handle date time picker in Selenium Webdriver and then prepare the test code. In this post, 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 article.

What is a date time picker control?

A date and 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 http://jquery.org/ whereas the Kendo date picker is the proprietary work by the http://www.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 handle date time picker control in Selenium Webdriver?

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.

 

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.

 

 

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.

 

 

We wish the above tutorial would have highlighted some of the key tricks to handle the date time picker calendar. And, it would be worth the efforts if you could use some of them in your Selenium Webdriver projects.

Please drop us an email if you have any query or questions to ask. We’ll try to respond to you at the earliest.

 

Keep Learning,

TechBeamers.

2 Comments

  1. akshay gundge Reply

Leave a Reply


*