How to handle Date Pickers in Katalon?

Hi @Brandon_Hein, I’m sorry but I can’t apprehend why I should use a method to return the current month/year :sweat_smile:

But anyway, the logic that I have mentioned on this post, I was able to make it work.

xpath::

//div[@class = ‘DayPicker-Caption’ and (text() = ‘${MonthYear}’ or . = ‘${MonthYear}’)]

Keyword:

@Keyword
def specificMonthYear(final String MonthYear){
WebUI.getText(findTestObject(‘div_DayPicker-Caption_specificMonthYear’, MonthYear))
}

Script:

while (WebUI.verifyTextNotPresent(‘January 2019’, false, FailureHandling.OPTIONAL)) {
CustomKeywords.‘myCustomKeywords.DatePicker.clickPreviousMonthButton’()
}

CustomKeywords.‘myCustomKeywords.DatePicker.clickDay’(‘25’)

By the way, thanks for this link.
Page Object Model
I’ll check this out.

1 Like

Because these methods should, in general, do the smallest chunk of work possible.

This is particularly true with the page object model. The idea behind that model is that your classes (Custom Keywords) should simply act as an interface between the script and the application. In other words, the methods should allow the script writer to do everything that a manual user could do; no more, and no less.

Having the method just return the value means that you can reuse that method for other things, not just the problem you are trying to solve for right now.

In either case, you’ve got a good Custom Keyword to work with, so if you’re comfortable with it, no need to change it. You may find in the future that you want to use the month/year value for something else, in which case you can refer back to this post, which may make more sense at that time :slight_smile:

2 Likes

Thank you @Brandon_Hein for the explanation. Yes, I will surely get back to this post when that time comes :slight_smile: Thanks again!

I am having a problematic time with a datepicker calendar that I am trying to do some automated testing for. I tried using setText on the input field that is holding the dates, but the datepicker calendar overwrites it with the current date for the From field and the next day for the To field.

Here is a screen shot as to what I am referring to.

I am at a complete loss as to handle selecting, for example, July 4th as the From date and July 14th as the To date.

Hi @dustin.lennon

Does the date picker gets triggered by the Set Text or its appearance is part of the flow you’re trying to test ? When does the date picker overwrites the text ? The moment you’re done setting text or the moment the date picker is triggered ? Is there a rationale for this behavior, it could be the developer’s mistake

Cheers !

@ThanhTo I found a work around to handle it. The input box when you click on it triggers the date picker. My solution was to use JavaScript to set the text for the fields and wait a few seconds for my page to recognize it before continuing on with the test case.

Trying to deal with the calendar, I believe, would have been impossible. Trying to do a setText on the input field wasn’t working because the date picker overwrote my text with the current day and the following day.

1 Like

Hi all,

Katalon Studio 7.0, which allows you to handle Date Picker in Web Recorder, will be available very soon. Please stay tuned!

In the meantime, let’s have a look at this Release Note for lists of new features and enhancement in the upcoming version.

Hi Siva1 can you solve this issue can you tell me how you set date in it using katalon

hi,

what I would try
locate your datepicker elements by css locators

and will use WebUI.click((findTestObject(“object-path”)) method to select correct date

In Katalon 7 we can use WebUI.senKeys(TestObject to, String value)

This code is working
import org.openqa.selenium.JavascriptExecutor
def driver = DriverFactory.getWebDriver()
((JavascriptExecutor) DriverFactory.getWebDriver()).executeScript(“document.getElementById(‘datetimepicker’).value=‘05/05/2020’”)

Hi @Beo,
By using data-driven I want to pick the date from my CSV file while picking am getting invalid formate how can I handle it could you please help me.

Try to enter the date manually and then use the same format as what was entered. Note the date you are getting from your CSV file will be a String, not a Date, so make sure you have the correct data type variable.

Hi,
Below tutorial on date picker

May be i have solution this https://demos.telerik.com/kendo-ui/datetimepicker/index
and try this https://github.com/Riyansya/katalonDatepicker , I hope it can be a solution…

def today = new Date()

day = (today + 20)

def formattedDate = day.format(‘d-MMMM-yyy’)

println(formattedDate)

futureDate = formattedDate.toString()

String futureDay = (futureDate.split(’-’)[0])
println(futureDay)
String futureMonth = (futureDate.split(’-’)[1])

String currentMonth = WebUI.getText(findTestObject(‘Object Repository/theMonthInCalendar’))

while (!(currentMonth).equalsIgnoreCase(futureMonth)) {
WebUI.click(findTestObject(‘Object Repository/RezDesk/Page_New Trip Request/span_Next’))
currentMonth = WebUI.getText(findTestObject(‘Object Repository/RezDesk/Page_New Trip Request/month’))

}

WebDriver driver = DriverFactory.getWebDriver()

List el = driver.findElements(By.xpath("//a[@class=‘ui-state-default’]"))
for(WebElement e :el) {
if(e.getText().equals(futureDay)) {
e.click()
break;
}

}
This worked for me.

This worked like a charm. Thanks for posting this.

1 Like