How to choose date from calender

Hello,

Our web application contain certain fields such as transaction date, complaint date where we need to choose the date from the calendar option and we cannot enter the field value manually. I have attached the screens. I understand the date pick topic was already discussed and based on that I tried some scripting in katalon that also attached.

i am getting error as below:
com.kms.katalon.core.exception.StepFailedException: Unable to execute JavaScript. (Root cause: org.openqa.selenium.WebDriverException: unknown error: Cannot read property ‘removeAttr’ of null
(Session info: chrome=71.0.3578.98)
(Driver info: chromedriver=2.43.60021

The date field for transaction is from is captured as ‘input_Transaction From_Complai’ ’

Please help me here, if it is already resolved one, please forward me the solution.

Regards,
Neethu

Hi @neethu73

Can you show us the test script and the content of the date field test object ?

Regards !

Hi @ThanhTo,

this is the script i tried.

WebUI.click(findTestObject(‘new spy/Page_eSDMS - Neethu/label_Transaction Date’))
WebUI.delay(10)
WebUI.focus(findTestObject(‘new spy/Page_eSDMS - Neethu/input_Transaction From_Complai’), FailureHandling.STOP_ON_FAILURE)
WebUI.executeJavaScript(‘$(':new spy/Page_eSDMS - Neethu/input_Transaction From_Complai').removeAttr('readonly')’, )
WebUI.delay(5)
WebUI.setText(findTestObject('new spy/Page_eSDMS - Neethu/input_Transaction From_Complai’), ‘11/01/2015’)

The content of the date field test object is as shown below

image

By default when i click on calender icon todays date will be selected. Please let me know if any further details required

Regards,
Neethu

Hi @neethu73

This line executes a javascript, but I see you are passing Katalon Test Object’s ID which the page will not understand ( Javascript is executed by the browser on the web page ). This is why the Exception says that it cannot read remoteAttr (the function) because the previous code segment is executed and returns null.

From the content of the Test Object you posted, I suggest modify it to something like:

WebUI.executeJavaScript("document.getElementById('ComplaintSubview:ComplaintForm:j-pleaseFillTheRestOfTheIdInSelectorInputHere').removeAttr('readonly')")

Let me know if it helps.

Regards !

Hi @ThanhTo,

Thanks for the replry. I tried the script as below, but katalon throws error as given below.

WebUI.executeJavaScript(“document.getElementById(‘ComplaintSubview:ComplaintForm:j_id_jsp_2028274554_63pc16InputDate’).removeAttr(‘readonly’)”)

error:

Reason:
groovy.lang.MissingMethodException: No signature of method: static com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.executeJavaScript() is applicable for argument types: (java.lang.String) values: [document.getElementById(‘ComplaintSubview:ComplaintForm:j_id_jsp_2028274554_63pc16InputDate’).removeAttr(‘readonly’)]
Possible solutions: executeJavaScript(java.lang.String, java.util.List), executeJavaScript(java.lang.String, java.util.List, com.kms.katalon.core.model.FailureHandling)
at Reactive disputes - TC-003-transaction date.run(Reactive disputes - TC-003-transaction date:46)
at

any thoughts?

Hi @neethu73

Sorry I forgot that executeJavaScript takes in 2 required arguments.

https://docs.katalon.com/katalon-studio/docs/webui-execute-javascript.html#description-

Please use the following revised line:
WebUI.executeJavaScript(“document.getElementById('ComplaintSubview:ComplaintForm:j_id_jsp_2028274554_63pc16InputDate').removeAttr('readonly')”, null)

Hi @ThanhTo,

I faced another error after trying that commnad as below:

(Root cause: org.openqa.selenium.WebDriverException: unknown error: document.getElementById(…).removeAttr is not a function

Then i tried with “removeAttribute” instead of “removeAttr” and it was successful and the java script executed fine. my next step was to set the text as 11/01/2015 for the date field. when i tried that using the script:

WebUI.setText(findTestObject(‘new spy/Page_eSDMS - Neethu/input_Transaction From_Complai’), ‘11/01/2015’)

I am getting another error as:

com.kms.katalon.core.exception.StepFailedException: Unable to set text ‘11/01/2015’ of object ‘Object Repository/new spy/Page_eSDMS - Neethu/input_Transaction From_Complai’ (Root cause: com.kms.katalon.core.webui.exception.WebElementNotFoundException: Web element with id: ‘Object Repository/new spy/Page_eSDMS - Neethu/input_Transaction From_Complai’ located by ‘By.xpath: //input[@class = ‘rich-calendar-input’ and @id = ‘ComplaintSubview:ComplaintForm:j_id_jsp_2028274554_63pc16InputDate’ and @name = ‘ComplaintSubview:ComplaintForm:j_id_jsp_2028274554_63pc16InputDate’ and @type = ‘text’ and @readonly = ‘readonly’]’ not found)
at com.kms.katalon.core.keyword.internal.KeywordMain.stepFailed(KeywordMain.groovy:36)

is that any xpath related issue?

image

Hi @neethu73

Yes, the exception indicates that the element was not found by the above XPath.

From the XPath above I suspect you are using Attributes -based locators. Please go to the test object that was unable to be located and select XPath radio button, hit save and then re-run the test again. Additionally, you may copy and paste other XPaths into the XPath selector to see if one of the XPaths resolve this issue.

Regards !

Hi @ThanhTo,

Yaayyy… that works !! . I clicked Xpath radio button and saved.

Thanks again.

1 Like

hello @ThanhTo,

i found a challenge with my object input_Transaction From_Complai’. By default the calender will set current date. So the object that i captured yesterday was having the element id ComplaintSubview:ComplaintForm:j_id_jsp_2028274554_63pc16InputDate and when i tried to run the test today, i got error as web element not found

i captured the object again, and now the id is: ComplaintSubview:ComplaintForm:j_id_jsp_255849347_63pc16InputDate and the script ran fine
with the new object.

i think its because of the default date the application set by default. Is there anyway i can execute the java script with an other value other than “document.getElementById? please suggest

image

Hi @neethu73

There are some APIs provided by your browsers to retrieve elements. You can use these functions instead of getElementById()

Regards !

Hello,

Thanks again.

Unfortunately I couldnt tried that option afterwards.

Meantime i am facing a new issue. I have another calender type where i need to capture only the month and year in the format Feb/2015 as an example. Screenshot as below.

image

image

I have tried the same java script which i tried to remove the read only attribute first and tried to set text as Feb/2015. But it failed at javascript execution itself. My code is as below.

WebUI.focus(findTestObject(‘Object Repository/Dispute mangement - Reports/Page_eSDMS - root/Page_eSDMS - root/Page_eSDMS - root/Page_eSDMS - root/td_Month’))

WebUI.executeJavaScript(‘document.getElementById('productivityComplaintReportSubview:productivityComplaintReportFomId:monthCalendarIdInputDate').removeAttribute('readonly')’,
null)

WebUI.setText(findTestObject(‘Object Repository/Dispute mangement - Reports/Page_eSDMS - root/Page_eSDMS - root/Page_eSDMS - root/input_Month_productivityCompla’),
‘Feb/2015’)

i am receiving the error as below;

executeJavaScript(“document.getElementById(‘productivityComplaintReportSubview:productivityComplaintReportFomId:monthCalendarIdInputDate’).removeAttribute(‘readonly’)”, null)

Elapsed time: 0.471s

executeJavaScript(“document.getElementById(‘productivityComplaintReportSubview:productivityComplaintReportFomId:monthCalendarIdInputDate’).removeAttribute(‘readonly’)”, null) FAILED.
Reason:
com.kms.katalon.core.exception.StepFailedException: Unable to execute JavaScript. (Root cause: org.openqa.selenium.WebDriverException: unknown error: Cannot read property ‘removeAttribute’ of null
(Session info: chrome=72.0.3626.119)
(Driver info: chromedriver=2.43.600210 (68dcf5eebde37173d4027fa8635e332711d2874a),platform=Windows NT 10.0.17134 x86_64) (WARNING: The server did not provide any stacktrace information)

Any thoughts?

Regards,
Neethu

Hi @neethu73

The error indicates that document.getElementById() returns a null object. Are you certain that the Id is correct ? It would help if you can screenshot the HTML and highlight the element you want to select.

Regards !

Hi Thanh

when i am executing WebUI.executeJavaScript(“document.getElementsByClass(‘leaveDatePicker datepic_icon form-control ng-pristine ng-valid hasDatepicker ng-touched’).removeAttribute(‘readonly’);”, null)

Caused by: org.openqa.selenium.WebDriverException: unknown error: document.getElementsByClassName(…).removeAttribute is not a function