单击元素失败，因为它错误地认为它是不可见的

Question

我有几个示例无法单击弹出菜单中的某些内容。 我使用类似于下面的代码，并且该元素可见的断言通过了，但是当它尝试单击已确认可见的该元素时，我收到以下错误：

此元素不可见，因为它的有效宽度和高度为：'0 x 0' 像素。

这是我正在编写的测试类型的示例：

cy.get('.example').eq(2).find('.item-in-list').contains('Example Text').should('be.visible').click();

should('be.visible') 断言怎么可能通过，但点击却因为同一个元素“不可见”而失败？

Answer 1

这些测试有时会通过，有时会失败。事实证明，API 调用有时会在测试中完成并导致组件重新呈现，从而关闭我试图单击的弹出菜单。我仍然对断言如何通过以及单击失败的频率仍然感到困惑（在我的断言通过之后和单击之前大约 50% 的时间是否真的重新渲染了组件？），但是确认在运行我的测试之前完成 API 调用似乎解决了我的问题。