We’re considering using React to totally re-write our web-app’s front-end. We’ve come a long way playing with new UI ideas, but then I thought I would see if Katalon Recorder will still work with a react front end. The short answer is no.
This is a major problem for us.
The recorder seems to record the test fine, but when it comes to playing back, many things don’t work.
For example, adding text to an input or textarea looks like it works on screen, but the react code is not triggered, so nothing is actually getting into the app. I think it’s something to do with react’s virtual DOM?
None of the commands I have tried so far on an in put or text area seem to work: click, fireEvent, sendKeys, Type, typeKeys etc don’t trigger the corresponding events in the code so the react state is never updated. Clicking on buttons and navigation seem to work fine though.
Just to add to this. I just tried the Selenium IDE browser extension and it works fine. Not sure if it helps find a solution or not for Katalon recorder…
Ah, yes. Sorry. I forgot to mention that. I’m using KR 7.0.1 in Chrome (126.0.6478.127) on a Mac.
As a note, both Recorder and the alternative extension Selenium IDE have this problem showing in the console log:
[Violation] Listener added for a 'DOMNodeInserted' mutation event. This event type is deprecated, and will be removed from this browser VERY soon. Usage of this event listener will cause performance issues today, and represents a large risk of imminent site breakage. Consider using MutationObserver instead. See https://chromestatus.com/feature/5083947249172480 for more information.
But Selenium IDE will actually run the test whereas Recorder just doesn’t work. The onChange event on the inputs don’t fire. Also I note that Recorder reloads the page at least once part way through execution (I can’t see why) and there are many more instances of that warning in the logs vs Selenium IDE.
OK - I’ll look into that. I figured it was Selenium injecting things into the DOM as a work around for how React works.
In other news, I tried my test (it’s just a simple login test that loads the page, enters the username and password and then clicks the login button) using KR in Firefox (KR version 5.5.3) and that works in my react App.
I’d like to regress my Chrome KR version to below v7 to test it too - I don’t suppose you know how I could do that do you?
Unfortunately Katalon does not provide any official way to downgrade KR. However, the recent problem in KR v7.0 motivated many people to find out the trick. You can find some posts in this forum. For example I found the following by a quick search :
I seem to remember there were a few more posts in this June about how to downgrade KR.
I have downgraded to 6.0.3 and my test is now working.
As a note for anyone else who ends up here, there is no need to extract the CRX file, you can just drag and drop it onto the extensions manager. I had to remove KR 7.0.1 first though.
It seems that you have encountered a problem of KR v7.0.1 on Chrome possibly related to React. I suppose this problem is not acknowledged by Katalon developers. It might be a new phenomenon. It may deserve their attention. If you are willing to, please describe what you found with more concrete information so that they can reproduce your issue on their side. Unless successful reproduction of the problem proposed, they would not be able to do troubleshooting.