Configurar Cypress desde cero en su versión 10 cambió varias reglas del juego. Aquí aprendes a preparar tu entorno, instalar las librerías necesarias y entender los cambios de interfaz y arquitectura que trae esta versión, todo pensado para quienes van a hacer end-to-end testing avanzado.

¿Qué necesitas para iniciar un proyecto con Cypress?

Lo primero es elegir tu editor de texto favorito. Puedes usar WebStorm, VS Code, Sublime Text o Atom: lo importante es que te sientas cómodo escribiendo código.

Desde una carpeta vacía, inicializas el proyecto en Node con npm init -y. Esa bandera -y salta las preguntas y te genera un package.json limpio para empezar a trabajar [0:35].

¿Para qué sirve npm init -y? Inicializa un proyecto Node con valores por defecto y crea un package.json en blanco, sin pedirte confirmación pregunta por pregunta.

Después instalas Cypress como dependencia principal y Prettier como dependencia de desarrollo. Prettier se encarga del formato del código: espacios, indentación y consistencia visual sin que tú muevas un dedo.

¿Cómo automatizar el formato con Prettier?

Una buena práctica es configurar tu editor para que ejecute Prettier cada vez que guardas un archivo. Así evitas la fatiga de formatear manualmente y mantienes tu código limpio en cada commit.

Tanto WebStorm como VS Code permiten activar esta opción en sus ajustes. La idea es que el formato deje de ser una preocupación y te concentres en escribir pruebas.

¿Cómo abrir Cypress por primera vez?

El comando para lanzar Cypress es npx cypress open. Al ejecutarlo se abre la nueva interfaz, rediseñada a partir de la versión 10, con un look más moderno y opciones reorganizadas [2:05].

La primera pantalla te pregunta qué tipo de testing quieres hacer. Tienes dos rutas:

• End-to-end testing: la opción tradicional para probar flujos completos de tu aplicación.
• Component testing: una funcionalidad nueva, en beta, que compite con alternativas como React Testing Library para probar componentes de forma aislada.

Para este flujo seleccionas end-to-end testing. Cypress detecta tu proyecto y te muestra los archivos de configuración que va a generar.

¿Qué cambió en Cypress 10 respecto a versiones anteriores?

La versión 10 introdujo varios cambios estructurales que conviene entender antes de escribir tu primera prueba. No son cosméticos: afectan cómo organizas tu configuración y tus plugins.

¿Cuáles son los cambios principales en la configuración?

• Adiós al cypress.json: el archivo de configuración en formato JSON quedó deprecated. Ahora usas cypress.config.js o cypress.config.ts si trabajas con TypeScript.
• Plugins integrados: el archivo de plugins desapareció como tal. Toda esa lógica vive ahora dentro de setupNodeEvents, en el archivo de configuración principal.
• Carpeta support reorganizada: antes había un support y un index. Ahora encuentras e2e.js para la configuración del entorno y otro archivo separado para tus comandos personalizados.

Estos cambios existen porque Cypress necesitaba espacio para integrar el component testing sin romper la configuración del end-to-end. Por eso ahora puedes configurar ambos modos en paralelo dentro del mismo proyecto.

¿Qué es setupNodeEvents en Cypress? Es la función dentro de cypress.config.js donde registras plugins y eventos de Node. Reemplaza al antiguo archivo de plugins que existía hasta la versión 9.

¿Por qué los archivos ahora terminan en .cy?

La nueva convención de nombres usa la terminación .cy.js para identificar pruebas de Cypress. Antes se usaba .test u otras variantes, y aunque Cypress sigue reconociéndolas por compatibilidad, lo recomendable es migrar a .cy para mantener orden y claridad.

Esto te ayuda a distinguir de un vistazo qué archivos son pruebas de Cypress y cuáles pertenecen a otros frameworks de testing en tu proyecto.

¿Cómo crear tu primera prueba en Cypress?

Después de seleccionar end-to-end testing, eliges el navegador. Al darle Start testing in Chrome se abre la ventana de pruebas con dos opciones: usar un set de ejemplos o crear un empty spec [3:45].

La opción más limpia es crear un empty spec. Cypress genera un archivo mínimo dentro de la carpeta cypress/e2e/ y lo ejecuta de inmediato, dejándote la base lista para escribir tus propios casos.

Con esto ya tienes:

• El archivo cypress.config.js creado automáticamente.
• La carpeta cypress/e2e/ con tu primera prueba en formato .cy.js.
• Los archivos de support y comandos listos para extender.

Desde acá el siguiente paso natural es trabajar con cookies para manejar sesiones y autenticación dentro de tus pruebas. ¿Ya configuraste tu proyecto? Cuéntame en los comentarios qué editor elegiste y si activaste el formato automático con Prettier.