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

【问题标题】：How to ignore the "ResizeObserver loop limit exceeded" in TestCafe如何忽略 TestCafe 中的“超出 ResizeObserver 循环限制”
【发布时间】：2020-10-07 06:53:21
【问题描述】：

我目前正在使用 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 问题是a benign error。

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

【问题讨论】：

标签： javascript reactjs testing automated-tests testcafe

【解决方案1】：

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

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 在测试中显式添加全局窗口错误处理程序：

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 复制粘贴了解决方法。

【讨论】：