¿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:
-
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!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?