0
194
VistasPrueba de efecto de interfaz gráfica de usuario de Cypress hoverover
Empecé a usar ciprés hoy en día para aprender mejor y más profundo. Me enfrento a un problema que no puedo manejar. El problema es algún tipo de efecto GUI que funciona con el desplazamiento del mouse. Mientras paso el mouse sobre el elemento, no puedo ver ningún cambio de información en DOM. Solo aparecen ::antes y ::después de las palabras. Creo que tengo que resolver ese problema con algunos trucos de javascript. desafortunadamente, soy nuevo en javascript y no tengo idea si me ayudas, sería muy feliz. ¡Gracias! (Quiero afirmar de alguna manera que el fondo gris y el ícono más se muestran o no)
genéricamente se ve así
después de que el mouse pasa sobre este fondo gris y aparece el ícono más
puedes ver elementos DOM aquí
puede ver los cambios después de que el mouse pase el elemento
3 Respuestas
Responde la pregunta0
Puede usar el complemento cypress-real-events . Para instalar usa el comando:
npm i cypress-real-events Luego, dentro de su cypress/support/e2e.{js,ts} , escriba:
import "cypress-real-events/support";Y en tu código puedes escribir directamente:
cy.get("selector").realHover('mouse') //Add assertionsNota: Dado que el complemento anterior utiliza los protocolos Chrome DevTools para simular eventos nativos, esto solo funcionará con navegadores basados en Chromium, por lo que no Firefox.
0
En la prueba de cypress, intente usar el método cy.wait("time here") siguiendo el comando de desplazamiento. Esto es muy simple, pero para la prueba visual es muy útil.
0
Para acceder al :before o :after de un elemento, tenemos que hacer un poco de magia con Cypress y JavaScript. Esta es la respuesta es principalmente de este enlace.
cy.get('.myClass') .then($els => { // get Window reference from element const win = $els[0].ownerDocument.defaultView // use getComputedStyle to read the pseudo selector const before = win.getComputedStyle($els[0], ':before') // read the value of the `content` CSS property const contentValue = before.getPropertyValue('content') // The above lines are just how we tell Cypress to get the `:before` value. // There isn't a ton to understand outside of really diving into how elements and windows work together expect(content).to.equal('foo'); }) Entonces, usando ese mismo ejemplo, podemos verificar cualquier propiedad CSS en el elemento. Por ejemplo, font-size :
cy.get('.myClass') .then($els => { const win = $els[0].ownerDocument.defaultView const before = win.getComputedStyle($els[0], ':before') const fontSize = before.getPropertyValue('font-size') // instead of `'font-size'`, you can substitute any CSS property expect(fontSize).to.equal('20'); }) Esto también se puede aplicar a :after , cambiando ($els[0], ':before') por ($els[0], ':after') .