Cypress te permite correr pruebas más allá de la interfaz visual. Puedes ejecutarlas en modo headless, elegir el navegador, filtrar specs e incluso excluir pruebas según el browser, algo clave si trabajas con pipelines de CI/CD o necesitas integrar tus tests en un flujo automatizado.

¿Qué es el modo headless en Cypress y cuándo conviene usarlo?

El modo headless ejecuta tus pruebas sin abrir el navegador visualmente. Es el mismo concepto que usan drivers como Selenium o Puppeteer: literalmente significa "sin cabeza", porque no hay UI que mires mientras corre.

¿Cuándo uso modo headless? Cuando ya validaste que tu prueba pasa y quieres correrla en un pipeline, CI/CD o servidor. Es más rápido y no requiere que alguien dé clic manualmente.

Para configurarlo, abres tu package.json y separas tus scripts. Puedes dejar uno como test:ui con cypress open y crear otro test:headless con cypress run [01:30]. Ambos se ejecutan con npm run.

¿Qué genera Cypress automáticamente en modo headless?

Uno de los features más útiles aparece solo cuando corres en headless: Cypress graba videos y captura screenshots sin que configures nada extra [03:45].

• Videos de cada spec. Se guardan en la carpeta cypress/videos y puedes abrirlos para revisar la ejecución completa.
• Logs en terminal. Aquí sí verás los console.log que escribiste, porque se imprimen del lado del servidor.
• Reporte por spec. La terminal muestra cuántas pruebas pasaron, fallaron, quedaron pendientes o se saltaron.

Esto es oro puro cuando integras Cypress con un CI: si una prueba falla en el servidor, tienes el video como evidencia para depurar sin reproducir el error en local.

¿Cómo elijo el navegador en el que corren mis pruebas Cypress?

Por defecto, cypress run ejecuta en Electron en modo headless. Pero puedes pasar el flag --browser para cambiarlo [05:20].

• Chrome: cypress run --browser chrome. Cypress detecta la versión instalada y la muestra en consola.
• Firefox: cypress run --browser firefox. Útil para validar comportamientos específicos del motor de Mozilla.
• Electron: opción por defecto si no pasas ningún flag.

Un detalle importante: al momento de grabar esta clase existe un bug abierto en GitHub que impide generar videos cuando ejecutas en Firefox [07:10]. Si lo necesitas para evidencia, valida primero si ya está resuelto en tu versión.

¿Cypress soporta Safari? No por ahora, aunque está en el roadmap. Si necesitas cubrir Safari hoy, tendrás que combinar Cypress con otra herramienta.

¿Cómo ejecuto solo una prueba específica en Cypress?

Correr las seis specs cada vez que cambias algo es lento. Cypress te deja apuntar a un archivo concreto con el flag --spec seguido de la ruta [08:30].

Por ejemplo, un script así dentro de package.json:

"test:headless:firefox": "cypress run --browser firefox --spec cypress/integration/navigation.spec.js"

Esto le dice a Cypress: corre solo navigation.spec, en Firefox, en headless. La terminal confirma running navigation 1 of 1 y deja en paz al resto de tus pruebas. Combinar flags así te permite armar scripts a medida para cada escenario.

¿Cómo restrinjo una prueba a un navegador específico?

A veces necesitas que un test corra solo en Chrome, o que se salte Firefox por un comportamiento conocido. Cypress acepta un objeto de configuración en el describe con la propiedad browser.

javascript describe('Navigation', { browser: 'chrome' }, () => { // tus pruebas });

Si ejecutas esa prueba en Firefox, Cypress la marca como pending y muestra el mensaje de que fue saltada por el navegador [10:15]. No falla, simplemente reconoce que no aplica.

¿Y si quieres lo contrario, correr en todos menos en uno? Usas la sintaxis con !:

• { browser: 'chrome' } solo corre en Chrome.
• { browser: 'firefox' } solo corre en Firefox.
• { browser: '!firefox' } corre en todos menos Firefox.
• { browser: '!chrome' } corre en todos menos Chrome.

Esta granularidad es clave cuando descubres que una prueba falla por una particularidad del engine del navegador y no quieres bloquear todo el pipeline mientras la arreglas.

¿Cómo combino flags y configuración para un pipeline real?

La magia aparece cuando juntas todo. Puedes tener varios scripts en package.json para distintos contextos:

1. Desarrollo local con UI: cypress open para depurar visualmente.
2. Validación rápida en headless: cypress run para correr todo sin abrir browser.
3. CI por navegador: cypress run --browser chrome y otro para Firefox.
4. Smoke test puntual: cypress run --spec ruta/al/spec.js para validar una sola feature.

Con esta combinación tu equipo puede ejecutar exactamente lo que necesita en cada etapa, desde el commit local hasta el despliegue a producción, sin reescribir comandos cada vez.

En la siguiente sección vas a empezar a interactuar con elementos del DOM: formularios, botones y clics. ¿Qué configuración de scripts estás armando para tu proyecto? Cuéntame en los comentarios.