ReactJS Frontend Interaction Delay During Katalon E2E Tests

Web Testing
1

Hi team,
I have an issue when running Katalon E2E tests on a ReactJS frontend. Whenever the test tries to interact with the UI (for example: typing text, clicking a dropdown, or selecting an option), there is a short delay or “freeze” before the action actually happens. It feels like the page is fetching data or updating the state, and Katalon tries to interact with the element before it’s fully ready.

Has anyone encountered this before?
Is there a recommended approach to handle React rendering delays — such as using specific wait conditions, increasing timeouts, or adjusting Smart Wait?
Any suggestions or best practices would be appreciated.

1 Like
2

hi @wuttipat.jam
React apps are tricky with Katalon because of how React handles state updates and re-renders. the element is technically “there” but not fully interactive yet.

you can try these workarounds:

  1. wait for elements to be clickable, not just present
WebUI.waitForElementClickable(findTestObject('your_element'), 10)
WebUI.click(findTestObject('your_element'))
  1. add a small delay after navigation or actions that trigger state changes
WebUI.waitForPageLoad(5)
WebUI.delay(1) //give React time to finish rendering
  1. wait for network activity to finish. React apps often fetch data
WebUI.waitForJQueryLoad(10) //if using jQuery
// or just wait for specific elements that appear after data loads
  1. use custom wait conditions for specific React behaviors
WebUI.waitForElementAttributeValue(findTestObject('dropdown'), 'aria-busy', 'false', 10)
  1. increase Smart Wait timeout in Project Settings if you’re using it, but honestly Smart Wait doesn’t always catch React re-renders.
2 Likes
3

Selenium-based technologies including Katalon Studio were originally designed a few decades ago with synchronous (static) HTML pages as the primary target in mind; they do not work well with JavaScript-driven apps which work asynchronously. As @depapp pointed out above, Katalon requires users to struggle with the various “WebUI.waitForXXXX” keywords to interact with the React apps which is entirely asynchronous. I find it is difficult to accomplish.

I would recommend you to switch from Selenium to the testing frameworks in JavaScript/TypeScript such as Playwright or Puppeteer. With Playwright, you can write tests in JavaScript/TypeScript which talks to React app with the async/await syntax. The following snippet shows a typical test script using Playwright:

const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'.

(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

In Playwright, the “wait for something” issues are resolved by async/await cleanly. Far easier than Selenium.

1 Like
4

Hi, thanks a lot for the detailed explanation and all the workaround suggestions!
This really helps me understand why React behaves this way with Katalon.

I have another question related to Katalon Studio itself:

Right now, when I try to use Record Web with Chrome, Katalon only shows “Open Browser” and “Close Browser” — it doesn’t capture any interactions on the webpage at all. The browser opens, but no events (clicks/typing/dropdown actions) are being recorded.

Do you know if there is any specific setting or configuration I should check?
Is this usually caused by WebDriver, the Recorder extension, or something else?

Any guidance would be greatly appreciated. Thanks again!

5

Thanks a lot for the detailed explanation!
It helps me understand why Katalon behaves this way with my React app. I’ll give Playwright a try — it seems like a better fit for what I’m testing.

6

hi @wuttipat.jam
seems it’s related to this one: 🚨 [Announcement] Chrome 142 Recording Issue

1 Like
7

Thank you.

2 Likes