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

IT技术 javascript reactjs testing automated-tests testcafe
2021-05-07 16:00:44

我目前正在使用 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 错误

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

我从这里复制了解决方法