为什么 cypress 的 display none 仍然可见？答案

【问题标题】：Why display none for cypress is still visible?为什么 cypress 的 display none 仍然可见？
【发布时间】：2021-12-22 02:16:37
【问题描述】：

我正在使用 cypress 测试我的网站，但有一件事让我感到困惑，那就是当我使用 :

display:none

我用这一行来测试页面中是否仍然存在div：

cy.get('[data-cy=searchBar]').should('not.exist')

在测试的时候还是会被检测为可见的，我想是因为在chrome dev工具里面还是可以看到元素，但是在网页上看不到。

我知道我可以简单地使用 CSS 属性来检查显示以完成我的测试，但我想知道这在 cypress 中是如何设计的，为什么在这种情况下它不起作用？

【问题讨论】：

我很确定.should('not.exist') 表示该元素在 DOM 中根本不存在，而不仅仅是它被隐藏了。在这种情况下，元素仍然存在，只是有一个隐藏它的 CSS 属性。

【解决方案1】：

exist 和 visible 是两个不同的断言。 Exist 检查元素是否存在于 DOM 中。 Visible 检查元素在 DOM 上是否可见。

现在对于具有display: none 属性的元素，这表示该元素不可见但确实存在。

cy.get('[data-cy=searchBar]').should('be.visible') //Fails
cy.get('[data-cy=searchBar]').should('exist') //Passes

【讨论】：