Las pruebas son una parte fundamental en cualquier tipo de desarrollo de software, de ahí nacen metodologías como TDD (Test-Driven Development), BDD (Behaviour-Driven Development) o ATDD (Acceptance Test-Driven Development). Estas técnicas sugieren enfocarse en implementación, comportamiento o criterios de aceptación de una funcionalidad concreta incluso antes de empezar el propio desarrollo.
Hoy en día el desarrollo web ha evolucionado muchísimo, ya a nadie le sorprende una SPA (Single-page Application) hecha con React, Angular o Vue.js. Pero, ¿y qué pasa en el mundo de automatización de pruebas e2e? Algunos seguimos utilizando herramientas inventadas hace más de 15 años.
En este artículo voy a contarte sobre Cypress, sus ventajas, cómo instalarlo y ejecutar tu primera prueba. Una herramienta que en muy poco tiempo se ha convertido en un importante referente entre los desarrolladores front-end.
Índice
- ¿Que son las pruebas E2E?
- ¿Qué es Cypress?
- Ventajas al usar Cypress
- Instalar Cypress y ejecutar pruebas con un ejemplo
Antes de empezar, ¿qué son las pruebas E2E? ?
Las pruebas End-to-End es una metodología de aseguramiento de calidad de software para probar el flujo de la aplicación desde el inicio hasta el final. El objetivo es simular al máximo el comportamiento de un usuario real y validar la integridad y fiabilidad del sistema.
En la pirámide de pruebas, las de E2E se sitúan arriba del todo porque son mucho más costosas que el resto como unitarias o de integración en términos de tiempo y el esfuerzo.
La mayoría de los desarrolladores odiamos hacer pruebas y por eso necesitamos herramientas que nos permitan hacerlo de forma ágil y rápida.
¿Qué es Cypress? ?
Cypress es un framework de testing moderno y todo en uno. Es rápido, fácil de usar y permite ejecutar pruebas sobre cualquier aplicación web. En poco más de 2 años desde su lanzamiento de la versión 1.0.0 se ha convertido en una de las herramientas más populares de testing. Lo cual se puede ver en la siguiente grafica de la comunidad open source de GitHub.
Cypress no utiliza Selenium, las pruebas se ejecutan dentro del navegador controlándolo a través de un proceso backend en NodeJS. Además, funciona a nivel de red permitiendo la intercepción de todo el tráfico entrante y saliente de nuestra aplicación.
Como las pruebas se ejecutan dentro del navegador, dispone del acceso nativo a todas las APIs como window, document, etc. Además la ejecución es muchísimo más rápida que en otras herramientas alternativas.
Su instalación es muy simple, solo se necesita agregar una sola dependencia con NPM. Sin perder tiempo en configuración, conexión con un servidor remoto, etc.
Ventajas de usar Cypress ?
Cypress es todo en uno. Con una sola dependencia y sin configuración tenemos instalada y configurada la librería de aserciones con mocking, stubing y sin depender de Selenium. Todo ello con los frameworks y librerías ya conocidas por los desarrolladores front-end como Mocha, Chai, Sinon, Lodash, jQuery, etc.
A diferencia de otras herramientas Cypress dispone de una interfaz gráfica que permite ver de forma interactiva cada uno de los pasos y las acciones ejecutadas durante la prueba, el estado de la aplicación, la duración de la prueba, los test fallidos o pasados.
Además de otras ventajas como:
- Espera automática de los elementos (DOM sin cargar por completo, framework sin terminar de arrancar, petición AJAX sin completar, etc.). Lo cual minimiza los falsos positivos en las pruebas fallidas
- Grabación automática del estado de la aplicación durante la ejecución de pruebas. Lo cual permite ver en qué estado estaba la aplicación en cada uno de los pasos
- Spies, stubs y mocks que además de las de E2E permite hacer pruebas unitarias
- Intercepción de las peticiones AJAX / XHR para hacer aserciones o crear fixtures o mocks
- Capturas de pantalla y videos automática
- Depuración nativa con instrucción debugger
- Velocidad, la ejecución pruebas comienzan tan rápido como se cargue la aplicación
- Documentación muy completa
- Mensajes de error claros
Y por último pero no menos importante Cypress se puede extender con plugins que hace esta herramienta aún más potente. Por ejemplo, puedes incluir plugins que permiten hacer pruebas de regresión visual comparando múltiples imágenes de una pantalla para detectar errores visuales. ¿Necesitas poder acceder a tu store de Redux para hacer aserciones o usas Cucumber y eres fan de la metodología BDD? Existen plugins para ello.
Cómo instalar y ejecutar pruebas en Cypress: Ejemplo ??
Como te he comentado antes, instalar Cypress es súper sencillo.
Antes que nada, para instalar Cypress necesitas tener instalado NodeJS y NPM. Lo puedes descargar desde la página oficial de NodeJS.
Paso 1: Instala Cypress en tu proyecto NPM o en proyecto desde 0
Para completar la instalación tan solo tenemos que agregar una dependencia a nuestro proyecto NPM (Node Package Manager) o crear uno nuevo.
Si ya tienes creado tu proyecto NPM, ejecuta el siguiente comando para instalar Cypress:
$ npm install cypress -D
Si quieres crear un proyecto desde cero, ejecuta los siguientes comandos:
$ mkdir nombre-del-proycto && cd nombre-del-proyecto
$ npm init -y
$ npm install cypress –D
Paso 2: Añade el script cy:open al fichero package.json
Una vez hecho esto, estamos listos para arrancar Cypress y verlo en acción. Pero antes, vamos a modificar el fichero package.json agregando un nuevo script cy:open:
Copia y pega:
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″,
«cy:open»: «./node_modules/.bin/cypress open»
},
Paso 3: Arranca Cypress ejecutando el script
Ahora sí, vamos a abrir Cypress ejecutando el script que acabamos de crear:
$ npm run cy:open
Al abrirlo por primera vez, Cypress nos creara la estructura de carpetas como en la siguiente imagen y abrirá una nueva ventana desde la cual podemos ejecutar nuestros tests.
Paso 4: ejecuta tu primer test
Para ejecutar un test, pulsa sobre cualquier fichero que nos ha creado Cypress en la carpeta examples. Esto hará que se abra navegador y se ejecuten las pruebas.
Al pulsar sobre cualquiera de los test, se despliega la lista de acciones y aserciones que se han ejecutado. Además, podemos ver el estado de nuestra aplicación antes y después de cada paso.
Si nos vamos a nuestro editor podemos ver el código del propio test que acabamos de ejecutar.
Como te comente antes en la carpeta que nos crea Cypress por primera vez hay muchísimos ejemplos que sirven para aprender a interactuar con los elementos y hacer aserciones, entre otras cosas. Te animo a que les eches un vistazo y así puedas practicar. No olvides que Cypress tiene muy buena documentación que puedes consultar aquí.
Conclusiones ?
Por supuesto Cypress no es la única opción a la hora de automatizar pruebas E2E, pero ha demostrado que este proceso puede ser rápido, sencillo, fiable y developer-friendly. Además, todos los datos apuntan a que Cypress ha venido para quedarse.
En los próximos artículos te enseñaré las buenas prácticas y algunos trucos a la hora de trabajar con Cypress.
Daniil Desna
Santander Global Tech
