Get text of React field/element

We use React on the back end of our web application for some parts. I have to check if the text of an element corresponds to a given text. I know how to use the verifyElementText() or getText() methods, but because of React, I believe i have to go deeper to get this data for certain elements.

Code I’m using to verify if the data in the element AT_Billed_Gross is the value of 66.50 is below:

image

WebUI.verifyElementText(findTestObject(‘Audit/Page_/AT_Billed_Gross’), ‘66.50’)

HTML is:

Error I’m receiving is:

2019-10-18 15:21:07.269 ERROR c.k.k.core.keyword.internal.KeywordMain - :x: Actual text ‘’ and expected text ‘66.50’ of test object ‘Object Repository/Audit/Page_/AT_Billed_Gross’ are NOT matched. (Root cause: com.kms.katalon.core.exception.StepFailedException: Actual text ‘’ and expected text ‘66.50’ of test object ‘Object Repository/Audit/Page_/AT_Billed_Gross’ are NOT matched.

No, there’s no need to go deeper, that’s a regular HTML input element. What has you foxed is the naming of some of the WebUI APIs … it could have been easier/better if getText and setText were opposites of each other. They are not.

You need WebUI.getAttribute() and pass in "value" as the name of the attribute you want to retrieve.

Hi Russ, thanks for the quick response…I’m not sure what you mean by “pass in “value” as the name of the attribute you want to retrieve”.

Here’s the code for what I think you mean…

attribute = WebUI.getAttribute(findTestObject(‘Audit/Page_/AT_Billed_Gross’), ‘value’)

WebUI.verifyMatch(attribute, ‘66.50’, false)

Pretty close:

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

Most HTML elements (like div, input, span, etc) have inner values stored in a kind of variable called attributes. The HTML <input ...> element has an attribute called value (along with many other possibilities). The following example has three attributes, id, value and class:

<input id=“my-input” value=“russ” class=“mlilly”>

Hi Russ,

Thank you for the guidance, it’s definitely helping! The code you gave me did pass the test to find the value, however I’m still unable to verify that it matches.

If I use:

String value = WebUI.getAttribute(findTestObject(‘Audit/Page_/AT_Billed_Gross’), ‘value’)

WebUI.verifyMatch(attribute, ‘66.50’, false)

I get the following error: groovy.lang.MissingPropertyException: No such property: attribute for class: Script1571331700332

So then I thought maybe I needed to change attribute to value in the second line of code:

String value = WebUI.getAttribute(findTestObject(‘Audit/Page_/AT_Billed_Gross’), ‘value’)

WebUI.verifyMatch(value, ‘66.50’, false)

And then I still get the error:

Caused by: com.kms.katalon.core.exception.StepFailedException: Actual text ‘’ and expected text ‘66.50’ of test object ‘Object Repository/Audit/Page_/AT_Billed_Gross’ are NOT matched.

Seems it still isn’t pulling the actual text. I feel like I’m so close! :slight_smile:

You are. Let’s take a step back…

You posted a screenshot of your HTML <input> element. I’m working under the assumption that element is the element we actually need to address. If you’re convinced it’s the correct element, let’s try something designed to prove we have the correct element. We’ll be using the browser console to investigate that element.

Bring up the problem page in the browser. Open the DevTools. Type this into the browser console:

$0.value

That is relying on you selecting the correct element in the HTML Inspector, just like you did in your screenshot (notice in your screenshot it says “$0” at the end of the line).

If we have the correct <input> element, then the value stored in the element will be printed in the console.

If the value is wrong, then we’re looking at the wrong element.

Let me know how it goes. For bonus points, post a screenshot :sunglasses:

Ok, I gave that a whirl…seems I am on the correct element.

Screenshot below shows me clicking on the element and the HTML code

Screenshot below shows me getting the actual value in the console and it is correct. (Ignore that error above the value…)

That’s good news. Slowly but surely we’re getting there.

Tell me what this does when you run it in Katalon:

String value = WebUI.getAttribute(findTestObject(‘Audit/Page_/AT_Billed_Gross’), ‘value’)
println "The value is: " + value

Check the output in the Katalon Console. If it’s empty/null, add a delay before the call to getAttribute.

Well I’m not sure if adding that println code was supposed to make it work, but it works now! :):smiley:

Thank you SO MUCH!!

One slight issue though…I’m trying to verify multiple elements like this one, so once the code worked, I went ahead and set Katalon to check all the other elements I wanted to check. But it is giving me errors upon starting the test case. (Let me know if I need to add this to a new ticket.)

String value = WebUI.getAttribute(findTestObject('Audit/Page/AT_Billed_Gross’), ‘value’)_

println('The value is: ’ + value)

WebUI.verifyMatch(value, ‘66.50’, false)

String value = WebUI.getAttribute(findTestObject('Audit/Page/AT_Billed_NetLH’), ‘value’)_

println('The value is: ’ + value)

WebUI.verifyMatch(value, ‘66.50’, false)

String value = WebUI.getAttribute(findTestObject('Audit/Page/AT_Billed_Accessorials’), ‘value’)_

println('The value is: ’ + value)

WebUI.verifyMatch(value, ‘166.50’, false)

String value = WebUI.getAttribute(findTestObject('Audit/Page/AT_Billed_Total’), ‘value’)_

println('The value is: ’ + value)

WebUI.verifyMatch(value, ‘239.47’, false)

String value = WebUI.getAttribute(findTestObject('Audit/Page/AT_Audit_Accessorials’), ‘value’)_

println('The value is: ’ + value)

WebUI.verifyMatch(value, ‘60.00’, false)

String value = WebUI.getAttribute(findTestObject('Audit/Page/AT_ToPay_Accessorial’), ‘value’)_

println('The value is: ’ + value)

WebUI.verifyMatch(value, ‘60.00’, false)

This is a borderline case whether to split this into another topic. For now, let’s proceed.

It’s often tempting to run… when we’re barely learning to walk. And that’s where we are right now. So…

No, it has NO EFFECT, at least no intentional effect. There is some other reason why it is working. As to why, that’s a question for you: after all, you are in charge of the code :confused: :slight_smile:

Regarding the new error:

String value // declare this variable ONCE, then...

value = WebUI.getAttribute(blah, 'value')
WebUI.verifyMatch(value, '66.50', false)

value = WebUI.getAttribute(blahblah, 'value')
WebUI.verifyMatch(value, '166.50', false)

// etc...

All is working as intended, thank you again so much for your quick responses!

1 Like