Last Updated: 2019-08-31

¿Para qué automatizar la ejecución de un navegador web?

Los navegadores son aplicaciones cuya principal función es permitir el acceso a contenido web al consultar información de servidores en internet (por medio de varios protocolos) y renderizar contenido mixto en una interfaz gráfica. Las aplicaciones web existen en función de estos navegadores, ya que son la principal plataforma de interacción para ellas y, por ende, representan un objetivo importante al momento de hacer pruebas automáticas sobre este tipo de aplicaciones.

Teniendo en cuenta lo anterior, es apenas natural hacer pruebas E2E para validar el comportamiento de las aplicaciones web. Esto se hace por medio de herramientas como Cypress, que automatizan la interacción con los navegadores web por medio de comandos escritos en un lenguaje de programación convencional (en este caso, JavaScript). De esta forma es posible explorar la totalidad de las aplicaciones web que desee probar.

¿Qué es Cypress?

Cypress es una librería lanzada en 2016 que brinda un conjunto de herramientas que se compone principalmente del test runner y del dashboard con los resultados de la ejecución, los cuales permiten automatizar navegadores como Chrome, Chromium, Edge, Electron y Firefox, además de presentar una ejecución en vivo de pruebas sobre una aplicación web gracias a su funcionamiento record and replay. Cypress está basado en JavaScript y es accesible por Node.js o por su aplicación ejecutable, la cual provee una interfaz bastante sencilla e intuitiva para diseñar y ejecutar pruebas escritas en JavaScript.

¿Qué construirá?

Al final de este tutorial usted tendrá:

• Un script de prueba de Cypress que interactúa con una aplicación web.
• Un video de la ejecución de la prueba.

¿Qué aprenderá?

Al desarrollar este tutorial aprenderá:

• Cómo interactuar con una aplicación web automatizando un navegador.
• Cómo utilizar Cypress para automatizar pruebas de GUI y capturar su ejecución.

¿Qué necesita?

• Una versión actualizada de Node.js instalada en su computadora.
• Una versión actualizada del manejador de paquetes npm instalada en su computadora.

Cypress es un proyecto de código abierto. Este se aloja en un repositorio público de GitHub al cual puede acceder en el siguiente enlace: https://github.com/microsoft/playwright. Se sugiere que lea la documentación presente en el archivo Readme.md de este repositorio para comprender todos los detalles necesarios para automatizar cada aspecto posible de un navegador.

Instalar las herramientas de Cypress

Dado que la instalación de Cypress tiene un tamaño significativo, se recomienda que, por lo general, quien vaya a utilizar un proyecto de Cypress cuente con las herramientas de forma global en su máquina. No es recomendable que Cypress sea una dependencia a nivel de cada proyecto que vaya a crear pruebas haciendo uso de sus APIs, pues con cada nuevo proyecto tendría una nueva instalación de todas las herramientas y navegadores. No obstante, puede ser válido hacer la instalación a nivel de proyecto si es el único caso en el que se va a utilizar.

Con esto en mente, abra una terminal y ejecute el siguiente comando:

npm install -g cypress

Explorar la interfaz gráfica

Cypress cuenta con una aplicación con interfaz gráfica para desarrollar y ejecutar pruebas. Aunque es posible instalar una versión binaria ejecutable de Cypress, esta misma aplicación es accesible con las herramientas de CLI que ya ha descargado. Para abrir esta aplicación, ejecute, en una terminal, el siguiente comando:

cypress open

La interfaz gráfica puede tomar un tiempo en abrir. Una vez la haya abierto, explore los contenidos de la misma. Podrá ver un diálogo de bienvenida donde se le indica que se han creado varios archivos con ejemplos de pruebas que puede hacer con Cypress. Haga clic en el botón "OK, got it!" para cerrar el diálogo y ver la interfaz principal. En la parte superior podrá ver tres pestañas principales denominadas "Tests", "Runs" y "Settings". La pestaña "Tests" contiene un listado de las pruebas que existen dentro del directorio donde ejecutó el comando open y tienen formato .js. La pestaña "Runs" contiene las grabaciones y resúmenes de resultados que se han obtenido durante la ejecución de pruebas desde el perfil donde está iniciada la sesión. La pestaña "Settings" contiene una lista colapsable con los valores actuales para varios aspectos de configuración a nivel de Cypress como los parámetros del archivo de configuración, la versión de Node.js, la configuración actual de proxy, la herramienta para abrir archivos, y las configuraciones experimentales. Esta pestaña no permite cambiar ninguno de los valores, pero cada elemento de la lista contiene un enlace en la parte superior derecha con el texto "Learn More", que le llevará a la página de documentación correspondiente.

