Categories

Netsparker Web Application Security Scanner

Handling Date Time Picker using Selenium

In this chapter, we are going to discuss the how to handle date and time picker using Selenium Webdriver on HTML5 web pages. HTML5 has an inbuilt dateTime-local attribute for date-time input form field as shown below.

 

HTMLPage

 

We can get the date time input field with the help of following HTML5 code.

<html>
<head>
<title>Handling Date Time Picker using Selenium</title>
</head>
<body>


<form name="datetimedemo" method="post">


<h2>Handling Date Time Picker using Selenium</h2>


Enter Date &amp;amp; Time: <input type="datetime-local" name="datetimefield"/>
</form>

</body>
</html>

 

Explanation of HTML Code

Handling DateTime Picker using Selenium Webdriver

  • HTML Page has its usual style of defining tags such as HTML, head, title, and body.
  • Within the body, tag defines the form tag which has only one web element as input with the name of that element as datetimefield.
  • This input element is of type datetime-local, this is the new type that is added to HTML5 with which we can define the date and time in the input field. Moreover, it has a pop-up calendar that pops up when we click on the drop-down button as shown above.
  • Save this code in a file on C drive as Date-Time-Demo.html, such that the local path of this HTML should be C:/selenium_demo/Date-Time-Demo.html.

Our HTML test code for Date and Time picker is ready to use. Now we are going to prepare a Selenium WebDriver test script in JAVA to populate Date and Time into these fields. We are going to Chrome driver to test this web page.

Following is the test script that uses Chrome WebDriver to invoke Chrome browser session.

package seleniumpackage;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

//import org.openqa.selenium.Keys;
public class HandlingDateTimePicker {
public static void main(String[] args) {

//declaration and instantiation of objects/variables
System.setProperty("webdriver.chrome.driver", ".//chromedriver.exe");
WebDriver driverGC = new ChromeDriver();
String baseWebUrl = "file:///C:/selenium_demo/Date-Time-Demo.html";
driverGC.get(baseWebUrl);
WebElement webElement = driverGC.findElement(By.name("datetimefield")); 
webElement.sendKeys("00201606121256PM");

//closing Google Chrome Browser
driverGC.close();

//Exiting the System
System.exit(0);
}
}

 

Explanation of the test script

    • Declare the required imports for this JAVA code. We need to import classes as shown below.
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
    • Next, we have to define the System properties for chrome driver exe As explained in the past chapters, in order to run the test on the Chrome browser using Selenium WebDriver we need to place the chromedriver.exe file at the build path.
System.setProperty("webdriver.chrome.driver", ".//chromedriver.exe");
WebDriver driverGC = new ChromeDriver();
    • Immediately after setting up the system properties, instantiate ChromeDriver as shown above.
    • Define the base URL which is the path where we have placed the HTML file under test i.e. C:/selenium_demo/Date-Time-Demo.html.
    • Invoke and load the web page using the above base URL with the help of ChromeDriver.
    • Next, locate the Date time picker web element on the web page using the findElement method of the ChromeDriver class as shown below. Since we know the name of the input web element, therefore, we are locating this element by using name method of the By class.
WebElement webElement = driverGC.findElement(By.name("datetimefield")); 
webElement.sendKeys("00201606121256PM");
    • We can populate date time picker field by simply using the sendKeys method of the WebElement that was returned in the previous step.
    • Lastly, we close the current Chrome browser session by using the close method of the ChromeDriver class as shown below.
driverGC.close();
    • Finally, we can exit the current test by using exit method of the System class as shown below.
System.exit(0);

Output

Following is the output that will be obtained when we run this test script as a Java program. In the output we can observe that date and time has been successfully populated in the Date and Time picker form field on the Web Page.
chrome
Let’s try to populate date and time picker on an example website. Below is the website link that can use to populate date and time.

http://demos.telerik.com/kendo-ui/datetimepicker/index

Following is the Java code to populate date and time on the above example website date-time picker field.

package seleniumpackage;

