Hari Charan
Katalon Apprentice
05/12/2017

How to handle Date Pickers in Katalon?

How can I handle date pickers using Katalon? Here's my scenario
I am supposed to select 22-12-1991 in date picker,
Url of datepicker http://demos.telerik.com/kendo-ui/datetimepicker/index

I wanted it to handle dynamically, so that I can pass value '22-12-1991' from Testcase only
In selenium I used to handle with List & Hashmap but too much of code. Is there any optimized way to handle this in Katalon?

Please take a look at the url of date picker

Upvote
Quote

Comments

  • Vinh Nguyen
    Katalon Moderator
    05/13/2017
    Hi there,

    The simplest way to handle date picker from my point of view is just.... type the date into textbox, that will simplify a lot of choosing dates  step, e.g

    WebUI.setText(findTestObject('Page_Kendo\txt_DateField'), '22-12-1991' )

     
    Upvote
    Quote
  • Hari Charan
    Katalon Apprentice
    05/13/2017
    What if the field is readonly, then setText wont work. How can we handle this with custom coding?
    Upvote
    Quote
  • Vinh Nguyen
    Katalon Moderator
    05/14/2017
    Oh that's quite another simple case, just inject and execute javascript code to pass in value in this case. The below code will resolve non-readonly and readonly field.

    def driver = DriverFactory.getWebDriver()
    ((JavascriptExecutor)driver).executeScript("arguments[0].value=arguments[1]", textbox, '22-12-1991')

    Thanks
    Upvote
    Quote
  • Hari Charan
    Katalon Apprentice
    05/14/2017
    Can't we try other way? For few date pickers we can't pass value using javascript executor as well. I was expecting a solution with List collection & itetrations
    Upvote
    Quote
  • Vinh Nguyen
    Katalon Moderator
    05/14/2017
    Hi there,

    I think javascript is widely used in most of the current web applications. The point is date picker object can be very different between web applications, even between pages within the sane application.

    I can try to create a custom keyword to select a date based from your example send a reply to you soon, but I it will not always work for other date pickers due to different implementations.

    Thanks
    Upvote
    Quote
  • Hari Charan
    Katalon Apprentice
    05/15/2017
    Agreed, but using Javascript method we cannot confirm that datepicker is really functional as expected. We may set value like document.getElementById('DOB').value="2222-12ss-1991" but from web interface it's not possible to set that value.

    That's the reason I would suggest one to handle Datepickers with custom coding rather than using Javascript
    Upvote
    Quote
  • ChewJin Koh
    Katalon Apprentice
    08/18/2017
    Hi Vinh,

    I am having the same challenges on Datepicker as per this thread. Could i ask

    whether you can provide me the custom keyword as mentioned previously"I can try to create a custom keyword to select a date based from your example send a reply to you soon, but I it will not always work for other date pickers due to different implementations"
    further i was experimenting with your recommendation but not getting the date injected. could you explain the argument textbox please        def driver = DriverFactory.getWebDriver()
    ((JavascriptExecutor)driver).executeScript("arguments[0].value=arguments[1]", textbox, '22-12-1991')thanks
    Upvote
    Quote
  • Gowri Kumar Annapantula
    Katalon Apprentice
    01/14/2018
    Hi,
    Any luck with the selection of date picker. Please let me know if there is any update.
    Thanks in Advance.
    Upvote
    Quote
  • Vinh Nguyen
    Katalon Moderator
    01/15/2018
    Well handling date picker is super complicated if you want to do it using custom keyword. Luckily I've found a custom keyword from the original author of this topic (Hari) which will greatly help you guys:

    	@Keyword
    public static void handleDatepicker(TestObject calender, String exp_Date, String exp_Month,
    String exp_Year)throws Exception{
    String expDate = null, calYear = null,datepickerText=null,minYear=null,maxYear=null;
    int expMonth = 0, expYear = 0;
    WebElement datePicker;
    List<WebElement> noOfDays=null,noOfMonths=null,noOfYears=null;
    boolean dateNotFound = true;
    List<String> monthList = Arrays.asList("None","Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
    "Aug", "Sep", "Oct", "Nov", "Dec");
    def driver = DriverFactory.getWebDriver()
    WebElement SelectCalender = WebUiCommonHelper.findWebElement(calender, 20);
    // JavascriptExecutor executor = ((JavascriptExecutor)driver);
    // executor.executeScript("arguments[0].click();", SelectCalender);
    SelectCalender.click()
    // Set your expected date, month and year.
    expDate = (exp_Date);
    expMonth = Integer.parseInt(exp_Month);
    expYear = Integer.parseInt(exp_Year);

    WebElement datePicker_Heading1 =(driver).findElement(By.xpath("//div[@days']/table/thead/tr[1]/th[2]"));
    WebDriverWait wait = new WebDriverWait(driver,10);
    wait.until(ExpectedConditions.elementToBeClickable(datePicker_Heading1));
    datePicker_Heading1.click();
    //executor.executeScript("arguments[0].click();", datePicker_Heading1);
    WebElement datePicker_Heading2 =(driver).findElement(By.xpath("//div[@months']/table/thead/tr[1]/th[2]"));
    wait.until(ExpectedConditions.elementToBeClickable(datePicker_Heading2));
    datePicker_Heading2.click();

    while (dateNotFound) {
    WebElement datePicker_Heading3 =(driver).findElement(By.xpath("//div[@years']/table/thead/tr[1]/th[2]"));
    wait.until(ExpectedConditions.visibilityOf(datePicker_Heading3));
    datepickerText =datePicker_Heading3.getText();
    String[] datepickerYear = datepickerText.split("-");
    minYear =datepickerYear[0];
    maxYear = datepickerYear[1];
    // If current selected month and year are same as expected month
    // and year then go Inside this condition.
    if((expYear >= Integer.parseInt(minYear)) && (expYear<=Integer.parseInt(maxYear)))
    {
    datePicker = (driver).findElement(By.xpath("//div[@years']/table"));
    noOfYears = datePicker.findElements(By.xpath("//span[contains(@class,'year')]"));
    firstloop:
    for (WebElement year : noOfYears) {
    // Select the date from date picker when condition
    // match.
    if (year.getText().equalsIgnoreCase((String)exp_Year)) {
    year.click();
    Thread.sleep(1500);
    datePicker = (driver).findElement(By.xpath("//div[@months']/table"));
    noOfMonths = datePicker.findElements(By.xpath("//span[@class='month']"));
    Thread.sleep(1000);
    for (WebElement month : noOfMonths) {
    System.out.println(" the expected month in int  is : "+expMonth);
    System.out.println(" the expected month is : "+monthList.get(expMonth));
    System.out.println(" the Actual  month is : "+month.getText());
    if ((monthList.get(expMonth)).equalsIgnoreCase(month.getText())) {
    month.click();
    datePicker = (driver).findElement(By.xpath("//div[@days']/table"));
    noOfDays = datePicker.findElements(By.xpath("//td[@class='day']"));
    Thread.sleep(1500);
    for (WebElement cell : noOfDays) {
    if (cell.getText().equalsIgnoreCase(expDate)) {
    cell.click();
    break firstloop;
    }
    }
    }
    }
    }
    // else{
    //
    // throw new Exception()
    // }
    }
    dateNotFound = false;
    }else if (expYear > Integer.parseInt(maxYear)) {
    WebElement Next =(driver).findElement(By.xpath("//div[@years']/table/thead/tr[1]/th[@class='next']"));
    if(Next.getAttribute("style").equalsIgnoreCase("visibility: visible;"))
    {// Click on next button of date picker.
    Next.click();
    }else {
    throw new Exception("This is exception")
    }
    }
    // If current selected month and year are greater than expected
    // month and year then go Inside this condition.
    else if (expYear < Integer.parseInt(minYear)) {
    WebElement Previous =(driver).findElement(By.xpath("//div[@years']/table/thead/tr[1]/th[@class='prev']"));
    if(Previous.getAttribute("style").equalsIgnoreCase("visibility: visible;"))
    {
    // Click on previous button of date picker.
    Previous.click();
    }else{
    throw new Exception("This is exception")
    }
    }
    }
    }
    Upvote
    Quote
  • Fernanda Lopez
    Katalon Apprentice
    01/16/2018
    Hi,
    I have other kind of datepicker , ui-datepicker. 

    The field 205 is read only: 

    the xpath for the calendar i attach in this message.  I would like to know how I should handle this component class?


    Upvote
    Quote
  • Sukanya Kulkarni
    Katalon Apprentice
    02/20/2018
    Hi Hari / Alex,

    How do I integrate the custom keyword DatepickerHandler.groovy into my Katalon test project? Can I get step by step instructions to do that?
    Upvote
    Quote
  • Nikita Channawar
    Katalon Apprentice
    04/24/2018
    Hi,
    I have other kind of datepicker , ui-datepicker. 

    The field 205 is read only: 

    the xpath for the calendar i attach in this message.  I would like to know how I should handle this component class?


    Please use below code....


    def intyear = findTestData('Give your Data File Path').getValue('Year', 1)
    def intmonth = findTestData('Give your Data File Path').getValue('Month', 1)
    def intdate = findTestData('Give your Data File Path').getValue('Day', 1)

    WebUI.selectOptionByLabel(findTestObject('Give your Data File Path'), intmonth, false)
    WebUI.selectOptionByValue(findTestObject('Give your Data File Path'), intyear, false)
    WebDriver driver2 = DriverFactory.getWebDriver()
    WebElement tb =driver2.findElement(By.xpath(".//*[@div']/table/tbody"))
    List<WebElement> hr = tb.findElements(By.tagName("tr"))

    List<WebElement> tcells
    for(int i=0;i<hr.size();i++)
    {
         tcells= hr.get(i).findElements(By.tagName("td"))

         for(int j=0;j<tcells.size();j++)
         {
               //System.out.println(tcells.get(j).getText());
               if(tcells.get(j).getText().toString().equals(intdate))
               {
                    tcells.get(j).click()
               }
         }
    }

    Upvote
    Quote
  • Nikita Channawar
    Katalon Apprentice
    04/24/2018
    Hi Hari / Alex,

    How do I integrate the custom keyword DatepickerHandler.groovy into my Katalon test project? Can I get step by step instructions to do that?
    Once you created your Custom Keyword then follow below step to use created custom keyword in your script 

    1) Write CustomKeyword. when you will provide .(dot) then katalon will provide list of keywords you have created and select your DatepickerHandler.groovy.

    For Example: CustomKeyword.DatepickerHandler.handleDatepicker(TestObject calender, String exp_Date, String exp_Month,String exp_Year)

    Upvote
    Quote
  • Siva
    Katalon Apprentice
    05/24/2018


    I would like to know, how should I handle this Date picker. 

    Upvote
    Quote
  • desastre
    Katalon Apprentice
    05/24/2018
    Agreed, but using Javascript method we cannot confirm that datepicker is really functional as expected. 

    I think what you say only makes sense if you're testing the datepicket component itself. If it's just part of the workflow, it should be ok to directly manipulate the textfield.
    Upvote
    Quote
  • Pearl
    Katalon Apprentice
    06/13/2018
    edited June 13

    I would like to know how to handle date picker & how to fetch date value from Excel.

    Upvote
    Quote
Sign In or Register to comment.