Contenido del curso
Conociendo Cypress
Crea tu primer prueba
Elementos y localizadores
Creando una Prueba
Esperar por elementos
Ejecución de Cypress
Interactuando con elementos
- 14

Tipos de click en Cypress para botones
14:06 min - 15

Cómo escribir y limpiar inputs en Cypress
05:21 min - 16

Interacción con Radiobotones y Checkboxes en Cypress
09:09 min - 17

Extrae y comparte datos entre pruebas en Cypress
10:46 min - 18

Selects dinámicos con React Select en Cypress
15:29 min - 19

Validación de tablas HTML con Cypress
09:37 min - 20

Manejo e Interacción con Date Pickers en Formularios
06:52 min - 21

Modales, alertas y tooltips en Cypress
13:46 min - 22

Drag and drop en Cypress con trigger
06:16 min
Próximos pasos
Hooks de Cypress: before y beforeEach
Resumen
Los hooks en Cypress son funciones que se ejecutan antes o después de tus pruebas para evitar repetir código y aplicar el principio Don't repeat yourself. Si automatizas pruebas end to end y necesitas optimizar tu suite, dominar before, beforeEach, after y afterEach te ayudará a escribir código más limpio y eficiente.
Por qué deberías usar hooks en lugar de repetir cy.visit
Cuando escribes varias aserciones dentro de un mismo bloque describe, lo más común es duplicar la instrucción que visita la página en cada caso de prueba. Eso funciona, pero hace que cada it consulte la página de nuevo y vuelve tu suite lenta.
Una salida rápida sería dejar un solo cy.visit al inicio y comentar los demás. El problema aparece cuando quieres correr una sola prueba con .only: como nunca navegaste a la página, esa prueba falla. Ahí es donde los hooks resuelven el dilema entre velocidad y aislamiento.
¿Qué son los hooks en Cypress? Son funciones que se ejecutan antes o después de una suite o de cada caso de prueba. Sirven para preparar el entorno, navegar a una URL, limpiar datos o restablecer el estado sin duplicar código.
Cuándo usar before y beforeEach en tus suites de prueba
La elección entre before y beforeEach depende de si necesitas un estado limpio en cada prueba o uno compartido para toda la suite.
Cómo funciona el hook before en Cypress
El hook before recibe un callback y se ejecuta una sola vez antes de toda la suite [01:30]. Es ideal para abrir la página inicial cuando todas tus pruebas trabajan sobre la misma URL.
La ventaja es clara: aunque uses .only en un solo it, el before se ejecuta primero, navega a la página y tu prueba aislada funciona sin problemas. Eso lo hace supereficiente para suites grandes.
Cuándo conviene usar beforeEach
Si cada caso de prueba necesita partir desde la página recién cargada, usa beforeEach. Como su nombre lo indica, navega antes de cada it y garantiza un estado fresco.
- Úsalo cuando una prueba modifica el DOM y eso afectaría a la siguiente.
- Úsalo si trabajas con formularios que dejan datos persistentes.
- Evítalo cuando solo lees información y no necesitas recargar.
La contraparte es que tu suite se vuelve más lenta, así que evalúa el costo antes de aplicarlo a todo.
Para qué sirven after y afterEach al cerrar pruebas
Los hooks after y afterEach se ejecutan al terminar la suite o cada caso de prueba, y son útiles para limpiar el entorno o regresar a un punto conocido.
Por ejemplo, si tus pruebas navegaron a Platzi Clases o Platzi Blog y quieres volver a la página principal, puedes colocar esa navegación en un after. Solo se ejecutará al final de toda la suite, no entre cada it.
El afterEach hace lo mismo, pero después de cada prueba. Cuidado aquí: si redireccionas a otra URL después de cada it, las pruebas siguientes pueden fallar porque ya no están en la página esperada. Es un detalle que se ve simple, pero rompe suites enteras si no lo controlas.
¿Cuál es la diferencia entre before y beforeEach?
beforecorre una sola vez antes de toda la suite.beforeEachcorre antes de cada caso de prueba. Lo mismo aplica paraafteryafterEachal finalizar.
Dónde colocar los hooks: dentro o fuera del describe
La ubicación de un hook cambia su alcance. Si pones un before dentro de un describe, se ejecuta antes de los it de ese bloque. Si lo pones fuera del describe, se ejecuta antes de todos los describe que existan en el archivo.
Esto te da flexibilidad para configurar:
- Navegación inicial común a varios bloques.
- Envío de información a una base de datos antes de probar.
- Limpieza de cookies o localStorage antes de cada prueba.
- Restablecimiento de la URL principal al cerrar la suite.
Usar hooks fuera del describe es práctico cuando varios bloques comparten una misma preparación, así no duplicas el before en cada uno.
Cómo aplicar hooks para no repetir código en Cypress
La lógica detrás de todo esto es la misma: abstraer lo que se repite y dejarlo en un único lugar. Si escribes cy.visit('/') en cinco pruebas, ese es candidato directo para un hook.
Piensa en los hooks como ganchos que se enganchan al ciclo de vida de tu suite. Decides en qué momento engancharte: al principio de todo, antes de cada prueba, al final o después de cada caso. Esa decisión define qué tan rápida y qué tan aislada será tu automatización.
Un buen ejercicio es tomar las pruebas que ya escribiste, identificar las líneas repetidas y moverlas a un before o beforeEach. Vas a notar de inmediato cómo el archivo se vuelve más legible y cómo cada it se concentra solo en lo que está validando.
¿Qué retos encontraste al implementar hooks en tus pruebas? Cuéntame en los comentarios cómo decidiste entre before y beforeEach en tu suite.