I’ve been able to successfully get the value of a field in the past either using getText or getAttribute, based on whether it was an HTML or content stored inside a div.
I cannot seem to get the value of this particular field. Since it is an input field (HTML), I am using getAttribute, but am still receiving the error Actual text ’ ’ and expected text “QACRABTWO” are not matched. (I’m pulling what the expected value should be from a data file called CRABs.)
Unable to verify match between actual text ‘’ and expected text ‘QACRABTWO’ (Root cause: com.kms.katalon.core.exception.StepFailedException: Actual text ‘’ and expected text ‘QACRABTWO’ are not matched
value = WebUI.getAttribute(findTestObject('Add Bill/Page_/input_Customer_Reference_Attribute'), 'value')
println('The value is: ' + value)
WebUI.verifyMatch(value, findTestData('CRABs').getValue(1, 1), false)
Right, so as you can see in the HTML screenshot, that input element does not contain any text and/or attribute that reflects the text that is visible in the GUI. This is common behavior for apps that are using a React front end (shadow DOM). With these apps, input field values are typically not visible in the HTML until AFTER the form is submitted. If at all possible, you should wait to validate the field until that point.
@Russ_Thomas I know you have some more knowledge around shadow DOM stuff, any input here?
The form has been submitted, but it goes into an Edit capability after the form is submitted and then you can just Save it again.
We are using React, and Russ Thomas helped me with this in the past in a previous post, however, this is a different field than the one he helped me with. The difference is the field Russ helped me with was NOT editable at any point.
Actually, very little actual testing experience with it.
However, I’ll say this. The browser (and its tools) doesn’t know/care much about virtual dom. I’m surprised (actually, concerned) at the screenshots showing such a significant difference between the rendered state and the dump “inspection” state. If anything, this reminds me more of the kind of trickery performed by CodeMirror and its like.
No, that doesn’t help much, I know. But to go further and proceed toward a solution, at minimum I’d need to see a lot more HTML - ideally, have the page in front of me.
So here’s an example just like the one I’m questioning that is an editable field on the same page after the form is submitted and I can get the value of the field using getAttribute. So I’m not sure why this one isn’t working.
value = WebUI.getAttribute(findTestObject('Audit/Page_/input_Billed_Accessorial_Code_1'), 'value')
println('The value is: ' + value)
WebUI.verifyMatch(value, 'LAPD', false)
2020-03-16 10:34:38.137 DEBUG testcase.AUD06 - Modify Bill Data 4 - 159: value = getAttribute(findTestObject(“Audit/Page_/input_Billed_Accessorial_Code_1”), “value”)
2020-03-16 10:34:38.414 DEBUG testcase.AUD06 - Modify Bill Data 4 - 160: println("The value is: " + value)
The value is: LAPD
2020-03-16 10:34:38.415 DEBUG testcase.AUD06 - Modify Bill Data 4 - 161: verifyMatch(value, “LAPD”, false)
Right, just thinking that when I’ve seen this in the past, it was because I was using JS to populate data in the form, which wasn’t firing any events (keyup, keydown, etc.). If I remember, I was able to get the actual DOM to change by entering data with selenium keypresses, which DOES fire events.
This page is a customer bill, and I have a test case that is manually entering the data into all the fields and once it is saved, then certain fields are checked that the data is what was actually entered. This field is one that I want checked.
It would be the same aspect if I manually entered a customer bill at my computer, and then Katalon ran a test that checked that I entered data correctly in some of the fields after it was saved.
The field has dropdown options that are being pulled from another table (I think) and then I select the option I want and then manually enter a value in the adjacent field.
Oh, in that case, this input element is not actually acting as a “text” field (even thought it has an @type=‘text’), and is more akin to a <select> element. Can you show us what’s in this element (from your screenshot)?:
And when you select an option, does the <li> element for that option change in any way? I see that it gets an @class=“hover” when you are mousing over, but it may get something else if it’s selected.
They are mimicking an HTML datalist which would normally (by standards) use option elements. Why would they choose to deviate from the standards? Because option elements cannot be styled.
So the idea would be to locate the selected option by looking in that list for the option that has @class=“hover”, then getting the text of that element for use in your validation.
I don’t know why it is coded the way it is, but I do know that the “selections” for this field are from another table. For instance, in the Customer Reference Attribute field, I am making a selection from the dropdown. The selections are whatever is entered on thepage in below screenshot, which certain users can add to as needed. The items on this page are the selections available in the dropdown.
