How to handle Date Pickers in Katalon?

Try this xpath:

//div[@class=‘DayPicker-Day’ and text()=‘${day}’]

Hi, this didn’t work :frowning:

@Keyword
def clickDay(final String day) {

  WebUI.click(findTestObject("Object Repository/div_DatePicker_DayTest", ['day' : day]))

}

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

Hi, this didn’t work. Just want to ask, why do I have to change the text value to ‘27’? Thank you.

hello you.

‘27’ cause it was valid day to select in my example, past days not able to select :slight_smile:

1 Like

Hi @Brandon_Hein

I used Spy Web and followed your given xpath, and it worked! :slight_smile:

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

My dilemma now is how I can select a specific month/year. My date picker doesn’t have a button for month/year, only next and previous button. So I’m thinking to just add a condition to execute the step (clicking on previous or next button) until the expected element text (month/year) is present since the date picker always displays the current month/year. For example I want to select January 2019 but the current month/year is May 2019 so I have to click on the previous button to select it.

Would this work or does the logic even correct? :grin: If this is possible, what condition should I use? Thanks in advance!

Custom Keyword:

@Keyword
def clickNextMonthButton() {
WebUI.click(findTestObject(“Object Repository/span_Today_DayPicker-NavButton DayPicker-NavButton–next”))
}

@Keyword
def clickPreviousMonthButton() {
WebUI.click(findTestObject(“Object Repository/span_Today_DayPicker-NavButton DayPicker-NavButton–prev”))
}

@Keyword
def verifykMonthYear(final String monthyear) {
WebUI.verifyElementText(“Object Repository/div_DayPicker-MonthYear”, monthyear)
}

@Keyword
def clickDay(final String day) {
WebUI.click(findTestObject(“Object Repository/div_DayPicker-Day”, [‘day’ : day]))
}

xpath:

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

Good to hear you got it working!

As for the month/year, yes your idea is a sound one. If I were you, instead of adding a “verifyMonthYear” method, I would add a method that simply returns the current month/year, and then handle the “click until the correct month/year” logic in your script:

@Keyword
def getCurrentMonthYear() {
    return WebUI.getText(findTestObject(“path/to/monthYear/object”))
}

A good xpath would be:

//div[@class=‘DayPicker-Caption’]/div

The benefit of doing things this way is that if your method simply returns the value, that value can be used for more than just the problem you are trying to solve right now (clicking until the appropriate value is displayed). In other scripts, you may want to assert the value, use the value later in the script, etc.

FYI, I know you mentioned that you have limited programming experience, but what you are doing by creating this Custom Keyword in this way is actually a very powerful programming practice called the Page Object Model. If you use this same idea for other parts of your application, then you are doing yourself a MASSIVE favor going forward. Your scripts will be easier to write and maintain in the future.

2 Likes

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