0
238
Viewsdata-cy existe en el árbol DOM pero no es visible
Necesito alguna aclaración sobre el uso de Cypress. Estoy escribiendo algunas pruebas e2e y una de ellas falló porque el elemento no está visible.
Encontré esta respuesta útil, resolvió mi problema. Elemento de clic que se informa que no está visible.
cy.get('[data-cy="dApp Info"]').click({force: true});Pero ahora me pregunto acerca de las mejores prácticas de Cypress.
Por ejemplo, supongamos que tengo un componente en el que quiero hacer clic. Es a enlace dentro de un div , dentro de un div , dentro de un nav . (Le di al enlace la propiedad data-cy ). Aunque como usuario, el componente es visible y se puede hacer clic en él (ver la primera imagen), se informa que el componente no es visible (ver la segunda imagen).
¿Es una buena práctica agregar una propiedad data-cy a cualquier elemento en el que quiera hacer clic y simplemente usar .click({force: true}) o debería agregar una propiedad data-cy a uno de los div que envuelven mi enlace real? y haga clic en esos (¿es eso posible?)?
Editar
Estructura DOM
<nav data-cy="sidebar-nav-studio"> <div> <div> <div> <div> <ul data-cy="dApp-sub-section-sidebar-nav-studio"> <span> <a data-cy="Add Templates"> <div> </div> <div> <p> Add Templates </p> </div> </a> <a data-cy="Look & Feel"> <div> </div> <div> <p> Look & Feel </p> </div> </a> <a data-cy="dApp Info"> <div> </div> <div> <p> dApp Info </p> </div> </a> </div> </div> </div> </div>3 answers
Answer question0
Creo que agregar el atributo data-cy a la etiqueta a sería una buena opción, de modo que obtenga el elemento como visible y haga clic en él. Lo que entendí de la página de mejores prácticas de Cypress, data-cy o data-test o data-testid debe agregarse al elemento de destino, que en su caso es la etiqueta a .
Le sugiero que no use el click({force: true}) hasta que sea absolutamente necesario porque fuerza la acción y deshabilita la espera de la capacidad de acción.
Por capacidad de acción, cypress significa comandos que simulan la interacción de un usuario con su aplicación. Debajo del capó, Cypress activa los eventos que un navegador activaría, lo que hace que se activen los enlaces de eventos de su aplicación.
Entonces, en caso de que un usuario real no pueda ver o interactuar con un botón por algún motivo, entonces la prueba debería fallar, pero con force:true , la prueba pasará porque pasa por alto las comprobaciones de accionabilidad y hace clic con fuerza en el botón. Puede leer más sobre la capacidad de acción y el forzamiento en los documentos.
O en caso de que no quiera usar ninguna etiqueta, una buena manera sería usar la combinación de un selector y un valor de texto interno para encontrar el elemento y hacer clic en él, algo así como:
cy.get('[data-cy="sidebar-nav-studio"]').click() //opens the nav cy.contains('a', 'dApp Info').click()0
Comportamiento
Si hacer clic en el enlace es solo una forma de actuar (es decir, ir a otra página), usar {force:true} es pragmático.
regresiones
Por otro lado, si desea probar las regresiones en el propio sistema de menús, forzarlo podría ser algo incorrecto.
Los eventos saltan de un elemento a otro, por lo que puede que no sea necesario hacer clic en <a> directamente.
Intente hacer clic en la cadena del elemento principal hasta que encuentre el contenedor que sea visible y en el que se pueda hacer clic.
Bibliotecas marco
Al usar una biblioteca principal como Material UI, no es necesario probar la funcionalidad que proporciona esa biblioteca.
Puede confiar en que los creadores de bibliotecas ya lo han probado.
Entonces, una prueba como "¿Se abre este menú?" probablemente esté perdiendo el tiempo (aunque la configuración de la biblioteca no).
Selección del menú MUI sin forzar el clic
Acabo de probar el menú de la interfaz de usuario de material de muestra que se proporciona en los documentos, y puede hacer clic en el elemento sin usar {force:true} .
Supongo que el paso que te falta es abrir el menú para que los elementos estén visibles.
cy.get('.MuiButton-root').click() // open the dropdown cy.get('[data-cy="dApp Info"]').click() // clicks without forcingTenga en cuenta que el Nav para abrir el menú no se encuentra cerca de los elementos del menú, de hecho, los elementos parecen estar cargados de forma diferida (no en DOM hasta que se abre el menú).
0
Yo usaría estos selectores
cy.contains('button', 'DApp').click() cy.contains('a[data-cy="dApp Info"]', 'dApp Info').click() Acepto que usar .click({force:true}) es un olor a código.