Antes de escribir tu primera prueba automatizada, necesitas dejar listo el terreno. Aprender a instalar y configurar Cypress desde cero en un proyecto Node.js te permite tener un entorno reproducible, ordenado y fácil de ejecutar, ideal si estás dando tus primeros pasos en testing automatizado con JavaScript.

No importa si usas WebStorm, Visual Studio Code, IntelliJ o Atom: el flujo es el mismo. Lo que cambia es lo que harás con cada archivo que Cypress genera por ti.

¿Cómo inicializar un proyecto Node.js para usar Cypress?

Todo arranca con un proyecto de Node.js limpio. Desde la terminal, dentro de la carpeta de tu proyecto, ejecuta:

bash npm init -y

La bandera -y acepta automáticamente las opciones por defecto y genera un package.json casi vacío. Ese archivo es la base donde se registrarán tus dependencias y scripts.

¿Qué hace npm init -y? Crea un package.json inicial sin hacerte preguntas. Es el punto de partida para instalar librerías como Cypress.

Con el package.json listo, ya puedes instalar las librerías que necesitas para automatizar pruebas [00:55].

¿Cómo instalar Cypress y Prettier como dependencias?

En este flujo se instalan dos librerías clave: Cypress, el framework de pruebas end to end, y Prettier, una herramienta de formateo de código que mantiene tu sintaxis ordenada y consistente.

Dependiendo de la empresa o del proyecto, podrías instalarlas como dependencias normales o como dependencias de desarrollo. Es una decisión de arquitectura. Algunos equipos prefieren tener Cypress dentro del mismo repositorio del código de la aplicación para ejecutar pruebas de forma directa; otros lo mantienen en un repositorio aparte.

• Cypress: ejecuta y visualiza tus pruebas automatizadas en el navegador.
• Prettier: formatea automáticamente tu código JavaScript para que se vea limpio.
• package.json: registra ambas como dependencias del proyecto.

Una vez instaladas, puedes personalizar Prettier creando un archivo .prettierrc en la raíz del proyecto.

¿Para qué sirve el archivo .prettierrc?

Es el archivo donde defines tus reglas de formateo. Por ejemplo, puedes indicar que no quieres punto y coma al final de cada línea o que prefieres comilla simple en lugar de doble. Es 100% configuración personal y puedes adaptarlo al estilo de tu equipo [02:30].

¿Cómo abrir Cypress por primera vez con npx?

Aunque ya instalaste el paquete, todavía no verás la interfaz de Cypress. Para abrirla, usa:

bash npx cypress open

Este comando lanza la aplicación visual de Cypress y, la primera vez, genera automáticamente la estructura de carpetas que vas a usar durante todo el curso. Vas a ver una nueva carpeta llamada cypress con pruebas de ejemplo ya escritas, pensadas para que las uses como referencia.

En la pantalla principal aparecerán los navegadores instalados en tu equipo. Si no tienes Firefox, por ejemplo, no aparecerá en la lista. Cypress solo te muestra los navegadores donde realmente puede correr tus pruebas [03:50].

¿Qué hace npx cypress open? Abre la interfaz visual de Cypress y crea la estructura inicial de carpetas con pruebas de ejemplo.

¿Qué archivos y carpetas crea Cypress automáticamente?

Cuando abres Cypress por primera vez, se generan varios elementos importantes que vale la pena conocer antes de escribir tu primer test.

¿Para qué sirve cada carpeta de Cypress?

• cypress.json: archivo de configuración global donde defines preferencias y comportamientos de Cypress.
• support: aquí puedes crear comandos personalizados, como un login reutilizable, e incluir archivos que se carguen automáticamente antes de cada test.
• fixtures: almacena datos estáticos o variables de configuración a los que tus pruebas pueden acceder.
• integration: la carpeta más importante, porque ahí vas a escribir tus pruebas reales.

El archivo index.js dentro de support te explica en sus comentarios para qué sirve: cargar configuraciones o utilidades antes de que arranquen tus pruebas. Por ahora no necesitas tocarlo, pero conviene saber que existe [05:10].

¿Cómo ejecutar tu primera prueba en Cypress?

Desde la interfaz, haz clic en una de las pruebas de ejemplo y Cypress abrirá el navegador seleccionado para ejecutarla. Verás una aplicación sencilla de tipo to do donde los elementos se despliegan paso a paso.

Aquí es donde Cypress muestra su lado más potente: puedes interactuar con cada elemento de la prueba, navegar por las versiones de cada paso, abrir la pestaña network para revisar peticiones y usar la consola del navegador como lo harías normalmente. Si quieres detener la ejecución, basta con hacer clic en stop.

Esta forma visual de correr pruebas es una de las grandes diferencias frente a frameworks como Puppeteer o Selenium, donde sueles depender de comandos en terminal y nombres de archivo para ejecutar tus tests.

¿Cómo crear un script npm para abrir Cypress más rápido?

Escribir npx cypress open cada vez es tedioso. Por eso conviene crear un script dentro de tu package.json:

{ "scripts": { "test": "cypress open" } }

Después, simplemente ejecuta:

bash npm run test

Y Cypress se abrirá igual que antes, pero con un comando más corto y memorable. Es un pequeño detalle que mejora tu flujo de trabajo cuando empiezas a correr pruebas todos los días [07:40].

Con el ambiente listo, la estructura de carpetas entendida y un script de ejecución a tu medida, ya tienes todo para escribir tu primera prueba real y empezar a explorar la navegación en el navegador. ¿Qué configuración de Prettier vas a usar tú? Cuéntalo en los comentarios.