Testing REACT elements with Katalon Studio

Hey there!

I’ve been loving Katalon, very friendly to use! My companies website has many parts built with React. Things like check-boxes, table entries, and small buttons (carots, arrows, page nums, etc) seem to NEVER work. Even by switching to click the xpath, CSS. I know I’m not alone in this, does anyone have a good resource for how to deal with React elements specifically in Katalon?

I know about JEST, Cypress, and other tools - but would really love to keep using Katalon for this website because most of it does cooperate.

Thanks all

Pick out one example that “seems to NEVER work” and send…

1 - The line of test code that does not work. Some of the preceding lines will help, too.
2 - A description of the method you use to access the failing element (TestObject? CSS? XPATH?)
3 - Copies of any errors you get.

In addition, show a reasonable amount of the surrounding HTML for the failing element and any screenshots you think might help. And ANYTHING else you think might be pertinent. Folks around here are very helpful, but we need a few clues to get going.

React is a framework that builds webpages. A webpage is 99% HTML/JavaScript and CSS. What it does may seem like magic but what it produces is an HTML document. The vast majority of HTML pages are testable. B)

Thanks for the reply - @Russ Thomas

Here’s an example of errors trying click page “2” element on a table built with react in my Katalon Project

WebUI.click(findTestObject(‘Page_emp-p-test/a_2’))

first attempt:

Unable to click on object ‘Object Repository/Page_emp-p-test/a_2’ (Root cause: org.openqa.selenium.ElementNotVisibleException: element not visible

by xpath:

Unable to click on object ‘Object Repository/Page_emp-p-test/a_2’ (Root cause: com.kms.katalon.core.webui.exception.WebElementNotFoundException: Web element with id: ‘Object Repository/Page_emp-p-test/a_2’ located by ‘By.xpath: id(“55c19210-759b-11e8-9a62-2da7d76e883c”)/div[@class=“k-pager-wrap k-grid-pager k-widget k-floatwrap”]/ul[@class=“k-pager-numbers k-reset”]/li[3]/a[@class=“k-link”]’ not found)

HTML at for the pager element.

A bit new to Katalon, but have tried even more than this - maybe there are layers I am not seeing, but it seems to be buried and have been trying for a while to get this, and not many people online have many answers that work for me just yet. Suggestions would be appreciated.

Best,
Mike

Your xpath expression

id("55c19210-759b-11e8-9a62-2da7d76e883c")/div[@wrap k-grid-pager k-widget k-floatwrap"]/ul[@numbers k-reset"]/li[3]/a[@link"]

this looks syntactically wrong.

How about this alternative?

//div[@data-role="pager"]/ul[1]/li[3]/a

However this expression may select multiple elements in the target HTML. In order to refine the expression, so that it specifically selects “2”, we need to see a bit wider range of the target HTML code.

hello @kazurayam, @Russ_Thomas,

I try to mean my issue with React element:

1)I need get the element dropDown because I want element “AN” (fore example)

image1057×477 20.1 KB

2)following the structure of the element:

image1898×766 78.1 KB

3)after I copy xpath:
/html/body/div[4]/div[3]/div/div/div[2]/div[3]/div/div/div/div[1]/div/div/input

4)on katlon Studio 7.9.0, I to create a new element object ‘testobject’

image1024×690 17.9 KB

5)I wrote this script
WebUI.selectOptionByValue(findTestObject(‘testobject’), ‘AP’, false)

6)run the TC, I got following issue

image1869×258 28.9 KB

surely I am wrong to build the testObject object, Suggestions would be appreciated.

Best Regards

@AndyCapp

Partial screenshot is not enough. We need to see the whole HTML source of your target page from the 1st line to the very end.

We need to read the HTML source and “think” deep to find the effective locator. Tools like Katalon Spy/Recorder or Chrome’s XPath finder would’t help much to deal with compilcated HTML documents generated by the javascript frameworks like React.

Is the URL of your page public? If so, tell us the url. If not, save the whoe HTML into a text file and share it here, please. Otherwise impossible to find appropriate locator for the “AN” node.

FileHTMLbody.txt (49.7 KB)

fileHTMLHead.zip (31.8 KB)

image1618×748 46.3 KB

Thank you for the files, but I am sorry, I am not able to handle them.

I could not reproduce the live web page alive on my PC using those page fragments. Your web page seems to be too complicated, too sophisticated and too fragile.

If you disclose the live URL of the page and let me get access to it directly with web browser, then I would be able to study the page document. Without the live URL disclosed, I can’t.

I found the following HTML snippet:

<input aria-invalid="false" autocomplete="off" type="text" class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd" aria-autocomplete="both" autocapitalize="none" spellcheck="false"
                                                               value="AN"
                                                               aria-describedby="mui-autocomplete-20716-helper-text" id="mui-autocomplete-20716">

If you want to select this very <input> element with value attribute with value AN, then the XPath may work,

//input[@value="AN"]

But I could not test it

Thanks, @kazurayam, unfortunately, the page cannot be public, it to use in-network of the customer.

Thanks for your comments, it is very much appreciated indeed

best regards
AndyCapp