Test E2E en Angular con Cypress

Índice de contenidos

• 1. Entorno
• 2. Introducción
• 3. Vamos al lío
• 4. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: Slimbook Pro 2 13.3″ (Intel Core i7, 32GB RAM)
• Sistema Operativo: LUbuntu 18.04
• Visual Studio Code 1.24.0
• @angular/cli 6
• @angular 6

2. Introducción

Cada vez se le está dando mayor importancia a los tests E2E, tanto es así que en el mundo front la típica pirámide de testing se está invirtiendo.

Esto no debería ser así y ya hemos visto en otro tutorial cómo hacer test unitarios y de integración con Angular; pero bien es cierto que en el front lo que manda es la visualización y que funcionalmente la aplicación haga lo que tiene que hacer, sin importar tanto las «tripas».

En Angular para hacer este tipo de tests sabemos que contamos con Protractor que a través del web driver de Selenium nos permite interactuar con el navegador. Esta herramienta es muy útil pero también presenta problemas de velocidad en el desarrollo y ejecución no tan estable como nos gustaría, lo que hace que a la larga se deje de utilizar.

Es aquí donde entra como un ciclón de aire fresco Cypress que nos ofrece un IDE open-source para lanzar y ver el resultado de las pruebas, basado en Electron, para lo que utiliza un navegador embebido real, en vez de hacer uso del modo «automated» que maneja Selenium. No es especifico de Angular sino que puedes probar cualquier cosa que se muestre en un navegador independientemente de con qué tecnología y calidad esté desarrollado.

Las principales ventajas que podemos destacar de Cypress frente a Protractor son:

• El API no es que sea más sencillo pero si que parte siempre del objeto global cy que con el autocompletado hace que no tengamos que recordar todos los objetos que maneja Protractor como: browser, element, by, utils, …
• Proporciona mayor estabilidad en la ejecución de los tests y facilidades para depurar los problemas al no tener que lidiar con Selenium.
• Proporciona herramientas que nos facilitan el desarrollo de los tests, por ejemplo, el IDE tiene el «Selector Playground» que nos da la referencia del DOM que necesitamos para interactuar con cierto elemento de la página. No más «inspect» y navegar en el HTML.
• Automáticamente graba la ejecución de los tests lo que hace que podamos utilizar estos vídeos en la reuniones de demo después de los Sprints para hacerlas más ágiles.
• Permite crear comandos propios a modo de reutilización de funcionalidad como hacemos con el patrón Page Object cuando trabajamos con Protrator.
• También puede realizar la comparación por screenshots al estilo de Jest.
• Permite lanzar los tests en modo consola sin necesidad de tener un navegador instalado que facilitan los procesos de integración continua.
• Cuando tenemos un test abierto en la herramienta cualquier cambio en el código del test provoca la ejecución automática en Cypress.

3. Vamos al lío

Para integrarlo con nuestros proyectos Angular, simplemente tenemos que ejecutar dentro de nuestro proyecto.

$> npm install --save-dev cypress

Este comando nos va a descargar el IDE de cypress y nos va a añadir la dependencia necesaria en nuestro proyecto.

Para comenzar a trabajar con él, simplemente tenemos que ejecutar:

$> npx cypress open

Este comando nos va a crear una carpeta llamada «cypress» en la raíz de nuestro proyecto, con 4 subcarpetas «fixtures», «integration», «plugins» y «support» y dentro de «integration» la carpeta «examples» con muchos ejemplos listos para ejecutar (pincha sobre ellos) y que nos ayudan a conocer la sintaxis.

Para empezar a desarrollar un test con Cypress tenemos que crear el fichero dentro del directorio «integrations» por ejemplo, en una carpeta «simples», al que vamos a llamar simple.spec.js, es aquí donde encontramos las primeras diferencias con Protractor, ya que Cypress utiliza Mocha como lenguaje base y escribe los tests en fichero .js y no .ts (aunque esto se puede configurar).

El test más simple que podemos ejecutar es acceder a la URL del proyecto (que tiene que estar corriendo). Por lo tanto, escribimos:

/// 

it('should visit home', () => {
    cy.visit('http://localhost:4200');
});

Si ahora vamos a la herramienta (el refresco es automático) veremos en el árbol de tests que existe la carpeta simple y que podemos ejecutar el test «simple.spec.js», al pinchar sobre él directamente se ejecuta mostrando la home de la aplicación (la aplicación tiene que estar levantada).

Si ahora pinchamos en el símbolo marcado en la imagen:

Vemos una utilidad llamada «Selector Playground» que nos ayuda a localizar cualquier elemento del DOM de forma automática y nos proporciona la sintaxis que tenemos que pegar en el test para interactuar con ese elemento.

De esta forma si te fijas en el tutorial antes mencionado de Protractor, el equivalente en Cypress para quedarnos con el primer elemento de la lista de usuarios sería:

/// 

it('nglabs List Users', () => {
    cy.visit('http://localhost:4200');
    cy.get('#user-0').contains('mojombo');
});

Por último, para poder ejecutar todos los tests sin necesidad de abrir el IDE, por ejemplo, en una fase de integración en un servidor de integración continua, podemos simplemente ejecutar:

$> npx cypress run

Este comando va a ejecutar los tests por consola y va a grabar un video por cada test ejecutado, que almacena en la carpeta vídeos que sobrescribe cada vez que ejecuta los tests.

Este sería un ejemplo de la salida, aunque se puede configurar para proporcionar otro tipo de reportes:

4. Conclusiones

Desde luego que por lo menos para el mundo de Angular mejora sustancialmente la experiencia de implementación de tests de aceptación y es seguro que lo vamos a incorporar a nuestro stack tecnológico en detrimento de Protractor.

Recordad que esta técnica y otras muchas más las encontraréis en la guía práctica de Angular y también ofrecemos cursos in-house y online.

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.