2

我有菜单和汉堡按钮来切换它，并想测试这种行为。但是，菜单并没有完全消失，而是在隐藏时变得更薄（只是图标可见），所以我不能只测试它是否可见，因为它总是可见。

因此，我正在通过以下方式检查尺寸invoke('width')：

cy.get('[data-test="sidebar"]')
  .invoke('width')
  .should('be.above', 200)
cy.get('[data-test="sidebar-toggle"]')
  .click()
cy.get('[data-test="sidebar"]')
  .invoke('width')
  .should('be.below', 100)

但我收到错误ResizeObserver loop limit exceeded，因为它不会在单击后等待菜单转换完成。所以我只是wait(500)在之后添加click()，现在它可以工作了。但这不是小骇客吗？现在我需要为每个转换设置正确的延迟，或者总是设置一个适用于所有转换的非常长的延迟，但这是在浪费测试时间。

是否有任何简单的通用方法告诉赛普拉斯等待我的宽度达到应有的水平，而不是立即放弃？

编辑：我错了 wait() 解决方案，它并没有真正帮助。错误可能与转换无关。无需使用已接受答案中的更改代码 -invoke有效。但是这个关于忽略错误的答案的解决方案是正确的 - 关于这个错误有多个问题，忽略它是安全的。如此简短的回答 - 忽略这个例外。它可以不放在 test 中，而是放在 support/index.js 中，这样它就可以在全球范围内工作。

4

1 回答 1

1

该.should()命令内置了重试，但看起来它没有重试整个链。

使用带有expect内部的回调函数将 should 表达式转换为单个步骤。

cy.get('[data-test="sidebar"]')
  .should($el => expect($el.width()).to.be.above(200))

cy.get('[data-test="sidebar-toggle"]').click()

cy.get('[data-test="sidebar"]')
  .should($el => expect($el.width()).to.be.below(100))

根据ResizeObserver - loop limit exceeded消息是良性的。

如果赛普拉斯因为这个错误而使您的测试失败，您可以通过将此代码添加到测试顶部来吞下它

Cypress.on('uncaught:exception', (err, runnable) => {
  if (err.message.includes('ResizeObserver loop limit exceeded')) {
    return false
  }
})

或者更改对 ResizeObserver 的调用（在应用程序源中）以包含动画帧请求，例如

const resizeObserver = new ResizeObserver(entries => {
   // Wrap it in requestAnimationFrame to avoid "loop limit exceeded" error
   window.requestAnimationFrame(() => {
     if (!Array.isArray(entries) || !entries.length) {
       return;
     }
     // your code
   });
});
于 2021-05-29T05:58:26.490 回答