Preparar un entorno de trabajo para automatización de pruebas puede parecer complejo, pero con Cypress el proceso es sorprendentemente directo. Desde la inicialización del proyecto hasta la ejecución visual de los tests, cada paso está diseñado para que puedas empezar a trabajar rápidamente sin configuraciones excesivas.
¿Cómo inicializar el proyecto e instalar Cypress?
El primer paso es crear un proyecto de Node.js. Para ello se ejecuta el comando npm init -y, donde la bandera -y acepta todos los valores por defecto [01:08]. Esto genera un archivo package.json prácticamente vacío, listo para recibir dependencias.
A continuación se instalan las librerías necesarias:
- Cypress: el framework de testing.
- Prettier: una herramienta que formatea el código automáticamente para mantenerlo limpio y consistente.
Es importante saber que la forma de instalar estas dependencias varía según el proyecto o la empresa. Algunas las agregan como devDependencies y otras como dependencias regulares [01:45]. Del mismo modo, Cypress puede vivir dentro del mismo repositorio del código fuente o en un repositorio separado; esto depende de decisiones de arquitectura del equipo.
¿Cómo configurar Prettier en el proyecto?
Prettier trae una configuración por defecto, pero se puede personalizar creando un archivo .prettierrc en el directorio raíz del proyecto [02:28]. Dentro de este archivo se definen preferencias como:
- Eliminar el punto y coma al final de las sentencias de JavaScript.
- Usar single quote (comillas simples) en lugar de comillas dobles.
Estas opciones son personales y se pueden ajustar según el estándar del equipo.
¿Qué sucede al abrir Cypress por primera vez?
Para lanzar Cypress se usa el comando npx cypress open [03:13]. Este comando abre la interfaz gráfica del framework y, al mismo tiempo, genera automáticamente una carpeta llamada cypress dentro del proyecto con una estructura predefinida.
La estructura de carpetas que Cypress crea incluye:
- fixtures: almacena variables, datos de configuración o información estática que los tests pueden consumir [05:12].
- integration: aquí es donde se escriben y viven las pruebas. Cypress genera tests de ejemplo para que sirvan como referencia [05:22].
- support: contiene archivos como commands e index. En commands se pueden definir comandos reutilizables, por ejemplo un flujo de login que se invoque desde múltiples tests [04:40]. El archivo index carga configuraciones o archivos antes de que se ejecuten las pruebas [04:58].
- cypress.json: es el archivo de configuración principal donde se definen preferencias globales de Cypress [04:20].
Al abrir la interfaz, Cypress también muestra los navegadores instalados en tu máquina en los que puede ejecutar pruebas. Si un navegador no está instalado localmente, simplemente no aparecerá en el menú [03:55].
¿Cómo se ejecutan y visualizan las pruebas?
Al hacer clic en cualquier archivo de prueba dentro de la interfaz, Cypress abre el navegador seleccionado y ejecuta los tests de forma visual [05:40]. Esta ejecución permite:
- Interactuar con cada elemento de la aplicación bajo prueba.
- Ver cada aserción que se realizó y el resultado paso a paso.
- Acceder al network y la consola del navegador para inspeccionar llamadas y datos [06:05].
- Detener la ejecución en cualquier momento con el botón stop.
Esta experiencia visual es una de las grandes ventajas frente a otros frameworks como Selenium o Puppeteer, donde normalmente se ejecutan pruebas desde la terminal sin retroalimentación gráfica inmediata [06:30].
¿Cómo crear un script para abrir Cypress más rápido?
En lugar de escribir npx cypress open cada vez, se puede agregar un script en el package.json [06:50]. Dentro de la sección scripts, se define algo como:
"test": "cypress open"
De esta forma, basta con ejecutar npm run test para abrir la interfaz de Cypress directamente. Este pequeño ajuste simplifica el flujo de trabajo diario y es una buena práctica al configurar cualquier proyecto con Node.js.
Con el entorno listo y la estructura de archivos clara, el siguiente paso natural es escribir la primera prueba y aprender sobre la interacción con el navegador. ¿Ya tienes Cypress instalado? Comparte tu experiencia en los comentarios.
