# Serious Recorder Bug - does not work with React **URL:** \ **Category:** Web Testing\ **Tags:** katalon-recorder, web-testing, bugs-report\ **Created:** [August 23, 2024, 2:50pm UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083 "2024-08-23T14:50:36Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Rob1](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/rob1/32/341_2.png) [@Rob1](https://forum.katalon.com/u/Rob1)\ **Post date:** [August 23, 2024, 2:50pm UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/1 "2024-08-23T14:50:36Z")
I have mentioned this before, but more as a question. Now I want to escalate this as a bug. If it can’t be fixed soon, then I will have to stop using Katalon because we’re migrating our web app to React. When you use the recorder to play back a test, if your web app is using react, then textarea and input fields don’t work properly. The onChange handler is never triggered so the text is never saved. The Selenium IDE plug-in does not have this issue and I thought that the underlying technology was the same, so I do wonder why this is happening in Recorder. I’m using Recorder 7.1.0 on a mac with Chrome. All latest versions at the time of writing this. I have tried the commands; Type, SetText and SendKeys. They all ‘look’ as if the text has been entered, but as far as the react code is concerned, it hasn’t. I would be very grateful of a response from the developers on this… ---
**Author:** ![system](https://europe1.discourse-cdn.com/katalon/original/3X/d/5/d55596ab02785a255798e87ede769734747b30c4.svg) [@system](https://forum.katalon.com/u/system)\ **Post date:** [August 23, 2024, 2:50pm UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/2 "2024-08-23T14:50:36Z")
Hi there, Thank you very much for your topic. Please note that it may take a little while before a member of our community or from Katalon team responds to you. Thanks! ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [August 24, 2024, 2:25am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/4 "2024-08-24T02:25:43Z")
I could write a [test case](https://github.com/kazurayam/ReactInputField/blob/main/e2e_KatalonStudio/Scripts/TC1/Script1724447592246.groovy) in katalon studio that work with [this specific AUT](https://react.dev/learn/typescript#typing-dom-events) (Application Under Test). IMHO, a HTML generated by React.js is just an usual HTML+CSS+JS. As far as is concered, I found nothing unusual in the DOM generated by React. I know the original poster reported an issue about Katalon Recorder. But I am not skilled enough about Katalon Recorder. I can not make any sample for KR. Instead, I made this sample project for Katalon Studio and demonstrated how I could deal with a React app. I would be grateful if someone who is experienced about KR to produce a sample code for the same AUT as above. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [August 24, 2024, 6:22am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/5 "2024-08-24T06:22:03Z")
> [@Rob1](#): > > Now I want to escalate this as a bug. Any evidence of a bug in Katalon Recorder, please? ---
**Author:** ![dineshh](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dineshh/32/24488_2.png) [@dineshh](https://forum.katalon.com/u/dineshh)\ **Post date:** [August 24, 2024, 6:25am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/6 "2024-08-24T06:25:48Z")
can you add logs for react vs non react ---
**Author:** ![guy.mason](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/guy.mason/32/20660_2.png) [@guy.mason](https://forum.katalon.com/u/guy.mason)\ **Post date:** [August 28, 2024, 4:07am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/7 "2024-08-28T04:07:01Z")
@Rob1 Are you saying that this issue didn’t exist prior to v7? Or just an issue you’ve experienced since using Katalon Recorder, period? I personally use Katalon Recorder v7 with a React application, and it works for the greater majority of scenarios, but there is a particular text input field that where the field should automatically trigger an event when the contents changes, but presently doesn’t. So it sounds like I might have a similar issue myself. The related JS (event detection) code in this case (as best I can tell is).. ![image](https://europe1.discourse-cdn.com/katalon/original/3X/7/b/7bac325cde79e6639dfbaafed77eca0d9bb38b58.png) The event that should trigger this code is shown here (it links to the above code).. ![image](https://europe1.discourse-cdn.com/katalon/original/3X/f/8/f8c0b3435a7427a053186e707ab0919f068c0ada.png) ---
**Author:** ![guy.mason](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/guy.mason/32/20660_2.png) [@guy.mason](https://forum.katalon.com/u/guy.mason)\ **Post date:** [August 28, 2024, 4:17am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/8 "2024-08-28T04:17:42Z")
BTW If you interacted (manually) with the text input field after it ‘injects’ the text content, you will find it has accurately inserted the text in there, it’s just failed to trigger the change event (that tells the application that a change has occurred) ---
**Author:** ![albert.vu](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/albert.vu/32/20595_2.png) [@albert.vu](https://forum.katalon.com/u/albert.vu)\ **Post date:** [August 29, 2024, 9:35am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/9 "2024-08-29T09:35:42Z")
Hi folks, 👋 Thank you very much for sharing the bug(s) that you encountered with us. I will loop in my colleague @Shin from the Recorder team here so that she could take a look. Thanks, Albert ---
**Author:** ![Rob1](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/rob1/32/341_2.png) [@Rob1](https://forum.katalon.com/u/Rob1)\ **Post date:** [September 2, 2024, 10:14am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/10 "2024-09-02T10:14:39Z")
Hi there, Just a bit more info to answer some of the questions in the thread… This isn’t a v7 specific thing. The recorder has never played well with React. I was hoping it would get fixed in v7. As @guy.mason mentioned, it’s the input/textarea change event that fails to trigger. The text is added and if you interact with it manually after it has been added, then things work as expected. I tried all sorts of ways of adding the text/firing events to see if I could trigger the onChange, but nothing really worked. @dineshh You asked for logs of react vs non react. I could create these, but there is no difference in the logs. As far as recorder is concerned (I assume you mean the test logs), it thinks that it has set the text just fine (which is sort of has as noted above). I really don’t want to use Studio. I’ve tried multiple times to get my head around it and simply can’t. The way I write and run tests just doesn’t fit into the Studio model as far as I can tell. Or at least in a way that doesn’t mean I spend 10x more time testing vs Recorder. I did test studio in react and found that it worked though (as noted by @kazurayam) but that test re-enforced my opinion that me and Studio just don’t get along 😉 ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [September 2, 2024, 12:17pm UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/11 "2024-09-02T12:17:22Z")
> [@Rob1](#): > > that test re-enforced my opinion that me and Studio just don’t get along Why not you use [Cypress](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app) to perform an E2E testing for your React.app? Cypress is truely JavaScript+Node-based product. Your React developers would experience minimum learning cost. ---
**Author:** ![Rob1](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/rob1/32/341_2.png) [@Rob1](https://forum.katalon.com/u/Rob1)\ **Post date:** [September 2, 2024, 12:50pm UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/12 "2024-09-02T12:50:24Z")
Ha, I tried that a couple of weeks ago. On paper, it looks like a great tool, but in practice it was unusable. The UI is ridiculously slow - so setting tests up is too painful to even try. I persisted for a bit and did get a simple test running (Just going to a log in page, logging in and navigating to somewhere in my app). The execution of the test was also way too slow. In Recorder, I have 1000s of lines of tests. At the speed Cypress executed tests, it would take days to complete testing, so I ended up binning cypress. Thanks for the suggestion though. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [September 2, 2024, 1:22pm UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/13 "2024-09-02T13:22:31Z")
How about [Playwright](https://playwright.dev/)? ---
**Author:** ![Rob1](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/rob1/32/341_2.png) [@Rob1](https://forum.katalon.com/u/Rob1)\ **Post date:** [September 2, 2024, 3:14pm UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/14 "2024-09-02T15:14:36Z")
Nice! I just installed Playwright and took it for a small test drive. Works fine for my legacy bits of my app, and the new React bits. Very fast execution too. It will take me a few hours really using it to see all the benefits it looks like it will give me, but on the face of it, it looks like a really interesting and powerful tool. I’ll experiment with it more over the next couple of weeks. Thank you very much @kazurayam ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [September 2, 2024, 3:24pm UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/15 "2024-09-02T15:24:45Z")
@Rob1 You reported a defect of Katalon Recorder with React app as @guy.mason explained: > [@guy.mason](#): > > there is a particular text input field that where the field should automatically trigger an event when the contents changes, but presently doesn’t. I could reproduce the incident on my machine. I would agree to say Katalon Recorder has the problem. On the other hand, as I wrote previously, I could write a test in Groovy in Katalon Studio [See this](https://github.com/kazurayam/ReactInputField/blob/main/e2e_KatalonStudio/Scripts/TC1/Script1724447592246.groovy). The code worked fine. However, I feel it is tedious. A lot of `waitFor*` keywords makes the code ugly. And now I created a test in TypeScript in Playwright. It worked fine. The code looks like this: ```auto import test, { expect } from "playwright/test"; test(" field in a React app work as expected", async({ page }) => { // visit the target URL await page.goto("http://localhost:3000"); await expect(page.locator("p")).toContainText("Value: Change me"); await page.locator("input").fill("Hooah"); await expect(page.locator("p")).toContainText("Value: Hooah"); await page.close(); }); ``` I think that the code for Playwright is the best readble and concise amongst others. The `await` keyword looks beautiful. To me the `await` keyword seems indispensable for testing modern JavaScript-based apps. No doubt, I would choose Playwright for testing a React app. ---
**Author:** ![Rob1](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/rob1/32/341_2.png) [@Rob1](https://forum.katalon.com/u/Rob1)\ **Post date:** [September 4, 2024, 8:15am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/16 "2024-09-04T08:15:41Z")
Yes, I’ve had a bit more of a play with Playwright, and it’s very good. It’s 4 time quicker to run tests than Recorder in the mode where the browser shows and 5x quicker when running in headless mode. It records very well too - for example, for a while now Recorder has recorded unnecessary Open’s when clicking on buttons in my app. Also, there’s a particularly tricky Combo field in my app that I have to manually record in Recorder due to hidden fields. Playwright just recorded my actions fine with no intervention. Also, in Playwright, I have written some functions for common tasks in my app (like adding a user or logging in) - in my tests, I just add 1 line of code to call these functions, making life a lot easier. And I love the fact that I can manipulate vars etc with ordinary Java Script. Great for date manipulation for example. I think all new tests will be using Playwright from now on, and over time I will port my Recorder tests too. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [September 4, 2024, 9:36am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/17 "2024-09-04T09:36:06Z")
@Rob1 Glad to hear you have found out your way. I suppose that, sooner or later, you will leave this forum and join [their community](https://discord.com/servers/playwright-807756831384403968). So long. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [September 4, 2024, 1:44pm UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/18 "2024-09-04T13:44:43Z")
I made another post which was derived from this: [http://forum.katalon.com/t/a-local-web-server-that-responds-a-react-powered-page-accompanied-with-e2e-tests-by-katalon-recorder-katalon-studio-and-playwright/144909](http://forum.katalon.com/t/a-local-web-server-that-responds-a-react-powered-page-accompanied-with-e2e-tests-by-katalon-recorder-katalon-studio-and-playwright/144909) ---
**Author:** ![albert.vu](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/albert.vu/32/20595_2.png) [@albert.vu](https://forum.katalon.com/u/albert.vu)\ **Post date:** [September 6, 2024, 10:04am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/19 "2024-09-06T10:04:27Z")
Hi @kazurayam, I think the images in your comment below are broken, can you take a look? Thanks! [http://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/3?u=albert.vu](http://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/3?u=albert.vu) ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [September 6, 2024, 10:11am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/21 "2024-09-06T10:11:31Z")
I deleted the post - [Serious Recorder Bug - does not work with React - #3](http://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/3) as I can not restore the images in this old post any longer. And the post had no raison d’etre. It has been already superceded by my later post. ---
**Author:** ![kza](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kza/32/23870_2.png) [@kza](https://forum.katalon.com/u/kza)\ **Post date:** [December 31, 2024, 8:42am UTC](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083/22 "2024-12-31T08:42:35Z")
So any update on this issue regarding input in text fields on react pages not being recognized in Katalon Recorder? OG looks to have moved onto another application. Is that Katalon’s official resolution? [Next page](https://forum.katalon.com/t/serious-recorder-bug-does-not-work-with-react/143083.md?page=2)