Cypress es una herramienta para realizar pruebas de extremo a extremo en aplicaciones web en el navegador. Permite validar flujos como si de un usuario se tratara y ayuda a detectar fallos en la interfaz de forma intuitiva. En este artículo explicaremos todo lo necesario para instalar y implementar estas pruebas automáticas.

Instalación y configuración

Para comenzar a usar Cypress, se requiere contar con Node.js instalado en el sistema. La instalación es directa mediante npm o yarn. Por ejemplo, con npm se puede instalar ejecutando el siguiente comando en la terminal:

npm install cypress --save-dev

Una vez instalado, se puede abrir la interfaz gráfica de Cypress con:

npx cypress open

Esta interfaz permite ver las pruebas disponibles y ejecutarlas en distintos navegadores soportados, como Chrome, Edge, Electron y Firefox entre otros.

Estructura del directorio de Cypress

Cuando se inicia Cypress por primera vez con npx cypress open, se genera una estructura de carpetas como la siguiente:

cypress/
|-- e2e/             # Pruebas E2E
|-- fixtures/        # Datos simulados (JSON)
|-- support/         # Utilidades y comandos personalizados
|-- downloads/       # Archivos descargados durante las pruebas
cypress.config.js    # Archivo de configuración de Cypress

Configuración de cypress.config.js

Cypress permite personalizar su configuración a través del archivo cypress.config.js o cypress.config.ts en TypeScript. Ejemplo de configuración básica:

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'https://google.com',
    viewportWidth: 1280,
    viewportHeight: 720,
    defaultCommandTimeout: 6000,
    retries: 2,
    video: false,
  },
});

Esta configuración establece la URL base, dimensiones del viewport, tiempo de espera por defecto y reintentos en caso de fallo.

Características principales

Cypress ofrece varios beneficios para la realización de pruebas e2e, entre ellos:

• API clara: La sintaxis es simple y permite escribir pruebas de manera intuitiva.
• Soporte de navegadores: Compatible con Chrome, Edge, Electron y Firefox.
• Recarga automática: Detecta cambios en los archivos de prueba y los ejecuta sin necesidad de reiniciar.
• Ejecución en modo headless o interactivo: Posibilidad de correr pruebas sin interfaz gráfica para mayor velocidad.
• Depuración en tiempo real: Permite inspeccionar el estado de la aplicación durante la ejecución de las pruebas.
• Integración continua: Compatible con GitHub Actions, Jenkins, GitLab CI/CD, entre otros.

Estas características facilitan la tarea de validar aplicaciones web y ayudan a detectar problemas a tiempo.

Ejemplo práctico

A continuación se muestra un ejemplo básico de cómo implementar una prueba con Cypress. En este caso, se verifica que una página web se cargue correctamente y contenga un texto específico.

describe('Prueba de carga de la página', () => {
  it('Debe cargar la página y mostrar el mensaje de bienvenida', () => {
    // Visita la URL de la aplicación
    cy.visit('https://google.com');

    // Comprueba que la página contenga el texto "Google"
    cy.contains('Google').should('be.visible');
  });
});

Este ejemplo ilustra cómo se puede escribir una prueba simple que valide el comportamiento básico de una página. La estructura describe e it ayuda a organizar las pruebas de forma clara y comprensible.

Ejecución de los tests desde la línea de comandos

Las pruebas pueden ejecutarse de dos formas:

• Modo interactivo (GUI):

  npx cypress open

  Se abre la interfaz donde se pueden ejecutar pruebas manualmente.

• Modo headless (sin interfaz, ideal para CI/CD):

  npx cypress run

  Este modo ejecuta todas las pruebas en segundo plano sin abrir una ventana de navegador.

Mejores prácticas para automatizar tests

Para escribir pruebas confiables y mantenibles, considera lo siguiente:

• Estructura clara: Usa describe e it para segmentar pruebas de forma ordenada.
• Datos controlados: Evita depender de datos externos, usa fixtures para pruebas consistentes.
• Pruebas independientes: No hagas que una prueba dependa de otra, cada test debe poder ejecutarse por separado.
• Evitar esperas manuales: Usa selectores y condiciones en lugar de cy.wait().
• Uso de comandos personalizados: Reutiliza lógica repetitiva con Cypress.Commands.add().
• Ejecución en CI/CD: Integra las pruebas en pipelines automatizados para detectar errores temprano.
• Limpieza del estado: Asegura que cada prueba comienza desde un estado limpio utilizando beforeEach() para reiniciar datos o autenticaciones.

Conclusión

Cypress es una herramienta práctica para la realización de pruebas end-to-end en aplicaciones web. Con el ejemplo presentado, es posible dar los primeros pasos y adaptar las pruebas a las necesidades específicas de tu proyecto.