赛普拉斯等待转换完成（等待正确的宽度）

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，因为它不会在单击后等待菜单转换完成。所以我只是在 click() 和 之后添加了 wait(500)，现在可以使用了 。但这不是有点hacky吗？现在我需要为每个转换设置正确的延迟，或者总是设置一个适用于所有转换的非常长的延迟，但这是浪费测试时间。

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

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

Answer 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))

根据消息是良性的。

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

赛普拉斯等待转换完成（等待正确的宽度）

Cypress wait for transition completes (wait for correct width)

animation

cypress

resize-observer