Hi,
I have a input form where I need to select appointment date and time. Date field has a date picker and fields are not text fields. I was able to set the date but for time, it is not working. Below is the details about the form and my script.
Looking for the potential solution.
Thanks.
Script:
WebUI.click(findTestObject(‘Object Repository/Admin/Sessions/sessionDate’))
WebUI.setText(findTestObject(‘Object Repository/Admin/Sessions/sessionDate’), ‘22/07/2023’)
WebUI.sendKeys(findTestObject(‘Object Repository/Admin/Sessions/sessionDate’), Keys.chord(Keys.ENTER))
Above lines worked for setting the date. But same could not work for time component
WebUI.click(findTestObject(‘Object Repository/Admin/Sessions/essionStart_time’))
WebUI.setText(findTestObject(‘Object Repository/Admin/Sessions/sessionStart_time’), ‘09:00 AM’)
WebUI.sendKeys(findTestObject(‘Object Repository/Admin/Sessions/sessionDate’), Keys.chord(Keys.ENTER))
Does the time GUI appear when you “click” on the Start time textbox? If it does, don’t click before you try to setText. Just setText and then get a pathway to perhaps one of the labels, like “Start time” and then click there (any label or textbox that does not activate the GUI), like I have done below. If it’s like ours, the GUI will still appear, but we get the chance to put the text into the textbox before the GUI overlays it.
WebUI.setText(findTestObject('Object Repository/Admin/Sessions/sessionStart_time'), '09:00 AM')
WebUI.sendKeys(findTestObject('Object Repository/Admin/Sessions/sessionDate'), Keys.chord(Keys.ENTER))
// now click on somewhere the GUI is not and have it disappear
WebUI.click(findTestObject('Object Repository/Admin/Sessions/label_sessionStart_time'))
While you are at the Start time label, you can check on the “required” field as well. 
WebUI.verifyElementAttributeValue(findTestObject('Object Repository/Admin/Sessions/label_sessionStart_time'), "class", "required", 10)
1 Like
Thank for your response @grylion54 but this did not work.
It throws an error “Invalid element state” to which I assume the field gets activated upon clicking on it and after the on click event the GUI appears.
Adding the error here:
Caused by: org.openqa.selenium.InvalidElementStateException: invalid element state
07-21-2023 12:21:56 PM setText(findTestObject(“Object Repository/Admin/Sessions/sessionStart_time”), “09:00 AM”)
Elapsed time: 0.848s
Unable to set text ‘09:00 AM’ of object ‘Object Repository/Admin/Sessions/sessionStart_time’ (Root cause: com.kms.katalon.core.exception.StepFailedException: Unable to set text ‘09:00 AM’ of object ‘Object Repository/Workplace/Sessions/sessionStart_time’
Without looking at a web page in action on my PC, it is very difficult for me to think about your problem.
Is your target URL a public one to the Internet? If so, please disclose the URL to us. Then we would be able to look into the implementation detail of the target web page and we would be able to reproduce your problem on our side.
Which JavaScript library date picker do you use? Would you tell us which one?
I suppose the library provides a public demo site open to the Internet which anybody can see and play on. If we can play on the demo site, then we would be able to try any solution on our side.
My project URL is not public. But I can surely say we are using ant design components for date and time picker.
TimePicker - Ant Design
We have added a property of readonly to the time picker. and it only typing text (time) is not working in this field.
What is the property of readonly? Could you direct me to the URL of the documentation page?
TimePicker - Ant Design this is the url. If you inspect the element in normal state, i.e. before clicking on it, you’ll be able to see.
I made the following test case:
import org.openqa.selenium.Keys
import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
TestObject makeTestObject(String id, String xpath) {
TestObject tObj = new TestObject(id)
tObj.addProperty("xpath", ConditionType.EQUALS, xpath)
return tObj
}
String url = 'https://ant.design/~demos/components-time-picker-demo-basic'
WebUI.openBrowser('')
WebUI.setViewPortSize(400, 600)
WebUI.navigateToUrl(url)
TestObject inputTimePicker = makeTestObject("inputTimePicker", "//div[@id='root']//div[@class='ant-picker-input']/input[1]")
WebUI.verifyElementPresent(inputTimePicker, 10)
// need to click the element, otherwise will fail
WebUI.click(inputTimePicker)
// this worked for me.
WebUI.setText(inputTimePicker, '12:34:56')
WebUI.delay(1)
WebUI.takeScreenshot("./ant-time-picker_1.png")
WebUI.sendKeys(inputTimePicker, Keys.chord(Keys.ENTER))
WebUI.delay(1)
WebUI.takeScreenshot("./ant-time-picker_2.png")
WebUI.delay(3)
WebUI.closeBrowser()
This worked fine. I got 2 PNG files as evidence.
ant-time-picker_1.png
ant-time-picker_2.png
This worked for me. I found no problem with ant-time-picker.
I do not see why @kirankukreja51 has got his problem. There must be a reason but I can’t see it as his Application Under Test is private; unable for me to get access to.
Sorry my bad. The entire form is from ant design library but his particular time picker is from - https://mui.com/x/react-date-pickers/time-picker/ you can check the mobile variant of it.
I have tried below javascript code, which seemed to be working to set the time values. But as soon as I go ahead, the values in time fields get deleted.
//Locate the read-only field using the placeholder attribute
String readOnlyInputLocator = 'input[placeholder=\\\'Select start time\\\']' // change 'Your Placeholder' to your actual placeholder
//The value to set
String valueToSet = '09:00 AM'
//Use JavaScript to set the value
WebUI.executeJavaScript(((('document.querySelector(\'' + readOnlyInputLocator) + '\').value = \'') + valueToSet) + '\'', null)
readOnlyInputLocator = 'input[placeholder=\\\'Select end time\\\']' // change 'Your Placeholder' to your actual placeholder
//The value to set
valueToSet = '02:30 PM'
//Use JavaScript to set the value
WebUI.executeJavaScript(((('document.querySelector(\'' + readOnlyInputLocator) + '\').value = \'') + valueToSet) + '\'', null)
This code sets the value in the fields but it gets erased when I move to next steps.
I do not understand the \\\ here.
You may want to study Groovy how to code a String: The Apache Groovy programming language - Syntax
You should check what value the variable readOnlyInputLocator is assigned with.
String readOnlyInputLocator = 'input[placeholder=\\\'Select start time\\\']' // change 'Your Placeholder' to your actual placeholder
println "readOnlyInputLocator=${readOnlyInputLocator}"
When I ran this, I got the following output in the console:
2023-07-25 23:29:55.142 INFO c.k.katalon.core.main.TestCaseExecutor - --------------------
2023-07-25 23:29:55.146 INFO c.k.katalon.core.main.TestCaseExecutor - START Test Cases/tripleBackSlashes
readOnlyInputLocator=input[placeholder=\'Select start time\']
2023-07-25 23:29:56.078 INFO c.k.katalon.core.main.TestCaseExecutor - END Test Cases/tripleBackSlashes
The locator input[placeholder=\'Select start time\']
looks odd to me.
Thank you @kazurayam for constantly being engaged in this thread.
The above code mentioned by me anyways doesn’t serve the purpose. It does not set the value i the fields. I am looking for a better way to deal with material UI date picker. https://mui.com/x/react-date-pickers/time-picker/
Any help would be very much appreciated.
Was this locator valid for you or not? Have you checked it?
I looked at the demo page.
The react-time-picker componet requires me to position the mouse pointer on each of hh, mm, am/pm individually. I don’t think that the WebUI.setText keyword can cope with this sophisticated JS component.
A possible solution would be calling the API of the component in JavaScript. But I am not willing to hack around it further.
I would quit. I hope somebody capable of JavaScript may get interested in this.
