0
205
ViewsWhy display none for cypress is still visible?
I am testing my website using cypress, but there's one thing that confused me, is that when I using :
display:none
And I use this line to test if the div still exist in the page:
cy.get('[data-cy=searchBar]').should('not.exist')
It will still be detected as visible when testing, I think the reason is that I can still see the element inside the chrome dev tool, but I can't see it on the web page.
I know that I can simply use CSS attribute to check the display to finish my test, but I am wondering how this visible in cypress is designed, and why in this case it doesn't work?
1 answers
Answer question0
exist and visible are two different assertions. Exist checks whether the element is present in the DOM. Visible checks whether the element is visible on the DOM.
Now for your element where it has a property of display: none, this signifies that element is not visible but it does exists.
cy.get('[data-cy=searchBar]').should('be.visible') //Fails
cy.get('[data-cy=searchBar]').should('exist') //Passes