How to handle Date Pickers in Katalon?

btw, this is how our application date picker looks like…do I need to update the paths on the custom keyword script accordingly? Pls advise

https://docs.katalon.com/katalon-studio/docs/introduction-to-custom-keywords.html#custom-keywords-in-scripting-view

Hi,

is there possibility to write date straight to the field, if not you can set the field readOnly attribute false using javascript

WebElement element = WebUI.executeJavaScript("document.getElementById('someId').readOnly=false;", true)

Thank you so much, This was so easy instead of making a custom keyword package.

After so many attempts using java script and other keywords - this is the awnser that worked for - fianlly :sweat_smile:

excuse sir,
how i use this code?
i dont understand when i using with choosen date

thanks

Hello,

what do you mean, what code,
describe clear what is your issue?
you can try this
you need to spy or record few objects, choose a day button & select day
use attributes option during record or spy

import com.kms.katalon.core.model.FailureHandling
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI


WebUI.openBrowser('')

Calendar c = Calendar.getInstance();
int monthMaxDays = c.getActualMaximum(Calendar.DAY_OF_MONTH);
println "Current month count of dates: "+monthMaxDays
int day = c.get(Calendar.DATE);
int validDays = monthMaxDays - day
println "Valid calendar days in month: "+validDays

int startDate = monthMaxDays - validDays
String strStartDate = startDate.toString()

int x = startDate;

WebUI.navigateToUrl('http://2008.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html')

List <String> l = new ArrayList<>()
String txtval = x
for (int z=0; z < validDays+1; z++) {
	
	//txtval = x++
	println txtval
	
	//select choose a date button
	WebUI.click(findTestObject('jQueryDatePicker/Page_jQuery-datePicker/Choose-date'))
	
	'Change xpath property to new value'
	LinkToSearch = WebUI.modifyObjectProperty(findTestObject('jQueryDatePicker/Page_jQuery-datePicker/day'), 'text','equals',txtval, true)
	WebUI.click(LinkToSearch, FailureHandling.STOP_ON_FAILURE)
	String date = WebUI.getAttribute(findTestObject('jQueryDatePicker/Page_jQuery-datePicker/getDate'), 'value')
    //add date to list
	l.add(date)
	
	txtval = x++
	
	WebUI.delay(2)
}

println "DEBUG list of dates: "+l
WebUI.closeBrowser()

Hi, how about if the field is disabled?

Unable to set text: Element is disabled

You can make field enabled by Javascript executor and then just do sendkeys…

Have a look complete information @ my blog:

Let me know in case of any query.

I just noticed that the element type is button. Also, I can’t find the ‘read-only’ attribute or something similar.

Here is a screenshot of the date component:

Please bear with me as I am new to test automation and does not have enough programming skills. :pray:

Using Javascript to break the normal functionality of the app for the purposes of easier test automation is not good practice…

You should handle date picker automation the same as you would handle any other widgetry on the page (i.e. identify Test Objects for the date picker elements and use them to click, send keys, etc.). I would recommend creating a Custom Keyword to handle it, especially if that very same date picker widget exists in multiple places in the app, or across other apps.

1 Like

Hi Brandon, please check my previous reply regarding my date component. Could you give me a sample custom keyword for this? Thank you.

agarcia : What Brandon_Hein is saying is correct. In general, it is good practices that you need to handle date picker by locating the element on calendar only. In Some cases, people used to take short cut especially where we need to set date which is 20 year old (ex: Date of birth) or something similar. In such case, you need to have multiple clicks depends on which type of date picker control you are having.

Now related to your case, I think we are not having any field where you can directly set data. If possible, can you share screen shot of datepicker with HTML code?

  • Priyank

@priyank.it Here is the screenshot:

hello,

check this if there is something to help you

import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import internal.GlobalVariable as GlobalVariable

