Pruebas automatizadas - Curso de Cypress

Temario Completo de Cypress

Módulo 1: Introducción a Cypress

1. ¿Qué es Cypress?

   • Historia y propósito: Herramienta moderna para pruebas de software.

   • Diferencias con Selenium y otras herramientas de testing.

   • Ventajas: Ejecución en el navegador, Time Travel, depuración sencilla.

2. Conceptos básicos de pruebas automatizadas

   • Tipos de pruebas: E2E, unitarias, de integración, de componentes.

   • Importancia del testing en el desarrollo web moderno.

3. Requisitos previos

   • Instalación de Node.js (versión mínima 18.x o superior recomendada en 2025

   • Conocimientos básicos de JavaScript y HTML/CSS.

Módulo 2: Instalación y Configuración

1. Instalación de Cypress

   • Uso de npm o yarn: npm install cypress --save-dev.

   • Verificación de la instalación y apertura del Test Runner: npx cypress open.

2. Estructura de un proyecto Cypress

   • Carpetas principales: cypress/e2e, cypress/support, cypress.config.js.

   • Archivos generados por defecto: cypress.json (opcional en v14).

3. Configuración básica

   • Ajustes en cypress.config.js: baseUrl, viewport, timeouts.

   • Selección de navegadores: Chrome, Firefox, Edge, Electron (predeterminado).

4. Primeros pasos

   • Ejecución de pruebas de ejemplo proporcionadas por Cypress.

   • Modo interactivo vs modo headless: npx cypress run.

Módulo 3: Escritura de Pruebas Básicas

1. Sintaxis y comandos fundamentales

   • Uso de describe y it (heredado de Mocha).

   • Comandos básicos: visit(), get(), click().

2. Interacción con elementos

   • Selección de elementos con selectores CSS.

   • Acciones: type(), check(), select().

3. Aserciones

   • Uso de Chai: .should(), .expect().

   • Ejemplos: .should('be.visible'), .should('have.text', 'Hola').

4. Primer test práctico

   • Crear un test simple que visite una página y verifique un título.

**Módulo 4: Pruebas End-to-End (E2E)*

1. Navegación y verificación

   • Visitar URLs dinámicas: cy.visit('/ruta').

   • Verificación de redirecciones y estados de página.

2. Manejo de formularios

   • Rellenar formularios y enviarlos: cy.submit().

   • Validación de mensajes de éxito o error.

3. Pruebas de flujos complejos

   • Simulación de un usuario real: login, navegación, logout.

4. Capturas y videos

   • Configuración de capturas automáticas en caso de fallo.

   • Grabación de videos: ajuste en cypress.config.js.

Módulo 5: Pruebas Avanzadas

1. Manejo de solicitudes de red

   • Intercepción de solicitudes: cy.intercept().

   • Simulación de respuestas: mocks y stubs.

2. Comandos personalizados

   • Creación de comandos reutilizables en cypress/support/commands.js.

   • Ejemplo: Cypress.Commands.add('login', (user, pass) => {...}).

3. Manejo de dominios cruzados

   • Uso de cy.origin() para pruebas en múltiples dominios (mejorado en v14).

4. Pruebas de componentes

   • Configuración para frameworks como React, Vue o Angular.

   • Ejemplo: Montar un componente y validar su comportamiento.

Módulo 6: Depuración y Resolución de Problemas

1. Herramientas de depuración

   • Time Travel: Inspección paso a paso en el Test Runner.

   • Consola de desarrollador integrada.

2. Errores comunes

   • Timeouts: Ajuste de defaultCommandTimeout.

   • Elementos no encontrados: Uso de cy wait() o retries automáticos.

3. Logs y debugging

   • Uso de cy.log() y comandos de inspección.

Módulo 7: Integración y Automatización

1. **Integración Continua (CI)**

   • Configuración en GitHub Actions, CircleCI o Jenkins.

   • Ejemplo de script básico para CI.

2. Cypress Cloud

   • Registro y uso del Dashboard de Cypress.

   • Paralelización de pruebas y reportes en tiempo real.

3. Reportes

   • Generación de reportes personalizados (Mocha Awesome, JUnit).

   • Configuración para exportar resultados.

4. Tendencias en testing

   • Uso de IA en combinación con Cypress (ejemplo: sugerencias de aserciones).

   • Mayor enfoque en pruebas de componentes.