如何忽略 TestCafe 中的 "ResizeObserver loop limit exceeded"

Question

我目前正在使用 TestCafe 进行一些端到端测试。我运行遇到以下错误

   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

一些研究表明 ResizeObserver loop limit exceeded 问题是。

但是，它导致我的测试失败。有什么方法可以在不使用 --skip-js-errors 标志的情况下忽略这个特定错误，因为我不想因为这个问题

而忽略所有 JavaScript 错误

Answer 1

据我了解，当 ResizeObserver 无法在单个动画帧内传递所有观察结果时会发生此错误。 ResizeObserver 规范的作者保证可以安全地忽略它：

Chrome Firefox 默认不显示。你只能在设置显式 onerror 处理程序时捕获它：

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

您可以看到在没有 TestCafe 的 Google 登录页面上重现了此错误。我向页面添加了一个 onerror 处理程序，并在 Firefox 中获得了 ResizeObserver loop completed with undelivered notifications.，在 Chrome 中获得了 ResizeObserver loop limit exceeded。

作为解决方法，您可以在启动 TestCafe 时指定 --skip-js-errors 标志。我承认这不是最好的方法，因为您将抑制测试页面上的所有 Javascript 错误。

一种更可靠的方法是通过 client scripts:

在您的测试中显式添加全局 window 错误处理程序

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, "someuser@gmail.com")
        .click(gmailNextButton)
        .typeText(gmailPasswordInput, "password")
});

我从 here 复制粘贴了解决方法。

如何忽略 TestCafe 中的 "ResizeObserver loop limit exceeded"

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

javascript

reactjs

testing

automated-tests

testcafe