Configuración Inicial de Cypress Avanzado en Node.js

¿Cómo preparar el ambiente para Cypress Avanzado?

Configurar el entorno ideal para desarrollar con Cypress es esencial para garantizar un flujo de trabajo efectivo y ordenado. Al ejecutar este proceso, no solo te aseguras de que tu proyecto está optimizado para las pruebas, sino que también te alineas con las mejores prácticas actuales en desarrollo web. A continuación, te guiaré en la preparación del ambiente, instalación de librerías necesarias y los ajustes recomendados para sacar el máximo provecho de Cypress.

¿Qué editor de texto utilizar?

Primero necesitas decidir qué editor de texto usar. Cypress no te limita en este aspecto, por lo que puedes elegir entre opciones populares como:

• WebStorm
• Visual Studio Code (VS Code)
• Sublime Text
• Atom

El proyecto se inicia en blanco, con solo una carpeta vacía, por lo que cualquier editor que prefieras es válido.

¿Cómo inicializar un proyecto en Node?

Para comenzar con la configuración, debemos inicializar nuestro proyecto en Node. Esto se hace con NPM:

1. Ejecuta el comando para inicializar:

   npm init -y
   

   Este comando crea un package.json básico para tu proyecto.

2. Instala Cypress ejecutando el comando:

   npm install cypress --save-dev
   

¿Qué librerías de desarrollo son necesarias?

Otra herramienta clave que se usa en este curso es Prettier, un formateador de código que ayuda a mantener un estilo consistente sin esfuerzo manual:

• Para añadirlo como dependencia de desarrollo:

  npm install prettier --save-dev
  

Configura Prettier de manera que se ejecute automáticamente cada vez que guardas o formateas tu código. Esto se puede configurar fácilmente en editores como VS Code.

¿Cómo ejecutar y configurar Cypress?

Una vez que has instalado Cypress, es momento de ejecutarlo y configurarlo:

1. Abre Cypress con el siguiente comando:

   npx cypress open
   

   Esta acción abrirá una nueva interfaz, actualizada desde la versión 10 de Cypress.

2. Comprende que los cambios recientes incluyen el fin del uso de archivos JSON para configuración. Ahora utilizamos:

   • cypress.conf.js (o .ts con TypeScript para quienes lo prefieran).

3. Los plugins ahora se configuran dentro de setup.node.events en lugar de un archivo separado. El archivo support, por su parte, ha sido subdividido.

¿Qué nuevos archivos de configuración manejamos?

Con la introducción de nuevo en Cypress 10, se deben conocer cambios en la estructura de archivos:

• archivos de configuración renovados:
  Los comandos y las pruebas de e2e ya no son un simple soporte e índice.

• nueva terminación para tests:
  Ahora se utiliza .cy para identificar pruebas dentro de Cypress, aunque las terminaciones antiguas como .test aún son reconocidas.

¿Cómo crear una prueba inicial?

Vamos a crear un set de pruebas básico para asegurarnos de que Cypress está funcionando correctamente:

• Al ejecutar el asistente de Cypress y optar por “crear un set de pruebas vacías”, seguirás los pasos guiados para ver cómo se inicia una pequeña prueba en tu navegador.

Al finalizar esta configuración, tendrás Cypress listo con un entorno modernizado para comenzar a probar tus aplicaciones. Los desarrolladores pueden ver de inmediato una interfaz renovada y mejoras en el flujo de configuración y ejecución de pruebas. ¡No te detengas aquí! En la próxima clase, aprenderás sobre la importancia de las cookies en tus pruebas y cómo manejar este aspecto crucial del desarrollo web.