Any tips on getting the recorder to work with a react UI?

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.

Has anyone found a manageable way around this?

Cheers,

Rob.

1 Like

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!

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…

1 Like

Which version of Katalon Recorder, a browser extension, are you using?

Katalon Recorder v7.0.0 has a problem which caused various problems. A fix is to be released this week. So you had better wait for the new release.

2 Likes

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.

1 Like

This message is just an warning; not an error. See the following Stackoverflow thread for more info.

This would not be the cause of your current issues.

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.

1 Like

Nice one @kazurayam . Thank you.

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.

1 Like

@Rob1

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.

=> @Elly_Tran

1 Like

Hi @Rob1 and @kazurayam,

Thanks for bringing this up, we’re looking into it.

1 Like

This topic was automatically closed after 16 hours. New replies are no longer allowed.