如何忽略TestCafe中的“超出ResizeObserver循环限制”

Question

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

   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规范的作者保证可以安全地忽略它：超出了 ResizeObserver 循环限制

Chrome 和 Firefox 默认情况下不显示它。只有当您设置显式onerror处理程序时才能捕获它：

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

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

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

更可靠的方法是通过客户端脚本在测试中显式添加全局窗口错误处理程序：

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")
});

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