Cómo utilizar Cypress para realizar pruebas de extremo a extremo en tus aplicaciones de React

Cómo usar Cypress para realizar pruebas de extremo a extremo en tus aplicaciones de React

React es un marco popular para construir aplicaciones web. Es una de las mejores opciones para la ingeniería frontend debido a su enfoque declarativo para el diseño de interfaz de usuario y su arquitectura basada en componentes.

Pero puede ser difícil asegurarse de que su aplicación de React funcione como se desea en diferentes escenarios.

Cypress es un marco de pruebas de extremo a extremo que puede utilizar para probar sus aplicaciones de React. Y en este tutorial, explicaré cómo crear pruebas de extremo a extremo eficientes para su aplicación web utilizando Cypress y React.

Tabla de contenido

¿Qué es Cypress?

Cypress es un marco de pruebas de extremo a extremo de código abierto y sencillo diseñado para el desarrollo web moderno. Está basado en JavaScript.

La herramienta funciona dentro del navegador, lo que la diferencia de otras herramientas de pruebas como Selenium. La API concisa y sencilla que Cypress proporciona para interactuar con su aplicación facilita la creación y gestión de pruebas.

Puede crear y gestionar pruebas que imiten las interacciones del usuario con Cypress. También puede examinar su aplicación web en busca de comportamientos esperados y solucionar cualquier problema que surja.

Cómo configurar su entorno

Antes de comenzar a escribir pruebas, deberá configurar su entorno. Debe tener Node.js y npm (Node Package Manager) instalados para poder usar Cypress con su aplicación de React.

Puede visitar https://nodejs.org/en/ para descargar e instalar Node.js en su computadora si aún no lo tiene instalado. Para comenzar a usar Cypress después de instalar Node, puede seguir estos pasos:

1) Cree una aplicación de React

Utilizaremos Vite para desarrollar nuestra aplicación de React, ya que nos ayuda a crear aplicaciones web rápidamente y de manera eficiente.

Para comenzar, cree una aplicación de React en Vite ingresando el siguiente código en su consola:

npm create vite@latest

Vite le pedirá que le dé un nombre a su proyecto. Elija cualquier nombre que desee.

Luego, Vite le dará la opción de elegir el marco. Asegúrese de seleccionar React para esta lección.

Luego, le pedirá que elija entre TypeScript y JavaScript cuando seleccione React. Elija JavaScript.

Luego vaya al directorio de su proyecto y elija su proyecto.

Finalmente, escriba npm install después de eso, y luego npm start dev para iniciar su proyecto.

Su proyecto será alojado por Vite en http://localhost:5173/. Para ver su proyecto en un navegador, haga clic en el enlace que se proporciona.

2) Instale Cypress

Puede instalar Cypress en su proyecto utilizando este código install cypress –-save-dev en su terminal. Este código instala Cypress en su aplicación de React.

3) Inicializar Cypress

Ejecuta npx Cypress open desde el directorio de tu proyecto React. Este comando debería abrir la herramienta Cypress Test Runner, una herramienta gráfica para crear y gestionar pruebas. Ahora tendrás dos alternativas para realizar pruebas automatizadas:

Pruebas de extremo a extremo: Las pruebas de extremo a extremo implican que un navegador utilice una herramienta automatizada como Cypress, para que puedas realizar pruebas que consistan en funciones como hacer clic en botones, escribir en campos de entrada, etc. Esto ayuda a asegurarse de que todo funcione perfectamente.
Pruebas de componentes: Esto implica probar componentes individuales en lugar de toda la aplicación React.

¿Qué es el Cypress Test Runner?

El Test Runner se abre una vez que ejecutas npx cypress open. Es una herramienta gráfica para crear y gestionar pruebas. También te permite escribir y ejecutar tus casos de prueba en Cypress.

Después de seleccionar qué tipo de pruebas deseas realizar, la siguiente sección del Test Runner te ayuda a especificar qué script deseas ejecutar y te da la opción de seleccionar el navegador que deseas utilizar y validar tus pruebas según lo esperado.

4) Estructura de carpetas

Cypress guardará automáticamente sus archivos de pruebas y configuraciones dentro de tu proyecto en una subcarpeta llamada cypress.

Cómo escribir tu primera prueba en Cypress

Usaremos JavaScript para escribir nuestras pruebas en Cypress, las cuales se ejecutan dentro del navegador. Aquí te mostramos cómo crear la primera prueba de tu aplicación React.

Supongamos que deseamos comprobar si el Document Object Model (DOM) muestra nuestro elemento h2. Para lograr esto usando Cypress, sigue los siguientes pasos:

Paso 1: En tu carpeta de Cypress, ve al archivo e2e y allí verás una línea de código similar a esta:

