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…
I could write a test case in katalon studio that work with this specific AUT (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.
@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)…
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)
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
Why not you use Cypress to perform an E2E testing for your React.app? Cypress is truely JavaScript+Node-based product. Your React developers would experience minimum learning cost.
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.
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.
You reported a defect of Katalon Recorder with React app as @guy.mason explained:
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. 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:
import test, { expect } from "playwright/test";
test("<input> 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.
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.
