如何忽略 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无法在单个 animation 帧内提供所有观察值时，就会发生此错误。 ResizeObserver规范的作者保证可以安全地忽略它： ResizeObserver loop limit exceeded

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

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

可以看到在没有TestCafe的情况下在Google Sign In页面上重现了这个错误。 我向页面添加了一个onerror处理程序，并ResizeObserver loop completed with undelivered notifications. 在 Firefox 和ResizeObserver loop limit exceeded 。

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

一种更可靠的方法是通过客户端脚本在您的测试中显式添加全局 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")
});

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