Cypress organiza las pruebas con una sintaxis heredada de Mocha que te permite agrupar casos en suites y ejecutarlos de forma visual. Aquí aprendes cómo estructurar tests en Cypress, configurar el archivo cypress.json y crear tu primera prueba navegando a una página real.

¿Cómo ignorar archivos de prueba por defecto en Cypress?

Cuando abres Cypress por primera vez, vas a ver un montón de pruebas de ejemplo que no necesitas. Tienes dos caminos: borrarlas o decirle a Cypress que las ignore desde la configuración.

En el archivo cypress.json puedes agregar la propiedad ignoreTestFiles y listar los patrones que quieres excluir. Después reinicias Cypress y, aunque los archivos sigan ahí, ya no aparecerán en el runner.

¿Qué hace ignoreTestFiles en cypress.json? Le indica a Cypress qué archivos de prueba debe omitir al escanear la carpeta. Los archivos siguen existiendo, pero no se muestran ni se ejecutan.

¿Cómo creo mi primera prueba con describe e it?

La convención es nombrar tus archivos con el sufijo .spec para que Cypress los detecte sin problemas [01:30]. Dentro del archivo trabajas con dos bloques principales: describe, que actúa como tu suite o contenedor, e it, que representa cada caso de prueba.

La estructura mínima se ve así:

javascript describe('primer prueba', () => { it('navega a la primera página', () => { cy.visit('https://platzi.com') }) })

Cypress expone un objeto global llamado cy que es tu puerta de entrada a todos los comandos. El método cy.visit() recibe la URL a la que quieres navegar y, lo interesante, espera automáticamente a que la página termine de cargar antes de continuar. No tienes que escribir waits manuales.

¿Para qué sirve cy.visit en Cypress? Es el comando que abre una URL en el navegador controlado por Cypress y espera a que la página cargue por completo antes de seguir con el siguiente paso.

¿Qué relación tiene Mocha con Cypress?

Cypress usa Mocha por debajo como motor para gestionar las pruebas. Por eso la sintaxis de describe, it y los callbacks se siente familiar si ya trabajaste con Mocha o Jest. Si vienes de esos frameworks, la curva de aprendizaje es mínima.

¿Cómo configuro el viewport y la resolución en Cypress?

Dentro de cypress.json puedes definir dos propiedades clave para controlar la dimensión del navegador en el que corren tus pruebas:

• viewportHeight: alto de la ventana en píxeles.
• viewportWidth: ancho de la ventana en píxeles.
• Ambas son opcionales y se aplican a todo el proyecto.

Esto es útil cuando quieres replicar resoluciones específicas, probar versiones móviles o simplemente ajustar el runner a tu pantalla. Cuando guardas el cambio, Cypress recarga y verás la nueva dimensión reflejada de inmediato [03:35].

¿Puedo anidar describes dentro de otros describes?

Sí, y esa es una de las decisiones de diseño que más impacto tiene en la legibilidad de tus tests. Puedes meter un describe dentro de otro describe, y dentro de ese, varios it. Cypress los ejecuta sin problema y los muestra anidados en el runner.

La recomendación práctica del instructor: un solo describe por archivo y varios it dentro, donde cada it representa un test case independiente. Es más fácil de mantener y de leer cuando el proyecto crece [05:20].

Dicho esto, la estructura final depende de tu equipo y del proyecto. Si trabajas con casos muy ramificados, anidar describes puede ayudarte a agrupar contextos. Si tus pruebas son lineales, mantenerlo plano te ahorra ruido visual.

¿Cómo estás organizando tus suites de prueba? Cuéntame en los comentarios si prefieres anidar describes o mantenerlos planos por archivo.