Calendar c = Calendar.getInstance();
int monthMaxDays = c.getActualMaximum(Calendar.DAY_OF_MONTH);
println "Current month count of dates: "+monthMaxDays
int day = c.get(Calendar.DATE);
int validDays = monthMaxDays - day
println "Valid calendar days in month: "+validDays

int startDate = monthMaxDays - validDays
String strStartDate = startDate.toString()

int x = startDate;


int year = 2019;
int month = Calendar.FEBRUARY;
int d = 1;
c.set(year, month, d);
int maxDay = c.getActualMaximum(Calendar.DAY_OF_MONTH);
System.out.println("Max Day: " + maxDay);

// Here we want to see what is the days for february on
// a leap year.
c.set(2020, Calendar.FEBRUARY, 1);
maxDay = c.getActualMaximum(Calendar.DAY_OF_MONTH);
System.out.println("Max Day: " + maxDay);

WebUI.openBrowser('')

WebUI.navigateToUrl('https://eonasdan.github.io/bootstrap-datetimepicker/')

//select choose a date button
WebUI.click(findTestObject('Object Repository/DatePicker/Page_/select-date-picker'))
WebUI.click(findTestObject('Object Repository/DatePicker/Page_/next-month'))
WebUI.delay(1)
WebUI.click(findTestObject('Object Repository/DatePicker/Page_/prev-month'))
WebUI.delay(1)


List <String> l = new ArrayList<>()
String txtval = x
for (int z=0; z < validDays+1; z++) {
	
	txtval = x++
	println txtval
	
	'Change xpath property to new value'
	LinkToSearch = WebUI.modifyObjectProperty(findTestObject('Object Repository/DatePicker/Page_/day'), 'text','equals',txtval, true)
	WebUI.click(LinkToSearch, FailureHandling.OPTIONAL)

	String date = WebUI.getAttribute(findTestObject('Object Repository/DatePicker/Page_/data-field'), 'value')
	//add date to list
	l.add(date)
	
	//txtval = x++
	
	WebUI.delay(1)
}

println "DEBUG list of dates: "+l

WebUI.closeBrowser()

Output
DEBUG list of dates: [05/24/2019 5:27 PM, 05/25/2019 5:27 PM, 05/26/2019 5:27 PM, 05/27/2019 5:27 PM, 04/28/2019 5:27 PM, 04/29/2019 5:27 PM, 04/30/2019 5:27 PM, 03/31/2019 5:27 PM]

First of all, if you’re unfamiliar with Custom Keywords and how to use them in the first place, give this a read:

https://docs.katalon.com/katalon-studio/tutorials/create_custom_keyword.html#create-a-package

Here’s a stubbed out version of what the custom keyword might look like:

package myCustomKeywords

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

public class DatePicker {

	@Keyword
	def clickNextMonthButton() {
		WebUI.click(findTestObject("path/to/next/month/button/object"))
	}

	@Keyword
	def clickPreviousMonthButton() {
		WebUI.click(findTestObject("path/to/previous/month/button/object"))
	}

	@Keyword
	def clickDay(final String day) {
		WebUI.click(findTestObject("path/to/day/object", ['day' : day]))
	}

	@Keyword
	def clickTodayButton() {
		WebUI.click(findTestObject("path/to/today/button/object"))
	}
}

Your job would be to create Test Objects that identify the appropriate elements (the next/previous month buttons, the days in the calendar, etc.) for each of these methods.

Hi @Brandon_Hein, I’m having a problem trying to select a specific day.

Below will select day 5 even I specified ‘10’:

image

image

When I try to update the object’s properties to this, it will select day 1:

Can you share the HTML for the days? You will need to write a custom XPath with a parameter in this case.

hi,

change your object property in run time and use text equals property

'Change object property to new value'
    txtval = '27'
    LinkToSearch = WebUI.modifyObjectProperty(findTestObject('Object Repository/DatePicker/Page_/day-object'), 'text','equals', txtval, true)
    WebUI.click(LinkToSearch, FailureHandling.OPTIONAL)