为什么 display none for cypress 仍然可见？
Why display none for cypress is still visible?
我正在使用 cypress 测试我的网站，但有一件事让我感到困惑，那就是当我使用 :
display:none
然后我使用这一行来测试 div 是否仍然存在于页面中：
cy.get('[data-cy=searchBar]').should('not.exist')
测试的时候还是会被检测为可见，我想是因为我在chrome开发工具里面还能看到这个元素，但是在网页上看不到。
我知道我可以简单地使用 CSS 属性来检查显示以完成我的测试，但我想知道这个 visible in cypress 是如何设计的，为什么在这种情况下它不起作用？
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
我正在使用 cypress 测试我的网站，但有一件事让我感到困惑，那就是当我使用 :
display:none
然后我使用这一行来测试 div 是否仍然存在于页面中：
cy.get('[data-cy=searchBar]').should('not.exist')
测试的时候还是会被检测为可见，我想是因为我在chrome开发工具里面还能看到这个元素，但是在网页上看不到。
我知道我可以简单地使用 CSS 属性来检查显示以完成我的测试，但我想知道这个 visible in cypress 是如何设计的，为什么在这种情况下它不起作用？
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