Testing automático de interfaz gráfica en aplicaciones web con Cypress

Después de utilizar Cypress durante un tiempo en diferentes proyectos, es ya la primera herramienta que recomiendo a quienes quieren desarrollar aplicaciones web más robustas, gastar mucho menos en testing manual de GUI sin reducir la calidad y desean aumentar su productividad.

Los tests automáticos End to End (e2e) y de interfaz gráfica de usuario ocupan la punta de la pirámide del testing; son los más costosos de implementar y deberían implementarse menos tests de este tipo que tests unitarios o de integración. Sin embargo, si alguien no usa aún testing automático en sus proyectos web, Cypress le hará cambiar de opinión más rápido que otras herramientas como Protractor o Selenium 😀

Entre sus ventajas, hay que destacar:
1. Cypress se instala con una línea: npm install cypress –save-dev
2. Es open source. Ofrecen servicios premium SaaS para Integración Continua y grabación de resultados, pero la ejecución en tus máquinas no tiene ningún coste.
3. Compatible con aplicaciones web angular, Vue.js y apps móviles híbridas basadas en html5.
4. Con el test-runner de Cypress abierto, se lanzan automáticamente los tests cada vez que hay una modificación en los ficheros de tests.
5. La selección de elementos del DOM es muy sencilla. Puedes buscarlos por id, clase, por texto que contienen… cy.get() funciona como el operador $ de jquery. Pero como todos estos atributos podrían cambiar si se retoca el diseño de la aplicación web, Cypress recomienda añadir un atributo «data-cy» en los elementos. Ejemplo: cy.get(‘[data-cy=submit]’).click()
6. Graba vídeos de los tests. Y también capturas de pantalla en los instantes que quieras. Ejemplo:

Cypress ejecutando un test automático en la web de renfe* 🚆

7. Permite testear llamadas de la API directamente.
8. Se espera a que terminen las llamadas asíncronas que le digas. Ejemplo:

9. Deja mockear llamadas a APIs. Ejemplo: cy.route(‘GET’, ‘listadoItems/*’, ‘fixture:fakeListado.json’)
10. Puedes testear el envío de ficheros.
11. Incluye cy.stub() para mockear métodos.
12. Tiene cy.spy() para grabar las invocaciones a los métodos que deseemos.
13. Incorpora la librería moment.js para trabajar con fechas.
14. Puede ejecutar código en node.js con cy.task()
15. Puede hacer peticiones HTTP de forma independiente de la interfaz gráfica, con cy.request(). Esto es útil por ejemplo para obtener un token de acceso vía API como paso previo a un test e2e. Se recomienda utilizar la interfaz gráfica para testear el login solo 1 vez; el resto de veces se puede obtener el login sin GUI usando cy.request() o recuperando una cookie/token almacenada en dicho primer test.
16. Puede simular todos los eventos que dispararía un usuario con un navegador web; no solo el «click». Ejemplo: cy.get(‘#miBoton’).trigger(‘mouseover’)
17. Compatible con CI y paralelización de tests, con envío de los resultados a la nube Cypress Dashboard (Dashboard es de pago a partir de 3 usuarios).
18. Tiene muy buena documentación 🙂

Conclusión: existen muchísimas herramientas para testing automático, pero para testing automático de interfaz web, Cypress ofrece lo que se necesita en la mayoría de proyectos, con una curva de aprendizaje muy suave y una velocidad alta para escribir los tests. ¡En la primera hora ya habrás ejecutado varios tests automáticos! 😀

* El test automático con la web de renfe es solo 1 ejemplo educativo de lo sencillo que es implementar un test automático e2e con Cypress, incluso sin conocer cómo está hecha una web «por dentro». Pero no es una buena práctica; los tests automáticos no deberían ejecutarse contra webs de terceros.