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 有效。但是这个关于忽略错误的答案的解决方案是正确的 - 关于这个错误有多个问题，忽略是安全的。这么简短的回答 - 忽略这个例外。它可以不放在测试中，而是放在 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))

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

如果 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 等待转换完成（等待正确的宽度）

1 个答案: