# Get text of React field/element **URL:** \ **Category:** Web Testing\ **Tags:** katalon-studio\ **Created:** [October 18, 2019, 7:24pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931 "2019-10-18T19:24:19Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![mlilly](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@mlilly](https://forum.katalon.com/u/mlilly)\ **Post date:** [October 18, 2019, 7:24pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/1 "2019-10-18T19:24:19Z")
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](https://europe1.discourse-cdn.com/katalon/original/2X/6/6228f0be3d34e0dd97a5ed9b66b6be91feadb641.png) WebUI.verifyElementText(findTestObject(‘Audit/Page\_/AT\_Billed\_Gross’), ‘66.50’) HTML is: ![image](https://europe1.discourse-cdn.com/katalon/original/2X/d/d1f15c3cd8fd1d99cc0b56ed542dcfa24dd3b0bd.png) Error I’m receiving is: 2019-10-18 15:21:07.269 ERROR c.k.k.core.keyword.internal.KeywordMain - ❌ 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. ---
**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\ **Post date:** [October 18, 2019, 7:56pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/2 "2019-10-18T19:56:09Z")
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. > **[\[WebUI\] Get Attribute](https://docs.katalon.com/katalon-studio/docs/webui-get-attribute.html)** > > Description Get the attribute of a web element. Parameters Param Param Type Mandatory Description to TestObject Required Represent a web element attribute String Required Name of the attribute flowControl FailureHandling... ---
**Author:** ![mlilly](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@mlilly](https://forum.katalon.com/u/mlilly)\ **Post date:** [October 18, 2019, 8:18pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/3 "2019-10-18T20:18:43Z")
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) ---
**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\ **Post date:** [October 18, 2019, 8:42pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/4 "2019-10-18T20:42:18Z")
Pretty close: ```javascript 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 `` element has an attribute called `value` (along with many other possibilities). The following example has three attributes, `id`, `value` and `class`: `` ---
**Author:** ![mlilly](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@mlilly](https://forum.katalon.com/u/mlilly)\ **Post date:** [October 21, 2019, 2:41pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/5 "2019-10-21T14:41:44Z")
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! 🙂 ---
**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\ **Post date:** [October 21, 2019, 2:52pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/6 "2019-10-21T14:52:12Z")
> [@mlilly](#): > > I feel like I’m so close! You are. Let’s take a step back… You posted a screenshot of your HTML `` 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](http://forum.katalon.com/t/how-to-the-browser-developer-tools-f12-devtools/34329/) to investigate that element. Bring up the problem page in the browser. Open the DevTools. Type this into the browser console: ```auto $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 `` 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 🕶 ---
**Author:** ![mlilly](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@mlilly](https://forum.katalon.com/u/mlilly)\ **Post date:** [October 21, 2019, 2:59pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/7 "2019-10-21T14:59:51Z")
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 ![image](https://europe1.discourse-cdn.com/katalon/original/2X/c/ce9de3ae340970a817743588474ca82bdd589f77.png) Screenshot below shows me getting the actual value in the console and it is correct. (Ignore that error above the value…) ![image](https://europe1.discourse-cdn.com/katalon/original/2X/6/66142af3896eaef2c98754f562819b0a083cf408.png) ---
**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\ **Post date:** [October 21, 2019, 3:09pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/8 "2019-10-21T15:09:13Z")
That’s good news. Slowly but surely we’re getting there. Tell me what this does when you run it in Katalon: ```javascript 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`. ---
**Author:** ![mlilly](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@mlilly](https://forum.katalon.com/u/mlilly)\ **Post date:** [October 21, 2019, 3:28pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/9 "2019-10-21T15:28:04Z")
Well I’m not sure if adding that _println_ code was supposed to make it work, but it works now! :)😃 Thank you SO MUCH!! ![image](https://europe1.discourse-cdn.com/katalon/original/2X/1/1573543a55a432b2632e93998ba8d6f173d7071a.png) 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)_ ![image](https://europe1.discourse-cdn.com/katalon/original/2X/b/b942dbd8fbecf7cc3a04b78ea880480ad33daa68.png) ---
**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\ **Post date:** [October 21, 2019, 3:36pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/10 "2019-10-21T15:36:15Z")
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… > [@mlilly](#): > > I’m not sure if adding that _println_ code was supposed to make it work, but it works now! 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 😕 🙂 Regarding the new error: ```javascript 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... ``` ---
**Author:** ![mlilly](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@mlilly](https://forum.katalon.com/u/mlilly)\ **Post date:** [October 21, 2019, 4:02pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/11 "2019-10-21T16:02:16Z")
All is working as intended, thank you again so much for your quick responses! ---
**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\ **Post date:** [October 21, 2019, 4:12pm UTC](https://forum.katalon.com/t/get-text-of-react-field-element/34931/12 "2019-10-21T16:12:03Z")
Closed on October 21, 2019, 4:12pm UTC