Newest Katalon 7.1.0 does not work with react form hooks

Product Forums Katalon Recorder
1

Hi,

I have an issue with the newest recorder(7.1.0), but was able to record it and replay it when using an older extension - katalon recorder 6.0.3 or Selenium IDE.

Even with the same scripts or re-recording, the textbox input disappears (typing/send keys) when submitting or do not detect onChange events. I have also tried using runscript/extension scripts to try trigger the onChange dispatch Event manually but it does not work.

example of a react form hooks template from code sandbox that it failed on: klqlh.csb.app/

Would it be possible to either direct me to your official site with the workable extension like 6.0.3 or provide a solution? the github the version seems to be only be up to 5.6-beta and it feels buggy with un-closable popup tips

1 Like
2

Hi there, and thanks for posting in the Katalon community! :hugs:

To help you faster, please review our guide on Katalon Recorder here: Katalon Recorder overview | Katalon Docs. Double-checking the steps and configurations might resolve the issue.

If the doc doesn’t help, feel free to provide more details, and a community member will assist you soon. Thanks for being a part of our community!

Best,
Elly Tran

3

Workarounds for Katalon 7.1.0

  1. Trigger Synthetic Events Manually:
    Use JavaScript execution in Katalon to bypass React’s synthetic event limitations:

javascript

// Replace selector with your React input element
const input = document.querySelector('input[name="email"]');
input.value = 'test@example.com';
input.dispatchEvent(new Event('input', { bubbles: true, composed: true })); // Mimic React's onChange
  1. Use Static Selectors:
    Avoid dynamic XPath/CSS selectors. Tag React elements with data-testid attributes:
<input data-testid="email" onChange={...} />

Then target them in Katalon:

css=[data-testid="email"]
  1. Adjust Katalon Settings:
  • Enable Wait for page load and Delay between commands (e.g., 1s) in settings to account for React’s async re-renders.
  • Disable “Smart Wait” (it often conflicts with React’s state updates).
1 Like
4

unfortunately this does not work and still gives the same artefacts. may i know why the selectors would not work? the text fields were still temporarily populated but disappears after onSubmit / or focusing another field.

Where is the smart wait on the recorder extension? i am not able to locate it.

Would there be another solution? It is also not possible to change the devs codes to fix this just for testing purposes if there is a larger app to use the recorder on.

5

It seems that @dineshh misunderstood; he thought @rachel.ng is using Katalon Studio.

But @rachel.ng is actually using Katalon Recorder(browser extension).

6

I am not interested in Katalon Recorder. I haven’t studied your case.

Just let me point you to a reference. Previously I have looked at a case where I used Katalon Recorder against React app. Please have a look at my previous post

Conclustion

Using this local server, I could reproduce the problem of Katalon Recorder as discussed at “KR+React issue”. I found Katalon Recorder has a bug that should be addressed by Katalon.

I don’t think Katalon will take your case seriously. I believe that they won’t invest any more resources into the Katalon Recorder product. It is free to use, therefore it makes no earnings for Katalon. I wonder why they don’t announce that the KR is sunsetting.

If you want to test React apps, I would recommend you to use Playwright or Puppeteer.

1 Like