Cypress 等待转换完成（等待正确的宽度）

Question

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

因此，我通过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()，现在它可以工作了。但这不是有点黑客吗？现在我需要为每个转换设置正确的延迟，或者总是设置一个适用于所有转换的很长的延迟，但这浪费了测试时间。

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

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

Answer 1

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

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

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 -超出循环限制，该消息是良性的。

如果 Cypress 由于此错误而导致测试失败，您可以通过将此代码添加到测试顶部来吞掉它

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