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:
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.
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/*"}
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:
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.
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.
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.
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}
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!
