Tuesday, 30 August 2016

Handle Kendo UI jQuery Date picker using Selenium WebDriver

Many applications are using Kendo UI jQuery Date picker for selecting date. So selecting date picker using selenium is a not a difficult task.

In this post, I will explain how we can select date from Kendo UI jQuery DatePicker using Selenium WebDriver.
Please find the below sample code for the same.

Sample code:


                                                                                                 
import java.util.Arrays;
import java.util.Calendar;
import java.util.List;
import java.util.concurrent.TimeUnit;
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.firefox.FirefoxDriver;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

public class DatePickerKendo {

    public WebDriver driver;
   
    @BeforeClass
    public void setup(){
    System.setProperty("webdriver.chrome.driver","E:/sudharsan/SeleniumJars/chromedriver.exe");
      driver = new ChromeDriver();
      driver.manage().window().maximize();
         //driver.get("file:///C:/Users/sudharsana/Desktop/kendo.html");
         driver.get("http://demos.telerik.com/kendo-ui/datetimepicker/index");
         driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
    }
    @Test
    public void selectDate() throws Exception{
    List<String> months = Arrays.asList("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    String expDate="15/06/1995";
       //click on calendar button
        driver.findElement(By.cssSelector("span.k-icon.k-i-calendar")).click();
       Thread.sleep(2000);
       //click on center button
        driver.findElement(By.xpath("//div[@class='k-header']//a[contains(@class,'k-nav-fast')]")).click();
        //splitting date
        String Date[]=expDate.split("/");
        String expDay = null;
       
     
        expDay=Date[0];
       
        String expMonth=Date[1];
        String expYear = Date[2];
       
        System.out.println(Calendar.getInstance().get(Calendar.YEAR));
       
     
        if(Integer.parseInt(expYear)<Calendar.getInstance().get(Calendar.YEAR)){
            int count=Calendar.getInstance().get(Calendar.YEAR)-(Integer.parseInt(expYear));
        for(int i=0;i<count;i++){
             driver.findElement(By.cssSelector("span.k-icon.k-i-arrow-w")).click();
        }
        }
       
         else if(Integer.parseInt(expYear)>Calendar.getInstance().get(Calendar.YEAR)){
             int count1=Integer.parseInt(expYear)-Calendar.getInstance().get(Calendar.YEAR);
        for(int i=0;i<count1;i++){
        driver.findElement(By.cssSelector("span.k-icon.k-i-arrow-e")).click();
        }
       
        }
           Thread.sleep(1000);
           driver.findElement(By.linkText(months.get(Integer.parseInt(expMonth)-1))).click();
           Thread.sleep(1000);
           driver.findElement(By.linkText(expDay)).click();

        }

}

6 comments:

  1. is possible to pick multiple kendo datepicker at the same page?

    ReplyDelete
    Replies
    1. Yes it is possible. You have to identify unique locators for clicking on date pickets and use the same logic

      Delete
  2. problem with above code. why because, i gave the date 20, month 10.
    the above code removed the Zero's and selected date 2,month 1.
    there is a problem selecting correct date


    by saro.

    ReplyDelete
    Replies
    1. Thanks for your comments and i will check and update the Code ASAP

      Delete