How to ignore the "ResizeObserver loop limit exceeded" in TestCafe

Question

I'm currently using TestCafe for some e2e tests. I've run into the following error

   1) - Error in Role initializer -
      A JavaScript error occurred on "http://localhost:3000/".
      Repeat test actions in the browser and check the console for errors.
      If you see this error, it means that the tested website caused it. You can fix it or disable tracking JavaScript errors in TestCafe. To do the latter, enable the "--skip-js-errors" option.
      If this error does not occur, please write a new issue at:
      "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".
      
      JavaScript error details:
      ResizeObserver loop limit exceeded
          No stack trace available

A bit of research suggests that the ResizeObserver loop limit exceeded issue is a benign error.

However, it causes my test to fail. Is there any way I can ignore this specific error without using the --skip-js-errors flag, as I would prefer to not ignore all JavaScript errors because of this one issue

Answer 1

As far as I understand, this error occurs when ResizeObserver cannot deliver all observations within a single animation frame. A person who is the author of the ResizeObserver specification assures that it can be safely ignored: ResizeObserver loop limit exceeded

Chrome and Firefox don't display it by default. You can only catch it when you set an explicit onerror handler:

window.onerror = e => console.log(e);

You can see that this error is reproduced on the Google Sign In page without TestCafe. I added an onerror handler to the page and got ResizeObserver loop completed with undelivered notifications. in Firefox and ResizeObserver loop limit exceeded in Chrome.

As a workaround, you can specify the --skip-js-errors flag when starting TestCafe. I admit that it's not the best approach since you will suppress all Javascript errors on a tested page.

A more reliable way is to add a global window error handler explicitly in your tests via client scripts:

import { Selector, t } from 'testcafe';

// Constants
const gmailEmailInput       = Selector("#identifierId");
const gmailNextButton       = Selector(".CwaK9");
const gmailPasswordInput    = Selector("input[type='password']");

const explicitErrorHandler = () => {
    window.addEventListener('error', e => {
        if(e.message === 'ResizeObserver loop completed with undelivered notifications.' || 
            e.message === 'ResizeObserver loop limit exceeded') {
            e.stopImmediatePropagation();
        }
    })
}

fixture("Gmail login test")
    .clientScripts({ content: `(${explicitErrorHandler.toString()})()` });

test("Not trigger JS error when logging in to Gmail", async testController => {
    await testController
        .navigateTo("https://mail.google.com")
        .typeText(gmailEmailInput, "[email protected]")
        .click(gmailNextButton)
        .typeText(gmailPasswordInput, "password")
});

I copypasted the workaround from here.