Aprender a controlar la navegación del navegador dentro de Cypress es una de las habilidades base para escribir pruebas end to end confiables. Con los comandos de navegación en Cypress puedes recargar páginas, ir hacia atrás, avanzar y validar que la información persista, no solo en el estado de React sino también después de un refresh.

¿Cómo se crea un archivo de test de navegación en Cypress?

Todo empieza por nombrar bien tu archivo. Cypress reconoce los tests cuando el archivo termina en .spec, así que para esta práctica creas navegacion.spec y reutilizas la estructura de la clase anterior.

La primera prueba mantiene el comando que ya conoces: visitar Platzi con cy.visit(). A partir de ahí, agregas los comandos de navegación uno a uno.

¿Por qué el archivo debe terminar en .spec? Porque Cypress detecta automáticamente los archivos con esa extensión como pruebas y los incluye en el runner.

¿Cómo recargar una página en Cypress con cy.reload?

Para recargar la página usas cy.reload(). Es directo, no necesita parámetros y simula presionar F5 en el navegador.

Una ventaja frente a otras herramientas es que Cypress espera automáticamente a que la página cargue. En Selenium, por ejemplo, si le pides ir a una página, va y se cierra sin esperar. Cypress no: detecta que el sitio terminó de cargar y entonces ejecuta el siguiente comando [01:18].

¿Cómo forzar una recarga sin caché?

A veces el caché guarda elementos que pueden afectar la prueba. Para evitarlo, le pasas true como argumento:

javascript cy.reload(true)

Eso fuerza una recarga limpia, sin usar caché, útil cuando quieres asegurar que la app cargue todos los recursos desde cero. En la demo, al aplicar force true en Google, la página incluso volvió a aplicar el tema oscuro porque cargó de nuevo todos los estilos [02:25].

¿Cómo navegar hacia atrás y hacia adelante con cy.go?

Cypress tiene una restricción importante: no puedes navegar a otros dominios dentro de la misma prueba. Por eso el ejemplo se hace dentro de Google, buscando Platzi y usando esa misma URL para mover el historial.

El comando correcto no es cy.back(), sino cy.go() recibiendo el parámetro de dirección.

• cy.go('back') regresa a la página anterior.
• cy.go('forward') avanza a la siguiente.
• cy.go(-1) equivale a ir una página atrás usando índice.
• cy.go(1) equivale a avanzar una página usando índice.

Los índices te sirven cuando quieres saltar varias páginas de una sola instrucción, por ejemplo cy.go(-2) para retroceder dos pasos. Aun así, muchos preferimos la versión explícita con back o forward porque se lee mejor.

¿Cuál es la diferencia entre cy.go('back') y cy.go(-1)? Ninguna en el resultado: ambas regresan una página en el historial. La diferencia es legibilidad: back es más explícito, el índice es más flexible para saltos múltiples.

¿Cómo correr solo una prueba con it.only?

Mientras desarrollas, no quieres ejecutar toda la suite. Si vienes de Mocha, esto te va a sonar familiar: agregas .only al test que te interesa.

javascript it.only('navegar hacia atrás', () => { // ... })

Con eso, Cypress ejecuta únicamente esa prueba e ignora el resto. Es ideal para iterar rápido sin esperar a que pasen todos los casos.

¿Por qué importa dominar la navegación antes de interactuar con elementos?

Las pruebas reales no se quedan en una sola pantalla. Validar que un formulario guarda datos después de recargar, que un flow de checkout funciona al regresar al carrito o que un login persiste tras un refresh depende de estos comandos.

Dominar cy.visit, cy.reload, cy.go('back') y cy.go('forward') te da la base para simular el comportamiento real de un usuario que abre, recarga, retrocede y avanza dentro de tu aplicación.

¿Cypress espera automáticamente a que la página cargue? Sí. A diferencia de Selenium, Cypress detecta cuándo termina la carga y ejecuta el siguiente comando, sin necesidad de waits manuales en la mayoría de los casos.

El siguiente paso es aprender a encontrar elementos dentro de la página, porque navegar es solo la mitad: también necesitas hacer clic, escribir y validar contenido. ¿Qué comandos de navegación de Cypress estás usando ya en tus pruebas?