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

有没有什么简单的通用方法可以告诉赛普拉斯等待我的宽度达到它应该达到的宽度，而不是马上放弃？

编辑：我错了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-超出循环限制，消息是良性的。

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