describe('template spec', () => {    it('passes', () => {        cy.visit('https://example.cypress.io')    })    })

Paso 2: Ahora, en cy.visit, actualiza la dirección http predeterminada por la dirección de tu aplicación React (http://localhost:5173/, si lo recuerdas).

Paso 3: Deseamos comprobar si el DOM contiene nuestro elemento h2. Navega hasta el elemento que deseas probar y agrega data-testid como un atributo para lograrlo. Luego, asigna un nombre al atributo. Ejemplo: <h2 data-testid="cypress-h1"> Sitio web de Leo </h2>.

Paso 4: Agrega este fragmento de código a tu carpeta de cypress para comprobar si el atributo existe.

cy.get(‘[data-testid=”cypress-header”]’).should(“exists”):

Dado que Cypress está configurado para ejecutar pruebas al guardar, tan pronto como guardes cualquier cosa en tu editor de código, la prueba debería comenzar instantáneamente en Cypress.

Cómo interactuar con componentes de React

Debes estar familiarizado con la amplia variedad de comandos utilizados para imitar las interacciones del usuario con el fin de escribir pruebas más informativas.

Con su conjunto de comandos extenso para interactuar y probar elementos en línea, Cypress está diseñado específicamente para páginas web y aplicaciones web.

Estos comandos se utilizan en los scripts de prueba para imitar las interacciones del usuario y afirmar ciertos comportamientos de la aplicación. Cypress mantiene una cadena de promesas en tu nombre, lo que te permite encadenar comandos. Cada comando devuelve un “sujeto” al siguiente comando hasta que la cadena se rompe y se produce un error.

Los comandos de Cypress se pueden clasificar en los siguientes grupos: consultas (queries), afirmaciones (assertions), acciones (actions) y otros.

Consultas de Cypress

Estos son comandos de Cypress que recuperan el estado actual de tu aplicación. Se reintentan según sea necesario para asegurarse de que el elemento DOM u otros datos que ofrecen estén siempre actualizados. Devuelven un sujeto para que los comandos adicionales los utilicen o afirmen.

Aquí te mostramos algunas formas en las que puedes organizar y ejecutar pruebas:

Usando el método `.children()`

Para seleccionar y trabajar con los elementos hijo directos de un elemento padre en Cypress, utiliza el método .children(). Te permite acceder a elementos hijo específicos de un elemento padre dado navegando por el árbol DOM.

Aquí tienes algunos ejemplos de cómo usar .children() en Cypress:

Ejemplo 1: Suponiendo que tienes esta estructura HTML en tu archivo jsx:

<div class="parent-element"><div class="child">Hijo 1</div><div class="child">Hijo 2</div><div class="child">Hijo 3</div></div>

Para seleccionar y trabajar con los elementos hijo dentro del elemento .parent, utiliza la función .children() de la siguiente manera:

cy.get('.parent').children('.child').should('have.length', 3);// Haz clic en el segundo elemento hijo
cy.get('.parent').children('.child').eq(1).click();

Ejemplo 2: puedes realizar una serie de tareas utilizando .children() combinado con otras funciones de Cypress. Por ejemplo, puedes reconocer ciertos objetos hijo y definir sus propiedades:

// Asegúrate de que el primer elemento hijo contenga el texto "Hijo 1"
cy.get('.parent').children('.child').first().should('contain', 'Hijo 1');// Verifica que todos los elementos hijo tengan una clase específica
cy.get('.parent').children('.child').each(($child) => {  cy.wrap($child).should('have.class', 'child');});

Ejemplo 3: Muchas instrucciones de Cypress pueden concatenarse para realizar interacciones más complejas. Utilizando .children(), puedes seleccionar el elemento padre, los elementos hijo y luego operar con los elementos hijo como se demuestra en este ejemplo:

cy.get('.parent')  .children('.child')  .first()  .click()  .next()  .type('Soy Leo');

Para interactuar con el siguiente elemento hijo en este ejemplo, primero seleccionamos el elemento .parent, luego usamos .children('.child') para seleccionar sus elementos hijo, hacemos clic en el primer elemento hijo y luego concatenamos más instrucciones para escribir “Soy Leo”.

Estos ejemplos te muestran cómo seleccionar y trabajar con elementos hijo dentro de un elemento padre en Cypress utilizando la función .children(). Dependiendo de la estructura HTML única que tengas, puedes modificar el selector CSS dentro de .children() para seleccionar los elementos hijo que deseas objetivo.

Ahora deberías tener una idea de cómo funciona .children() y cómo puedes usar las consultas como tipo de comando Cypress. Hay más comandos de consulta, pero siempre puedes consultar la documentación en cypress.io para aprender más sobre ellos.

Usando el comando cy.get()

cy.get() es un comando fundamental en el framework Cypress. Lo utilizas para seleccionar y realizar acciones en elementos del DOM dentro de una aplicación web, incluyendo aquellos creados usando React.

Para seleccionar uno o más elementos del DOM de tu aplicación React para realizar pruebas, utiliza el comando cy.get(). Te permite seleccionar elementos con selectores CSS u otros métodos compatibles con Cypress.

La sintaxis fundamental de cy.get() es cy.get(selector).

selector es una instancia de un selector CSS. Hay formas alternativas de seleccionar componentes basados en atributos como ID, nombre de clase o datos.

Supongamos que tienes un componente React como este:

<button data-testid="Leo-button">Haz clic</button>

Puedes usar cy.get() para seleccionar el elemento del botón:

cy.get('[data-testid="Leo-button"]');

cy.get('#Leo-button') en este caso selecciona el elemento del botón con el ID “Leo-button”.

Afirmaciones de Cypress

Estos son comandos de Cypress que realizan afirmaciones sobre el estado de tu aplicación. Detienen tu prueba cuando alcanzan el límite de tiempo o se cumple la condición especificada.

Solo hay dos tipos de comandos de afirmación: .and() y .should(). Discutiré .should() aquí.

En Cypress, las afirmaciones relacionadas con el estado de elementos particulares se realizan utilizando el comando .should(). Te permite especificar los requisitos que los componentes deben cumplir. En caso de que los requisitos no se cumplan, la prueba fallará.

Uso fundamental de `.should()`

La sintaxis básica de .should() es la siguiente:

cy.get('selector').should('condition', expectedValue);

El o los elementos del DOM contra los que deseas hacer afirmaciones se eligen mediante cy.get('selector').
.should('condition', expectedValue) indica las condiciones y valores que los elementos elegidos deben cumplir.

También puedes encadenar afirmaciones con .should(). Las afirmaciones encadenadas con .should() se utilizan para verificar diferentes condiciones en el mismo elemento:

cy.get('input#username')  .should('be.visible')  .should('have.attr', 'placeholder', 'Ingresa tu nombre de usuario')

En este ejemplo, verificamos que el elemento de entrada de nombre de usuario está presente y que el contenido del marcador de posición es apropiado.

.should() también te permite utilizar afirmaciones personalizadas al pasar una función de devolución de llamada como valor esperado:

cy.get('.my-element').should(($element) => {  expect($element).to.have.class('active');  expect($element).to.have.css('color', 'rgb(255, 0, 0)');});

En este código, estamos utilizando afirmaciones personalizadas dentro de .should() para comprobar si el elemento tiene la clase “active” y si su color de texto es rojo.

Negación de afirmaciones con .should()

Se puede utilizar .should('not.condition', expectedValue) para refutar las siguientes afirmaciones:

cy.get('#error-message').should('not.exist');

Este código verifica que no hay un elemento con el ID “error-message”.

Combinando .should() con otros comandos

Para crear escenarios de prueba con mayor complejidad, puedes combinar .should() con otros comandos de Cypress. Por ejemplo, puedes usarlo para afirmar el estado final del elemento después de un comando .click() o .type().

cy.get('button').click().should('be.disabled');cy.get(‘[data-testid=”search-input”]’).type('Leonard').should('have.value', 'Leonard');

En estos casos, interactuamos primero con los elementos (haciendo clic en un botón o ingresando texto en un cuadro de entrada) y luego utilizamos los estados resultantes de los elementos según lo determinado mediante el uso de .should().

Al construir afirmaciones relevantes para confirmar el comportamiento y el estado de los elementos en tu aplicación web durante las pruebas de extremo a extremo, el comando .should() de Cypress es una herramienta potente.

Acciones de Cypress

Los comandos de Cypress que interactúan con tu programa como lo haría un usuario se llaman acciones. No interactúan con la página hasta que los componentes o elementos sean activables. Hay numerosos ejemplos, pero por ahora usaré el comando .click().

Para simular un clic en un elemento del DOM en Cypress, utiliza el comando .click(). Es una de las cosas más típicas y básicas que harás en tus pruebas de extremo a extremo.

Echemos un vistazo a un ejemplo de código para mostrar cómo utilizar .click():

Uso básico de `.click()`

La siguiente es la sintaxis de .click():

cy.get('selector').click();

Para elegir el elemento del DOM en el que deseas hacer clic, utiliza cy.get('selector'). .click() simula un evento de clic en el elemento seleccionado.

Gestionar clics durante la interacción del usuario

A veces, es posible que necesites interactuar con elementos antes de hacer clic en ellos. Por ejemplo, es posible que desees completar un campo de formulario y luego hacer clic en el botón de enviar. Puedes utilizar .type() para comunicarte con los campos de entrada antes de continuar con el botón de envío, .click():

cy.get(‘[data-testid=”username”]’).type('okosaleo');cy.get(‘[data-testid=”password”]’).type('password');cy.get(‘[data-testid=”Leo-button”]’).click();

En este caso, primero utilizamos .type() para ingresar valores en los campos de contraseña y nombre de usuario, y luego hacemos clic en .click() para hacer clic en el botón de inicio de sesión y enviar el formulario.

Gestionar elementos dinámicos

Puedes utilizar .click() al trabajar con elementos dinámicos, es decir, elementos que aparecen después de una acción. Para asegurarte de que el elemento está presente y listo para interactuar, puedes utilizar .click() en combinación con otros comandos.

Por ejemplo, hacer clic en un elemento dinámico. Supongamos que tienes una lista de elementos y quieres hacer clic en un elemento específico que aparece después de cierta interacción del usuario:

cy.get(‘[data-testid=”Leo-button”]’).click();cy.get('.dynamic-item').should('have.length.gt', 5);cy.get('.dynamic-item').eq(4).click();

En este ejemplo, para cargar cosas nuevas dinámicamente, primero hacemos clic en el botón "Leo-button". Después de asegurarnos de que se muestren al menos seis cosas usando .should('have.length.gt', 5), hacemos clic en el quinto elemento usando .eq(4).

Otros comandos

Cypress tiene muchos otros comandos que no hemos discutido aquí pero que puedes usar para escribir otras pruebas. Puedes consultarlos en la documentación de Cypress aquí.

Cómo organizar y ejecutar tus pruebas de Cypress

Tu aplicación puede acumular una serie de pruebas con el tiempo. Cypress ofrece varios métodos para configurarlas y gestionarlas de manera efectiva.

Plugins

Para ayudar con tareas como crear informes de cobertura de código y simular APIs, Cypress ofrece una serie de extensiones y plugins.

Los plugins son módulos de JavaScript especialmente diseñados que te permiten modificar y agregar nuevas funciones al marco de pruebas de Cypress. Con el uso de plugins, puedes aumentar las capacidades de Cypress y personalizarlo para adaptarlo a tus requisitos específicos.

Los plugins de Cypress incluyen:

Integraciones: Cypress puede integrarse con otros programas, servicios y sistemas mediante la creación de plugins. Ejemplos de estos incluyen canalizaciones de implementación, sistemas de control de versiones y plataformas para integración continua (CI).
Comandos personalizados: Para encapsular y reutilizar procedimientos de prueba rutinarios o interacciones con tu aplicación, puedes definir comandos personalizados utilizando plugins. Esto mejora la organización y mantenibilidad de tu código de prueba.

Hay muchas más funciones de plugins que ofrece Cypress. Los plugins son una forma flexible de personalizar tu marco de pruebas para las necesidades específicas de tu proyecto, aumentar el poder de tus pruebas y organizar y mantener mejor tu código de prueba.

Bloques de descripción

El marco de pruebas Mocha, que se integra con Cypress para ayudarte a organizar y estructurar tus suites de prueba, incluye bloques de descripción. Estos bloques de descripción proporcionan una estructura clara a tus pruebas y te ayudan a agrupar casos de prueba relacionados.

Puedes usar bloques de descripción para categorizar y explicar la funcionalidad y el comportamiento del programa que estás evaluando.

Propósito de los bloques de descripción en Cypress

Organizar casos de prueba: Puedes organizar casos de prueba relevantes juntos mediante el uso de bloques de descripción. Un bloque de descripción puede realizarse para una característica, parte o funcionalidad específica de una aplicación.
Mejorar el marco de pruebas: Proporcionan a tus pruebas un marco jerárquico que facilita la exploración y comprensión de la suite de pruebas. Con esta estructura, los desarrolladores y probadores pueden encontrar pruebas específicas más rápidamente.
Claridad y documentación: Puedes dar títulos a tus pruebas que sean legibles y descriptivos para los humanos mediante el uso de bloques de descripción. Esto funciona como un tipo de documentación de prueba.

Un bloque de describe se estructura de la siguiente manera:

describe('Descripción de la suite de pruebas o característica', function () {  // Aquí van tus casos de prueba (bloques it)});

"Descripción de la suite de pruebas o característica": Es una cadena que contiene una descripción de la suite de pruebas o característica. Actúa como el título del grupo de casos de prueba.
function () { /*... */ }: Esta función contiene los diversos casos de prueba relacionados con este bloque describe y se escriben dentro de bloques it.

Cómo utilizar los bloques de descripción y comandos personalizados

Imaginemos que estás evaluando la funcionalidad de inicio de sesión de una aplicación web. Así es como podrías estructurar tus pruebas utilizando bloques de descripción:

describe('Funcionalidad de inicio de sesión', function () {  // Este es el bloque de descripción externo para la funcionalidad de inicio de sesión  it('debe mostrar el formulario de inicio de sesión', function () {    // Lógica del caso de prueba para comprobar si se muestra el formulario de inicio de sesión  });  it('debe mostrar un mensaje de error al iniciar sesión inválido', function () {    // Lógica del caso de prueba para comprobar la visualización del mensaje de error  });  it('debe iniciar sesión correctamente con credenciales válidos', function () {    // Lógica del caso de prueba para comprobar el inicio de sesión correcto  });  describe('Restablecimiento de contraseña', function () {    // Bloque de descripción anidado para la funcionalidad de restablecimiento de contraseña    it('debe permitir a los usuarios solicitar un restablecimiento de contraseña', function () {      // Lógica del caso de prueba para la solicitud de restablecimiento de contraseña    });    it('debe restablecer la contraseña con un token de restablecimiento válido', function () {      // Lógica del caso de prueba para el restablecimiento de contraseña con un token válido    });  });});

En este caso:

Todos los casos de prueba para la característica de inicio de sesión están agrupados juntos en el bloque describe más externo.
Las pruebas relacionadas con la función de restablecimiento de contraseña están agrupadas juntas en un bloque describe que está dentro de él.

Puedes identificar fácilmente las pruebas relacionadas gracias a esta estructura jerárquica, que también ayuda a clarificar los objetivos de cada conjunto de casos de prueba.

El uso efectivo de los bloques describe en Cypress te permite escribir suites de pruebas bien estructuradas y de fácil acceso, lo que facilitará la gestión y el mantenimiento de las pruebas a medida que tu proyecto crece.

Comandos personalizados

Para simplificar tareas repetitivas y mejorar la legibilidad de tus pruebas, puedes crear comandos personalizados en Cypress.

Para encapsular y reutilizar procesos de prueba comunes o interacciones con la aplicación que se está probando, puedes desarrollar y agregar comandos personalizados (funciones de JavaScript definidas por el usuario) a tu suite de pruebas de Cypress. Estos pueden ayudar a mejorar los comandos incorporados de Cypress y la legibilidad, organización y mantenimiento de tu código de prueba.

Debes definir tu comando personalizado en uno de tus archivos de prueba, generalmente en el archivo commands.js. A menudo, puedes encontrar este archivo en el directorio cypress/support.

Por otro lado, puedes organizar tus comandos personalizados en diferentes archivos o carpetas según las características de tu programa.

Aquí tienes un ejemplo:

Cypress.Commands.add('nombreDelComandoPersonalizado', (arg0, arg1, ...) => {  // Define aquí la lógica del comando personalizado});

nombreDelComandoPersonalizado: Este es el nombre que utilizarás en tus scripts de prueba para identificar tu comando personalizado.
(arg0, arg1,...): Estos son los parámetros o argumentos que puedes dar al comando personalizado para modificar cómo se comporta el programa.
// Lógica del comando personalizado }: Aquí proporcionas las operaciones precisas que deseas que realice tu comando personalizado.

Cómo usar los comandos personalizados

Una vez que se define tu comando personalizado, puedes utilizarlo en tus scripts de prueba de la misma manera que cualquier otro comando incorporado de Cypress.

Usando la siguiente sintaxis, puedes invocar un comando personalizado:

cy.nombreDelComandoPersonalizado(arg0, arg1, ...);

Ventajas de los comandos personalizados

Los comandos personalizados de Cypress tienen varias ventajas:

Reutilización: Puedes encapsular interacciones intrincadas o comúnmente utilizadas con tu aplicación mediante comandos personalizados. Esto reduce la redundancia en tus scripts de prueba y fomenta la reutilización de código.
Legibilidad: Tus scripts de prueba se vuelven más accesibles y comprensibles cuando las tareas típicas se abstraen en comandos personalizados. Tu código de prueba será más autodescriptivo con comandos personalizados.
Mantenimiento: En lugar de tener que buscar y actualizar cada instancia de una acción en varios scripts de prueba, solo necesitas cambiar el comando personalizado una vez cuando necesites actualizar una acción o interacción común.
Consistencia: El uso de comandos personalizados garantiza que las interacciones comunes de tu suite de pruebas se lleven a cabo de manera consistente. Esto mantiene el proceso de prueba constante.

Esto es una ilustración básica de un comando personalizado que permite a un usuario iniciar sesión completando un formulario de inicio de sesión con su nombre de usuario y contraseña:

Cypress.Commands.add('login', (username, password) => {  cy.get('[username-input"]').type(username);  cy.get('[data-testid="password-input"]').type(password);  cy.get('[data-testid="Leo-button"]').click();});

Cypress Dashboard

Esta herramienta te permite supervisar videos de ejecuciones de texto, organizar pruebas y discutir resultados con tu equipo. Puedes encontrar el panel de Cypress en la ventana del ejecutador de pruebas.

Para ver el historial de tus ejecuciones de pruebas, haz clic en la pestaña “Runs”. La pestaña “Runs” incluirá un enlace “View Dashboard” en la parte superior. Al hacer clic en el enlace “View Dashboard”, tu navegador web lanzará el panel de Cypress.

Cypress ofrece el panel como un servicio basado en web. El objetivo del panel de Cypress es mejorar y agilizar el proceso de prueba y gestión de aplicaciones web. Proporciona una plataforma única para monitorear, analizar y gestionar tus ejecuciones de prueba utilizando Cypress.

Las principales características y capacidades del panel de Cypress son las siguientes:

Ejecución de pruebas en tiempo real: Puedes observar el proceso de ejecución de pruebas en tiempo real cuando utilizas el servicio del panel de Cypress para ejecutar pruebas de Cypress. Ofrece una vista en tiempo real de tus pruebas, incluyendo videos y capturas de pantalla en vivo del navegador. Esta herramienta es útil para realizar un seguimiento del progreso de las pruebas y solucionar problemas.
Colaboración y compartición: Los equipos de desarrollo y QA pueden trabajar juntos gracias al panel. Los resultados de las pruebas pueden ser accedidos y revisados por desarrolladores, testers y otros stakeholders con facilidad cuando se comparten las ejecuciones de pruebas con los miembros del equipo.
Gestión centralizada de pruebas: Puedes almacenar y gestionar tus resultados de pruebas de Cypress de forma centralizada utilizando el panel de Cypress. Las ejecuciones de pruebas pueden ser accedidas y organizadas desde un único lugar.
El panel de Cypress facilita la ejecución de pruebas simultáneas en múltiples computadoras y navegadores web. Esto puede acelerar considerablemente el proceso de ejecución de pruebas y proporcionarte los resultados que necesitas más rápidamente.
Información y análisis de pruebas: Al realizar un seguimiento de los resultados de las pruebas a lo largo del tiempo, puedes obtener más información sobre tus ejecuciones de pruebas. El panel de Cypress ofrece análisis completos, incluyendo tiempos de ejecución, estados de pasar/fallar y más. Puedes utilizar estos datos para encontrar tendencias y patrones en tus resultados de pruebas.
Automatización y programación de pruebas: Puedes automatizar el proceso de pruebas programando pruebas para que se ejecuten en momentos o intervalos predeterminados. Tanto la ejecución de pruebas de regresión como el mantenimiento de la cobertura de pruebas en curso pueden beneficiarse de esto.

Estas son algunas de las funciones y atributos que ofrece el panel de control Cypress.

dashboard-analytics-overview — Aquí tienes un ejemplo de cómo se ve el panel de control Cypress

Cómo depurar tu código con Cypress

Es fácil depurar tus pruebas con Cypress. Para detener la ejecución de la prueba y ver el estado de una aplicación en el navegador, añade cy.debug(). Veamos un ejemplo de cómo utilizar cy.debug en Cypress:

describe('Ejemplo de depuración en Cypress', () => {  it('realiza un inicio de sesión y verifica el perfil de usuario', () => {    cy.visit('/login');    cy.get('#username-input').type('testuser');        // Pausa la ejecución de la prueba para inspeccionar el estado de la aplicación    cy.pause();    cy.get('#password-input').type('password123');    cy.get('#login-button').click();    // Continúa con las aserciones    cy.url().should('include', '/profile');    cy.get('.user-info').should('contain', 'Bienvenido, testuser');  });});

En este ejemplo, la prueba se detendrá cuando alcance el comando cy.pause(), y el Cypress Test Runner te pedirá que veas la consola de DevTools.

Después de eso, puedes interactuar con el programa, examinar el DOM, verificar variables y ejecutar más comandos de Cypress de forma interactiva para fines de depuración a través de la consola.

Depuración a través del “Time Travel”

Cypress también tiene una poderosa capacidad conocida como “Time Travel Debugging” (Depuración de Viaje en el Tiempo). Esta característica te permite ver el estado actual de tu aplicación en cualquier momento mientras se está probando. Esto simplifica enormemente el proceso de diagnóstico.

Utilizando esta función, puedes grabar y reproducir etapas de ejecución de pruebas para solucionar problemas en tus pruebas de Cypress. Al darte una representación visual del proceso de ejecución de pruebas paso a paso, te ayuda a identificar y resolver problemas con tus pruebas y aplicación. Utilizando Desarrollo Guiado por Pruebas (Test Driven Development, TTD), puedes ver de forma interactiva el estado de tu aplicación en diferentes etapas de la ejecución de la prueba.

Así es como funciona la depuración de viaje en el tiempo de Cypress:

Primero debes grabar una ejecución de prueba para utilizar TTD. Puedes hacer esto utilizando el servicio Cypress Dashboard o ejecutando tus pruebas localmente con el parámetro --record.

Este es un ejemplo de cómo realizar pruebas mientras se graba:

npx cypress run --record

Por defecto, la prueba se ejecuta en el navegador Electron.

Luego puedes utilizar la interfaz web del Cypress Dashboard una vez que la ejecución de la prueba haya terminado y los resultados se hayan enviado al Cypress Dashboard.

A continuación, encuentra la ejecución de prueba que deseas depurar en el Cypress Dashboard y haz clic en ella. Esto te llevará a la página con los detalles de la prueba.

Puedes ver una representación de la línea de tiempo del estado de tu aplicación en cada ejecución de comando Cypress en la página de detalles de la prueba.

Para ver el estado de la aplicación en un momento determinado, haz clic en una instantánea en la línea de tiempo. Puedes examinar registros de consola, trabajar con el DOM e incluso ejecutar comandos de Cypress en el contexto de esa instantánea.

Para examinar el estado de la aplicación en diferentes fases de la prueba, puedes ir a puntos específicos en la línea de tiempo o recorrer cada comando en la línea de tiempo uno por uno.

Este es un ejemplo de cómo aplicar TTD en una prueba de Cypress:

describe('Ejemplo de Time Travel Debugging', () => {  it('realiza un inicio de sesión y verifica el perfil de usuario', () => {    cy.visit('/login');    cy.get(‘[username-input”]’).type('testuser');    cy.get(‘[password-input”]’).type('password');    cy.get(‘[login-input”]’).click();    // En este punto, es posible que deseemos realizar TTD para inspeccionar el estado de la aplicación    // y asegurarnos de que el usuario regrese a la página de perfil.        cy.url().should('include', '/profile');    cy.get('.user-info').should('contain', 'Bienvenido, testuser');  });});

En este escenario, es posible que encuentres un problema que desees diagnosticar después de ingresar la información de inicio de sesión y hacer clic en el botón de inicio de sesión.

Para asegurarte de que el usuario está en la página de perfil y de que se muestra correctamente su nombre, puedes utilizar TTD para detenerte en la aserción cy.url() y verificar el estado de la aplicación.

Con TTD, puedes examinar el estado de la aplicación en diferentes momentos para depurar e identificar problemas en tus pruebas de Cypress de forma interactiva, lo que te ayudará a encontrar y solucionar problemas de manera más eficiente.

Integración Continua

Las pruebas de Cypress pueden integrarse en tu flujo de trabajo de integración continua (CI) utilizando soluciones como Travis CI, GitHub actions, Jenkins o CircleCI. Hablemos sobre la integración continua utilizando GitHub actions:

Integración Continua de Cypress utilizando GitHub Actions

Puedes automatizar las pruebas de tus aplicaciones web con Cypress como parte de tu flujo de trabajo de desarrollo con Integración Continua (CI) utilizando GitHub Actions.

Puedes crear flujos de trabajo utilizando GitHub Actions que automatizan una variedad de procesos, como la ejecución de pruebas de Cypress, cada vez que se realizan cambios en tu código fuente. Veamos cómo configurarlo.

Prerrequisitos:

Repositorio de GitHub: Las pruebas de Cypress y el código de la aplicación deben estar ubicados en un repositorio de GitHub.
Configuración de Cypress: Verifica que Cypress esté instalado en tu proyecto y que tus configuraciones de pruebas de Cypress sean precisas. Puedes utilizar Cypress Open para configurar y ejecutar las pruebas localmente.

Paso 1: Establecer una Configuración del Flujo de Trabajo:

Crea un archivo en tu repositorio de GitHub llamado “configuración del flujo de trabajo”. El flujo de trabajo de CI se define en este archivo, que generalmente se denomina .github/workflows/cypress.yml. También proporciona instrucciones sobre cuándo y cómo ejecutar las pruebas de Cypress.

A continuación se muestra un ejemplo de un archivo de configuración simple:

name: Pruebas de Cypresson:  push:    branches:      - main # Ajusta según la rama predeterminada de tu repositoriojobs:  cypress:    runs-on: ubuntu-latest    steps:    - name: Comprobar código      uses: actions/checkout@v2    - name: Instalar dependencias      run: npm install    - name: Ejecutar pruebas de Cypress      run: npm run cypress:run

Cada vez que se realiza un push en la rama main, se establece un proceso para ejecutar las pruebas de Cypress mediante este archivo de configuración. Esto puede modificarse según tus necesidades.

Paso 2: Definir los Scripts `npm`:

Define los scripts npm en tu archivo package.json para poder ejecutar las pruebas de Cypress. Por ejemplo:

"scripts": {  "cypress:run": "cypress run",  "cypress:open": "cypress open"}

Mientras que cypress:open se utiliza para ejecutar las pruebas interactivamente durante el desarrollo, cypress:run se utiliza para ejecutar las pruebas de Cypress en modo headless.

Paso 3: Agregar al Repositorio de GitHub

Agrega tu código de la aplicación y el archivo de configuración de GitHub Actions (cypress.yml) a tu repositorio de GitHub. Envía las modificaciones a GitHub.

Paso 4: Activar GitHub Actions:

Si aún no lo has hecho, ve a tu repositorio de GitHub, elige la pestaña “Actions” y activa GitHub Actions para tu repositorio.

Paso 5: Gestionar tu Proceso:

GitHub Actions lanzará automáticamente el proceso especificado, que incluye tus pruebas de Cypress, cada vez que realices cambios en tu repositorio.

Paso 6: Examinar los Resultados:

La página “Actions” de tu repositorio de GitHub es donde puedes ver el estado y los resultados de tus pruebas de Cypress. Se mostrarán los resultados de las pruebas y los registros, lo que te permitirá diagnosticar y buscar problemas.

Opción Headless

Cypress ofrece una opción headless para las pruebas de integración continua (CI). Sin el ejecutador de pruebas de Cypress, aún puedes ejecutar Cypress en modo headless. Utiliza el comando npx cypress run, esto simplemente significa que no hay una interfaz de usuario gráfica involucrada, por lo que el ejecutador de pruebas no se despliega, aquí principalmente escribimos scripts para usar Cypress.

Los navegadores web que funcionan sin una interfaz de usuario gráfica, o navegadores headless, son apropiados para las pruebas automatizadas en contextos de servidores como sistemas de integración continua/entrega continua.

Cuando ejecutas las pruebas de Cypress en modo headless, no se muestra una ventana de navegador visible durante la ejecución de las pruebas. Esto es muy útil cuando realizas pruebas sin una interfaz de usuario en un flujo de integración continua y entrega automatizada.

Para usar esto, coloca el comando npx cypress run en tu terminal.

Cypress lanzará tu prueba en un navegador electron cuando ejecutes este comando.
Al finalizar, Cypress proporcionará automáticamente un video y capturas de pantalla de la ejecución de la prueba en caso de que alguna prueba falle, lo que facilita la depuración.
El usuario puede ajustar las capturas de pantalla y los videos. La carpeta etiquetada como “screenshots and videos” contiene tanto las capturas de pantalla como los videos que produce Cypress.

Otra forma de ejecutar pruebas es mediante la adición de scripts a tu archivo package.json. Puedes agregar scripts que consistan en pares de clave y valor que funcionan como objetos, siendo la clave el nombre del comando y el valor el comando que se está ejecutando.

Veamos cómo ejecutar una prueba en modo “headless” usando un par de clave-valor:

"script": {    "cypress:run": "cypress run",    "cypress:open": "cypress open"},

Esta línea de código debe encontrarse en tu archivo package.json.

En este código, "cypress:run" y "cypress:open" son las claves y "cypress run" y "cypress open" son los comandos. Para ejecutar el comando, necesitamos usar el npm run seguido de la clave utilizada, por ejemplo: npm cypress:run.

Espero que ahora entiendas cómo ejecutar pruebas en modo “headless” en Cypress.

Conclusión

Cypress es una herramienta efectiva que puedes utilizar para probar tus aplicaciones web. Puedes usarla para escribir pruebas de extremo a extremo que aseguren que tus proyectos de React funcionen como se espera y detecten cualquier problema.

Cypress es una útil adición a tu arsenal de pruebas debido a su Test Runner interactivo, API fácil de usar y sólidas funciones de depuración. Ahora, adelante y utiliza Cypress para probar tus aplicaciones de React y asegurarte de que la experiencia del usuario sea perfecta y sin errores.

Si deseas aprender más detalles sobre Cypress, puedes consultar su documentación en cypress.io. ¡Brindemos por tus pruebas!