Actual and Expected text not matched

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)

image

Just for kicks and giggles, I tried getText as well, and am receiving same error.

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.

Sure, but it’s still the same issue, whether the field is editable or not.

hi,

check is there readOnly flag set as true
https://www.w3schools.com/jsref/prop_text_readonly.asp
if yes, set it as false

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.

Sorry. :confused:

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.

image

value = WebUI.getAttribute(findTestObject('Audit/Page_/input_Billed_Accessorial_Code_1'), 'value')

println('The value is: ' + value)

WebUI.verifyMatch(value, 'LAPD', false)

image

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)

Precisely. There’s something going on.

Can I ask how the field is being populated? Is it pre-populated with a default value, or are you entering a value in the script?

From the screenshot, no. And if it was prepopulated, js was used to remove it.

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.

1 Like

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)?:

image

<div class="col-9  list-filter  field">
<div class="title">Customer Reference Attribute</div>
<div class="error-details-panel align-left"></div>
<input type="text" autocomplete="off" class="simple" id="1976944117">
<div class="dropdown panel dropup" style="display: none;">
<ul>
<li class="">ACCESSORY</li>
<li class="">BOL</li>
<li class="">BOL NUMBER</li>
<li class="">CASES</li>
<li class="">CUSTOMER CODE</li>
<li class="">CUSTOMER NUMBER</li>
<li class="">CUSTOMER REF</li>
<li class="">DEL ORD</li>
<li class="">GL CODE ID</li>
<li class="">IB PO</li>
<li class="">INBOUND PO</li>
<li class="">LANE NUMBER</li>
<li class="">LEDGER</li>
<li class="">LOAD NUMBER</li>
<li class="">LOB</li>
<li class="">LOCATION</li>
<li class="">MONDAYCRAB</li>
<li class="">ORDER NUMBER</li>
<li class="">OTHER NUMBER ONE</li>
<li class="">OTHER NUMBER TWO</li>
<li class="">PAK NUMBER</li>
<li class="">PALLET NUMBER</li>
<li class="">PC COUNT</li>
<li class="">PLANT CODE</li>
<li class="">PLANT LOCATION</li>
<li class="">PO NUMBER</li>
<li class="hover">QACRABONE</li>
<li class="">QACRABTWO</li>
<li class="">RA NUMBER</li>
<li class="">RAILER</li>
<li class="">Reference Number</li>
<li class="">SALES ORDER NO</li>
<li class="">SHIPMENTID</li>
<li class="">SO Number</li>
<li class="">TEST</li>
</ul>
</div>
</div>
<div class="col-9    field">
<div class="title">Value</div>
<div class="error-details-panel align-left"></div
><input type="text" autocomplete="off" class="simple" id="186750854">
    </div>

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.

1 Like

No, it just has the class for hover.

From your video, that would work! The class attribute remains the same after you’ve selected the option, and the dropdown closes.

Backgrounder:

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.

1 Like

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.

@Brandon_Hein Can you guide me with the code to look in the list for the option that has the @class=“hover” and then verify the results?