Estoy probando mi sitio web usando ciprés, pero hay una cosa que me confunde, es que cuando uso:
display:noneY uso esta línea para probar si el div todavía existe en la página:
cy.get('[data-cy=searchBar]').should('not.exist')Todavía se detectará como visible durante la prueba, creo que la razón es que todavía puedo ver el elemento dentro de la herramienta de desarrollo de Chrome, pero no puedo verlo en la página web.
Sé que simplemente puedo usar el atributo CSS para verificar la pantalla y finalizar mi prueba, pero me pregunto cómo está diseñado este visible en Cypress y por qué en este caso no funciona.
exist y visible son dos afirmaciones diferentes. Exist comprueba si el elemento está presente en el DOM. Visible comprueba si el elemento es visible en el DOM.
Ahora, para su elemento donde tiene una propiedad de display: none , esto significa que el elemento no está visible pero existe.
cy.get('[data-cy=searchBar]').should('be.visible') //Fails cy.get('[data-cy=searchBar]').should('exist') //Passes