Ahora que ha explorado la interfaz, desde la pestaña "Tests", ejecute una de las pruebas de ejemplo que se generaron, como actions.spec.js. Verá que se abre una ventana del navegador que estaba seleccionado en la parte superior derecha de la interfaz, y en esta ventana verá un panel lateral a la izquierda que lista los eventos de Cypress y un cuadro amplio a la derecha con el navegador automatizado reaccionando ante los eventos de la prueba.

Cypress es un proyecto de código abierto. Este se aloja en un repositorio público de GitHub al cual puede acceder en el siguiente enlace: https://github.com/cypress-io/cypress. Se sugiere que lea la documentación presente en el sitio web oficial del siguiente enlace: https://www.cypress.io/.

Conocer los principios de una prueba en Cypress

Cypress se conforma de un Test Runner local y un Dashboard completo que brinda la opción de guardar ejecuciones de las pruebas. Las pruebas de Cypress son archivos .js que utilizan elementos estructurales de Mocha.js (describe, it) e instrucciones de la librería cypress, donde se pueden encontrar instrucciones de interacción con el navegador, aserciones sobre el contenido de la página, modificaciones sobre el entorno de la prueba, instrucciones propias, llamados a plugins, respuestas ante eventos del navegador, entre otros.

La ejecución de Cypress no es secuencial con respecto a las líneas de código, como en cualquier programa de JavaScript. Cypress se encarga de encolar los eventos asíncronos para ejecutarlos de forma síncrona, y permite encadenar eventos por medio de las funciones then, o por medio del uso de plugins. Además, existen estructuras útiles para organizar estos aspectos, como la definición de una prueba con it, o los manejadores de ciclo de vida beforeEach y afterEach.

Dado que Cypress está orientado por el principio Record & Replay, y por ende toda prueba almacena automáticamente un video de la ejecución en el navegador, donde se pueden ver los registros básicos de las operaciones ejecutadas y los errores encontrados. Usualmente no es necesario incluir registros adicionales en sus pruebas.

Conocer las funcionalidades de Cypress

Cypress ofrece una amplia cantidad de funcionalidades y herramientas para probar los diferentes aspectos de una aplicación web por medio de un navegador. Principalmente, las funcionalidades de Cypress comprenden las interacciones más básicas que se pueden tener con un navegador web, lo que incluye clics (normales, derechos, dobles), focus, hover, llenar campos de texto, entre otros. Entre las características más importantes de Cypress se encuentra la capacidad de capturar el estado de la aplicación web en la prueba por medio de videos, capturas de pantalla y registros, lo cual brinda la posibilidad de reproducir las pruebas en un futuro. Además, Cypress permite controlar eventos especiales como eventos de red, eventos de consola, información de memoria local del navegador como cookies, y además, permite la opción de depurar la prueba en tiempo real.

Cypress se diferencia significativamente de Selenium y WebDriver en términos de su arquitectura, y permite automatizar versiones ligeras de los navegadores que se instalen localmente junto con la librería. La interacción de Cypress con estos navegadores se maneja de forma asíncrona, y se quita esta responsabilidad al usuario que crea las pruebas, ya que sus comandos esperan automáticamente una respuesta antes de continuar. Para extender las capacidades de Cypress se pueden crear plugins, donde el manejo asíncrono ya pasa a ser responsabilidad del usuario.

Conocer los comandos de consola de Cypress

Como se mencionó anteriormente, es posible adquirir una versión ejecutable de Cypress donde se cuenta únicamente con la interfaz gráfica. No obstante, este tutorial se concentra en las herramientas completas con el manejo del CLI para poder conocer más sobre el uso y funcionamiento de Cypress. Además, como se mencionó en el paso anterior, es posible acceder a la interfaz gráfica de la versión ejecutable de Cypress por medio del comando cypress open.

