Hello, Katalon Community.
A Katalon Studio new user is here. I am trying Katalon Studio to evaluate if we want to go for a subscription. And I have a question here…
I wanted to test a front-end application built with React using Virtualized Table. One of the steps is to click on a table row (double click) so the to be opened. It is working well manually. However, there is no reaction when Katalon Studio tries to click. Virtualized Table cannot be ‘inspected’ to find an element xPath. I guess, it is not able to find a path to an element it needs to click on.
Could you please advise a solution?
Thank you.
1 Like
Katalon Studio has the Web Spy. Have you given it a try to see if you can create a pathway (although, it may be a poor one) to your Virtualized Table? Without a pathway to an object, you’re hooped.
Additionally, if you are a first time user, you will likely use the low-code solution, but you will need to add “wait” statements to allow time for your page to form and your objects to appear.
WebUI.waitForPageLoad(10)
WebUI.waitForElementVisible(...)
You should also search this forum for React applications and KS. I believe others have suggested to find another tool instead of Selenium based ones, which KS is.
Thank you for the answer. What spy catches - does not work, its not a correct xpath. Yes. I added statements but did not help.
Another option is to use Dev-Tools to see if you can get a pathway. Hit the F12 key and then Open Dev-Tools. Use the top left icon in the new window to select your object and see the HTML underneath. Anytime you want to know about the HTML of an object, select this tool (or use SHIFT+CTRL+C) and click on your object.
You will have to make the pathways yourself using xpath or css.
Maybe like:
xpath = //div[@aria-label="grid"]//div[@aria-rowindex="1"]/div[@aria-colindex="1"]
1 Like
If we are to discuss productively, we need to share a URL of “a front-end application buit with React using Vitualized Table” in action.
Let me present you an example URL. Open the following URL in your browser. In there we can find a React Vitualized Table in action.
https://bvaughn.github.io/react-virtualized/#/components/Table
@olegnsk54
I would ask you to look into the above sample URL and describe your concern again on this sample URL so that others can try the same operation as you did. If you could provide enough info to us, we might be able to discusss each other based on a concrete testbed.
In my humble opinion, Selenium-based tools (incluing Katalon Studio) does not fit well with React. You might waste your time trying to find a way how to test React Apps with Katalon.
If I were to test a React app, I would use Playwright or Puppeteer in TypeScript. See for example.
1 Like
As Katalon is based on WebDriver protocol, if the element you are trying to find and double click is not found. You will receive a WebDriver error in the event log and a failed test.
React (as other modern) dev. frameworks may not be 100% compatible with WebDriver. I have faced similar challenges with other technologies. But you can always run JavaScript code using we WebUI.executeJavascript keyword. maybe you can script a JS function to double click on an element using document.getElementByID or something similar.
1 Like
No. WebUI.executeJavascript won’t help us much to work with asynchronous JavaScript such as React app.
@Elly_Tran wrote
Katalon’s executeJavaScript method does not inherently support handling JavaScript Promises directly.
React works on top of the JavaScript Promises. Your code executed through a call WebUI.executeJavascript(String js)would never be able to interact with React directly.
You would need to invent a trick that @Elly_Tran suggested. The trick could be very tedious.
I would rather like to use Playwright in TypeScript, which can natively interact with React.