Cypress es el framework de testing end-to-end y de componentes desarrollado por Cypress.io que se ha convertido en el estándar de facto para QA frontend en proyectos JavaScript y TypeScript. La versión 14, vigente en mayo de 2026, consolida un ecosistema maduro: component testing estable para React 19, Vue 3.5+, Angular 21 y Svelte 5, cy.intercept para interceptación y stubbing de red, Test Replay en Cypress Cloud para depurar fallos remotos en CI con el DOM y la red exactos del momento del fallo, paralelización inteligente con Smart Orchestration y un nuevo motor de detección de flakiness basado en analítica histórica.
A diferencia de Selenium o Playwright, Cypress se ejecuta dentro del mismo run loop que la aplicación bajo prueba, no comunica por WebSocket ni WebDriver. Esto le da acceso directo al DOM, a las funciones de la aplicación y al estado interno, lo que se traduce en auto-wait real (espera al elemento, no a un timeout arbitrario), time-travel debugging (snapshot del DOM en cada comando) y una experiencia de desarrollo donde el test se reescribe en caliente al guardar el archivo. La contrapartida histórica (un solo navegador por test, sin multi-tab nativo) se ha mitigado con cy.origin() para cross-origin y soporte oficial de Chrome, Edge, Firefox y Electron.
Este itinerario recorre Cypress de principio a fin para perfiles de QA, desarrollo frontend y full-stack: desde la instalación y la arquitectura hasta la integración en pipelines de CI/CD con GitHub Actions y Cypress Cloud, pasando por selectores data-cy, comandos personalizados, fixtures, cy.intercept para mockear respuestas, API testing con cy.request, component testing para los frameworks frontend mayoritarios y patrones como Page Object Model que mantienen las suites escalables.
Arquitectura de Cypress
El Test Runner de Cypress arranca un proceso Node que controla el navegador (Chromium, Firefox o Electron) e inyecta el código del test dentro del mismo proceso del navegador. El test corre en el mismo origen que la aplicación, lo que elimina la latencia de red entre runner y navegador.
flowchart LR
Node[Proceso Node Cypress] --> Plugin[Plugins / cy.task]
Node --> Browser[Navegador Chromium / Firefox / Electron]
Browser --> Iframe[iframe de la app bajo prueba]
Browser --> TestCode[Código del test en el mismo run loop]
TestCode -->|Acceso directo DOM| Iframe
TestCode -->|Acceso a window y stores| Iframe
Plugin -->|fs, DB, exec| Disk[Disco / DB / Procesos]
Auto-wait y retry
Los comandos de Cypress reintentan automáticamente hasta que la aserción asociada se cumple o se agota el timeout. No hace falta sleep ni waitFor manuales.
flowchart TD
A[cy.get data-cy=submit] --> B{Existe en el DOM?}
B -->|No| W1[Reintentar hasta defaultCommandTimeout]
B -->|Sí| C{.should visible?}
C -->|No| W2[Reintentar]
C -->|Sí| D{.should not.disabled?}
D -->|No| W3[Reintentar]
D -->|Sí| E[Ejecutar siguiente comando]
W1 --> B
W2 --> C
W3 --> D
Network intercept con cy.intercept
cy.intercept permite espiar y mockear cualquier petición HTTP de la aplicación: ideal para tests deterministas sin depender del backend real.
flowchart LR
App[Aplicación bajo prueba] -->|fetch / XHR| Cypress[cy.intercept matcher]
Cypress -->|stub fixture| Fixture[cypress/fixtures/usuarios.json]
Cypress -->|spy passthrough| Backend[Backend real]
Fixture --> App
Backend --> App
Cypress --> Test[Test: cy.wait alias y assertions]
Component testing
cy.mount monta un componente React, Vue o Angular en el navegador real (no jsdom) usando Vite o webpack como bundler.
flowchart LR
Spec[Component spec] --> Mount[cy.mount Component]
Mount --> Vite[Vite dev server]
Vite --> Browser[Navegador real]
Browser --> DOM[Componente renderizado]
DOM --> Asserts[cy.get .should auto-retry]
Test Replay en Cypress Cloud
Cuando un test falla en CI, Test Replay graba el DOM, la red y la consola exactos del fallo. El equipo abre el replay desde el navegador y depura como si el test estuviera ejecutándose en local.
flowchart LR
CI[GitHub Actions] -->|--record| Cloud[Cypress Cloud]
Cloud --> Run[Run con specs paralelos]
Run -->|fallo| Replay[Test Replay con DOM + network + console]
Replay --> Dev[Desarrollador depura en navegador]
Cloud --> Analytics[Analítica de flakiness y duración]
Qué incluye este itinerario
- Introducción, instalación y primer proyecto: qué es Cypress, arquitectura del Test Runner, instalación con npm, configuración con
cypress.config.tsy primer test funcional. - Comandos básicos:
cy.visit,cy.get,cy.find,cy.click,cy.type,cy.wait, modelo asíncrono y encadenamiento. - Selectores y aserciones: convención
data-cy,.should(),.and(), aserciones Chai-jQuery y comandos personalizados conCypress.Commands.add. - Fixtures y datos:
cy.fixturepara cargar JSON, aliases con.as()ycy.taskpara ejecutar código Node desde el test. - Network intercept:
cy.interceptpara spy y stub, mockeo de respuestas, status codes, delays y API testing concy.request. - Component testing:
cy.mountcon React 19, Vue 3.5+ y Angular 21, opciones de mount (props, providers, routing). - CI/CD y Cypress Cloud: GitHub Actions con la action oficial, Cypress Cloud, paralelización con
--parallely Test Replay. - Buenas prácticas: Page Object Model, prevención de flakiness, organización de suites y debugging con
.debug(),.pause()y Selector Playground. - Comparativa con Playwright: criterios técnicos y de equipo para elegir Cypress o Playwright en cada proyecto.
- Retos de código y proyecto integrador: tests E2E con
cy.intercept, component tests, suite con POM y pipeline en GitHub Actions con Cypress Cloud.
Público objetivo
- QA engineers y testers que necesitan dominar Cypress como herramienta principal de testing E2E en stacks JavaScript/TypeScript.
- Desarrolladores frontend (React, Vue, Angular, Svelte) que quieren escribir tests de componentes y E2E con el mismo lenguaje del proyecto.
- Desarrolladores full-stack que integran tests E2E en proyectos Next.js, Nuxt, Angular o SvelteKit con backend Node, Java o Python.
- DevOps y SRE responsables de pipelines de CI/CD que integran Cypress en GitHub Actions, GitLab CI o Jenkins con paralelización.
- Equipos B2B que migran desde Selenium o frameworks legacy hacia Cypress para reducir el coste de mantenimiento de sus suites de tests.
Prerrequisitos: conocimientos básicos de JavaScript o TypeScript (variables, funciones, async/await), HTML, CSS y HTTP. Es útil haber escrito tests unitarios anteriormente, aunque no es imprescindible.