Otros comandos relevantes de Cypress comprenden aquellos comandos para consultar el estado de la instalación de Cypress. Estos se explican a continuación:

• cypress info: Permite ver el entorno de Cypress con los navegadores instalados, configuración de proxy, variables de entorno, las rutas de los archivos que usa Cypress e información del sistema.
• cypress verify: Indica si Cypress está instalado correctamente y es ejecutable.
• cypress version: Indica la versión de las herramientas de Cypress (CLI y ejecutable binario).

Además de estos, el comando de mayor interés en Cypress es el que permite ejecutar las pruebas:

cypress run [options]

Este comando cuenta con múltiples opciones que puede conocer en el siguiente enlace: https://docs.cypress.io/guides/guides/command-line.html#Commands.

Para el caso de este tutorial se harán pruebas para verificar la correcta funcionalidad de una sencilla página web construida en Angular, cuya única funcionalidad es permitir el registro, inicio de sesión y visualización de los usuarios creados.

Interactuar con la interfaz web objetivo

Ingrese al siguiente enlace para conocer la aplicación en cuestión: https://angular-6-registration-login-example.stackblitz.io/register. Interactúe con los botones "Register" y "Cancel" y luego proceda a llenar el formulario de registro. Verá que ahora será redirigido a la página de login, pero tendrá un mensaje adicional indicando el éxito de la operación de registro. Ingrese ahora con las credenciales que recién registró y podrá ver una página con su nombre de usuario.

El flujo estándar de esta aplicación debería ser como el de la siguiente imagen:

Imagen 1. Flujo de vistas de la aplicación web

Sin embargo, usted podrá notar que existen ciertos detalles que pueden variar según las condiciones del escenario.

Listar las acciones que comprenden la prueba

Para el caso de este tutorial, basta con que aprenda a hacer operaciones básicas en su prueba como abrir URLs, hacer clics, llenar campos de texto y consultar la presencia de determinados elementos gráficos. En particular, se espera construir una prueba que haga lo siguiente:

1. Lanzar un navegador e ingresar a la página web de ejemplo.
2. Hacer clic en el enlace "Cancel" y verificar la URL.
3. Hacer clic en el enlace "Register" y verificar la URL.
4. Hacer clic en el botón "Register" y verificar la existencia del texto de retroalimentación del campo del nombre.
5. Llenar todos los campos del formulario de registro con valores cualquiera y la contraseña "MISO4208".
6. Hacer clic en el botón "Register" y verificar la existencia del mensaje de éxito en la creación del usuario.
7. Llenar los campos del formulario de inicio de sesión con las mismas credenciales.
8. Hacer clic en el botón "Login" y verificar la existencia del nombre de usuario en el listado de usuarios.

Crear un proyecto para la prueba

Si usted exploró la interfaz de Cypress como se indicó en un paso anterior, habrá notado que un proyecto de Cypress requiere de un archivo de configuración y un directorio cypress con varios subdirectorios como el directorio "fixtures", que contiene archivos en formato .json para representar datos de prueba, el directorio "integration", que contiene el código que realmente va a ejecutar las pruebas automáticas, el directorio "plugins", que contiene archivos que permiten conectar las adiciones con el proyecto, y el directorio "support", que contiene dos archivos con formato .js que permiten sobreescribir o escribir comandos personalizados para Cypress.

En caso de que haya omitido el paso de exploración de la interfaz gráfica, o en caso de que desee crear el proyecto en una nueva ubicación, asegúrese de establecer la estructura de archivos mencionada anteriormente en la ruta que desee ya sea de forma manual, o automáticamente al abrir la interfaz de Cypress desde dicha ruta. En todo caso, es importante aclarar que los contenidos de los directorios que efectivamente se vayan a utilizar deben estar vinculados en el archivo de configuración cypress.json. En caso de que no vaya a utilizar todos los directorios, solo debe omitirlos en el archivo de configuración.

Ahora bien, su archivo de configuración debe tener la estructura de un JSON, y la única propiedad fundamental para poder correr las pruebas es el projectId. Abra el archivo cypress.json y asegúrese de que tenga el siguiente contenido:

{
    "projectId":"Registration-example"
}

Implementar las acciones de la prueba

