Estructuración y Configuración de Pruebas en Cypress

¿Cómo estructura Cypress los test?

Cypress, una herramienta poderosa para realizar pruebas automáticas, estructura sus pruebas de manera que permite una fácil gestión y ejecución. Al utilizar Mocha como marco subyacente, proporciona una sintaxis clara y organizada. En este artículo, te guiaré a través de la configuración y ejecución básica de pruebas con Cypress, ayudándote a sacar el máximo provecho de sus funcionalidades.

¿Cómo iniciar con Cypress?

Para empezar, debes crear un script de prueba y abrirlo con Cypress. Aquí está cómo puedes hacerlo:

1. Configuración inicial: Asegúrate de que Cypress está instalado y funcionando en tu proyecto. Esto te permitirá abrir el entorno de Cypress y ver las pruebas predeterminadas proporcionadas por la herramienta.

2. Eliminar pruebas predeterminadas: Si no planeas usar las pruebas automáticas incluidas, puedes eliminarlas o configurarlas para que se ignoren. Modifica el archivo cypress.json con el siguiente comando para ignorar ciertos archivos de prueba:

   {
     "ignoreTestFiles": "**/examples/*"
   }
   

3. Reiniciar Cypress: Para que los cambios surtan efecto, reinicia Cypress y observa que las pruebas predeterminadas ahora están ocultas.

¿Cómo crear y estructurar una nueva prueba?

Es hora de crear tu primera prueba en Cypress, aprovecha para seguir esta estructura paso a paso:

1. Crear un archivo de prueba: Crea un nuevo archivo de prueba con la extensión .spec.js, por ejemplo, primer_prueba.spec.js. Esto es importante para que Cypress lo detecte automáticamente.

2. Uso de Mocha para describir pruebas: Cypress utiliza Mocha que te permite definir pruebas usando bloques describe y it. Esta es una forma básica de estructurar tus suites de prueba:

   describe('Primer Prueba', () => {
     it('debería navegar a Platzi', () => {
       cy.visit('https://www.platzi.com');
     });
   });
   

   En este ejemplo, describe encapsula un grupo de pruebas, mientras que it representa un caso de prueba individual.

3. Ejecución de la prueba: Guarda el archivo y navega en Cypress para verlo automáticamente. Al hacer clic en la prueba, Cypress abrirá un navegador y ejecutará el test.

¿Cómo personalizar la configuración de Cypress?

Adapta tu entorno de prueba según tus necesidades cambiando la configuración en el archivo cypress.json.

1. Configurar el tamaño del viewport: Ajustar el tamaño del viewport puede ser crucial para ciertas pruebas de diseño responsivo. Añade las siguientes líneas a tu configuración:

   {
     "viewportWidth": 1000,
     "viewportHeight": 660
   }
   

2. Modularidad en la estructura de pruebas: Puedes desarrollar una estructura más compleja al anidar otros bloques describe o it dentro de un describe principal. Aunque es flexible, una buena práctica es mantener un solo describe por archivo de prueba y varios it para diferentes casos de test.

A través de estos pasos, has aprendido cómo estructurar y ejecutar tus pruebas con Cypress. Con este conocimiento, estarás mejor preparado para gestionar pruebas más avanzadas y adaptarlas según las necesidades de tu proyecto. No subestimes el poder de una buena estructura: una base sólida facilita el mantenimiento y la escalabilidad de tus scripts de prueba. ¡Sigue explorando y ampliando tus habilidades de pruebas automatizadas!