How to handle Date Pickers

I have to select date from the date picker while executing the script.
How can I handle this?

This is a frequently asked question.

Please make a seach in this forum with keyword “Date Picker” to find some previous posts relevant to your case.

Do you really have to do it?

Are you a developer of the data picker GUI. Do you want to test that GUI library in JavaScript? — I guess, you aren’t.

I guess, you want to test a web app that employs someDate Picker libaray. In this case, you would be happy if you could enter a date string (yyyyMMdd) into the target HTML element. You do not need to interact with the GUI of Date Picker.

You just want to set a text of date (‘2022/09/10’ for example) into a <input type="text"> element. You can just call WebUI.setText(testObjOfTheDateFiled, '2022/09/10'). You do not even need the “Calendar Keywords” to do that.

A working example is here :Sample WebUI tests project (Healthcare sample) | Katalon Docs

The target page has a Date Picker

You can read the script source that sets a date by a single line of code:

  WebUI.setText(findTestObject('Page_CuraAppointment/txt_VisitDate'), '27/12/2016')

The sample does not use any external keyword.

If you are a member of the development team who develops the Date Picker libary, then you may seriously need to interact with GUI. Then your team must have some well-established testing framework for JavaScript to test the JavaScript codes. You should use it. Don’t be bothered with KS.

If you use the setText() method that @kazurayam suggests, you may still get the calendar GUI to appear. What I do then is click on a text field either above the GUI or click on the label for the date field. This allows the calendar GUI to disappear and not prevent you from entering fields that are overlaid by (beneath) the calendar GUI.

WebUI.setText(findTestObject('myPage/input_NeededDate'), yesterdayDate)'myPage/textarea_Notes'))
WebUI.verifyElementAttributeValue(findTestObject('myPage/input_NeededDate'), 'value', yesterdayDate, 10)


I tried above solution but it is not working.
Date field is Read-only and I am getting error “Caused by: org.openqa.selenium.InvalidElementStateException: invalid element state”

Because of policy restrictions, can not share the code/html.
I have attached the date picker which we are using. This field is Read only. User can not enter the date manually. Need to select from the calendar only.

Then, I can no more help you, sorry.

WebUI.setText(fieldInputArea, new Date().format(‘dd/MM/yyyy’))

If you right click on the calendar GUI you will be able to review the HTML and search for your date like in a web table.

How to handle Web Tables | Katalon Docs

You may have to create several objects to represent parts of the calendar GUI, such as the right and left arrows, the year and the month name (e.g. SEP).

Secondly, you can parse a given date into year, month and date and set it on your GUI.

I put a sample of this on this forum some time back. Note that the HTML may likely be different but you should be able to adjust it to your calendar GUI.

I tried below to set the date
WebUI.executeJavaScript(‘document.getElementsByClassName(“mat-form-field-label-wrapper ng-tns-c37-27”)[0].innerText=“02-02-2032”’,

but this is throwing error :
Caused by: org.openqa.selenium.JavascriptException: javascript error: Cannot set properties of undefined (setting ‘innerText’)

However, when I am trying to execute this line alone it is working fine but with the entire script it is throwing error.

@kazurayam, Pls find below the sample.