Ahora que cuenta con una estructura básica y un archivo de configuración, cree un nuevo archivo llamado registration.spec.js en el directorio cypress/integration de su proyecto. Allí usted podrá escribir instrucciones con el API de Cypress, además de otras instrucciones que vienen de extensiones como Mocha.js, Chai, entre otras (que puede consultar en el siguiente enlace: https://docs.cypress.io/guides/references/bundled-tools.html#).

Abra el archivo registration.spec.js que acaba de crear y asegúrese que tenga el siguiente contenido:

describe('Testing basic Angular registration', () => {
    beforeEach(()=>{
       cy.visit('https://angular-6-registration-login-example.stackblitz.io/register')
        cy.wait(7000)
        cy.get('button').click()
    })
    it('Test links between registration and login page', () => {
        cy.get('a.btn.btn-link').click()
        cy.url().should('eq', 'https://angular-6-registration-login-example.stackblitz.io/login')
        cy.get('a.btn.btn-link').click()
        cy.url().should('eq', 'https://angular-6-registration-login-example.stackblitz.io/register')
    })
    it('Test form feedback', () => {
        cy.get('button.btn.btn-primary').click()
        cy.wait(1000)
        cy.get('div.invalid-feedback').then(($divs)=>{
            expect($divs.length).to.equal(4)
        })
    })
    it('Create an user and login', ()=>{
        cy.get('form').within(() => {
            cy.get('input[formcontrolname="firstName"]').type('Monitor')
            cy.get('input[formcontrolname="lastName"]').type('Pruebas')
            cy.get('input[formcontrolname="username"]').type('pruebas')
            cy.get('input[formcontrolname="password"]').type('MISO4208')
            cy.get('button.btn.btn-primary').click()
        })
        cy.wait(1000)
        //Redirected to login
        cy.get('div.alert.alert-success').should('be.visible')  
        cy.get('form').within(() => {
            cy.get('input[formcontrolname="username"]').type('pruebas')
            cy.get('input[formcontrolname="password"]').type('MISO4208')
            cy.get('button.btn.btn-primary').click()
        })
        cy.wait(1000)
        //logged in
        cy.get('h1').then(($header)=>{
            expect($header[0].innerText).to.equal('Hi Monitor!')
        })  
    })
  })

Lea el código e identifique qué instrucciones corresponden a las acciones de la prueba que se enunciaron en el paso anterior. Podrá notar que en ningún momento se incluyen instrucciones para guardar registros o capturar el estado de la prueba. Así mismo, podrá notar que las instrucciones no son nativas de JavaScript, y que además no se importó ningún módulo externo de forma explícita, pues el motor de Cypress maneja esto internamente. En ciertos momentos se agregaron tiempos de espera de forma manual con la instrucción cy.wait(1000), esto se debe a que el comportamiento de esta página web, como el de varias SPA desarrolladas en Angular, es diferente al flujo tradicional y, por ende, maneja de forma distinta los eventos del navegador.

Para ejecutar el escenario, es necesario que haya guardado el archivo anterior. Desde una terminal, ubíquese en el directorio raíz del proyecto que creó, donde tiene el archivo cypress.json y el directorio cypress/integration. Una vez allí, ejecute el siguiente comando:

cypress run --headless

Esto lanzará Cypress en modo headless. También podría ejecutar la prueba desde la interfaz gráfica de Cypress, sin embargo, esto le brinda un menor control sobre las configuraciones.

Ahora que terminó la prueba, podrá ver que en su terminal aparece una retroalimentación como la que se muestra en las siguientes imágenes:

Imagen 2. Primera parte de los resultados en consola: características de la prueba

Imagen 3. Segunda parte de los resultados en consola: resultados de la prueba

Podrá ver entonces cuáles escenarios fueron exitosos, y posteriormente, desde un explorador de archivos podrá ver el directorio videos y el directorio screenshots, donde se guardan las capturas realizadas durante la prueba (en este caso, ninguna). El video que se genera es una grabación de lo que usted vería en el navegador si se ejecutara en modo headed.

¡Felicidades!

Al finalizar este tutorial, pudo familiarizarse con el proceso requerido para probar funcionalidades de una página web haciendo uso de Cypress.

Ahora podrá crear sus propios scripts de prueba para explorar las funcionalidades de otras aplicaciones web con la misma estrategia de este tutorial.

Créditos

Versión 1.0 - Mayo 30, 2020