import java.util.List;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class TimePickerExample {
public static void main (String args[]) throws Exception{
String dateAndTime ="24/08/2016 4:35 AM";
WebDriver driver = new FirefoxDriver();
driver.get("http://demos.telerik.com/kendo-ui/datetimepicker/index");

//button that open calendar
WebElement webElement = driver.findElement(By.xpath("//span[@aria-controls='datetimepicker_dateview']")); webElement.click();

//Split the date and time into an array
String datetime[] = (dateAndTime.split(" ")[0]).split("/"); Thread.sleep(1000);
List<WebElement> listAllMonth = driver.findElements(By.xpath("//div[@id='datetimepicker_dateview']"
+ "//table//tbody//td[not(contains(@class,'k-other-month'))]"));
listAllMonth.get(Integer.parseInt(datetime[1])-1).click(); Thread.sleep(1000);
List<WebElement> listAllDate = driver.findElements(By.xpath("//div[@id='datetimepicker_dateview']"
+ "//table//tbody//td[not(contains(@class,'k-other-month'))]"));
listAllDate.get(Integer.parseInt(datetime[0])-1).click();

//click on the time picker button
WebElement selectTime = driver.findElement(By.xpath("//span[@aria-controls='datetimepicker_timeview']")); selectTime.click();

//get list of times
List<WebElement> timeElement = driver.findElements(By.xpath("//div[@data-role='popup'][contains(@style,'display: block')]//ul//li[@role='option']"));
dateAndTime = dateAndTime.split(" ")[1]+" "+dateAndTime.split(" ")[2];
for (WebElement element: timeElement) {
if(webElement.getText().equalsIgnoreCase(dateAndTime))
{
element.click();
}
}
}
}

 

Explanation of Code

    • Declare the required imports as shown above.
    • Instantiate Selenium WebDriver for Firefox.
    • Get the URL for demo Website i.e. http://demos.telerik.com/kendo-ui/datetimepicker/index
    • Next, use the findElement method for driver class to open the calendar with which we are going to populate date and time as shown below. We are using XPath method of the By class to locate the date time picker web element as shown below.
//click on the time picker button
WebElement selectTime = driver.findElement(By.xpath("//span[@aria-controls='datetimepicker_timeview']")); selectTime.click();
    • Now we are picking up only the month selection part on to the popup calendar and then only the date selection part. It is nothing but the list of web elements. Again, this could be possible with the help of XPath method of the By class. Once we are able to catch hold the month selector and date selector web elements list, it will be easier to click on a particular item to choose that value into the date time picker field.
List<WebElement> listAllMonth = driver.findElements(By.xpath("//div[@id='datetimepicker_dateview']"
+ "//table//tbody//td[not(contains(@class,'k-other-month'))]"));
listAllMonth.get(Integer.parseInt(datetime[1])-1).click(); Thread.sleep(1000);
List<WebElement> listAllDate = driver.findElements(By.xpath("//div[@id='datetimepicker_dateview']"
+ "//table//tbody//td[not(contains(@class,'k-other-month'))]"));
    • Next, we are using the findElement method of the driver class to open the calendar with which we are going to extract the list time web elements as shown below. We are using XPath method of the By class to locate the date time picker web element and the list of time web elements as shown below.
//click on the time picker button
WebElement selectTime = driver.findElement(By.xpath("//span[@aria-controls='datetimepicker_timeview']")); selectTime.click();

//get list of times
List<WebElement> timeElement = driver.findElements(By.xpath("//div[@data-role='popup'][contains(@style,'display: block')]//ul//li[@role='option']"));
  • At this point, we can access all possible web elements on the date time picker web element. Now, we are simply applying the coding logic to populate the current date and time into this field.

Output

Run the above test script as Java Program. Following the steps as in the code, it will first instantiate the Firefox WebDriver then pick up the date time picker field and all of the month, date and time web elements list as a selector to populate required date and value into the field. When the test completes its execution, we can see the current date and time that got populated on the test web page as shown below.

This is one of the complex scenarios to populate the date and time picker value using Selenium WebDriver. There could be even more complex scenarios that are possible. The only thing that we need to remember is the accessibility of the web elements or the list of web elements, no matter which type of locator you use. You can use name method, id method, search by tag or CSS, XPath, etc. As long as the web element is located correctly, we can use the appropriate data populating method such as sendKeys, click, etc., to populate the required data into the input web elements. If we are able to access the web element and populate the test data, we can automate and test that page as a whole.

Conclusion

In this chapter, we have learned to access date and time picker web element and how to populate date and time data into this web element.


Stay updated, Subscribe Us


If you are not regular reader of this website then highly recommends you to Sign up for our free email newsletter!! Sign up just providing your email address below:

Enter your email address:

Check email in your inbox for confirmation to get latest updates Software Testing for free.

Happy Testing!!!

1 comment to Handling Date Time Picker using Selenium

  • Shreya

    Thanks for the detailed explanation.

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>