Trabajar con modales, alertas nativas y tooltips en Cypress requiere estrategias distintas porque cada uno se comporta diferente en el navegador. Aquí aprendes a interactuar con cada uno, validar su contenido y disparar eventos para hacer pruebas más robustas en tus flujos automatizados.

¿Cómo interactúo con un modal en Cypress?

Los modales son elementos añadidos al DOM por la propia página, no son nativos del navegador. Eso los hace fáciles de inspeccionar y manipular como cualquier otro elemento.

Para abrir y cerrar un modal solo necesitas obtener el botón que lo dispara y el botón que lo cierra. Por ejemplo, en una página con un botón show modal y otro close small modal, tu prueba se ve así:

javascript cy.get('#show-modal').click(); cy.get('#close-small-modal').click();

Nada complicado. La clave está en que el modal vive en el DOM, así que puedes seleccionarlo por id, clase o cualquier selector que te funcione.

¿Por qué los modales son fáciles de probar? Porque son elementos HTML que tú añades a la página. Puedes inspeccionarlos, asignarles un id y seleccionarlos con cy.get() igual que cualquier botón o input.

¿Cómo manejo alertas nativas del navegador en Cypress?

Aquí cambia la historia. Las alertas nativas como window.confirm no aparecen en el DOM, así que no puedes inspeccionarlas ni asignarles un selector. Cypress, por diseño, las acepta automáticamente.

Esa decisión tiene lógica: si no puedes inspeccionar la alerta, lo más útil es escuchar el evento que la dispara. Para eso usas cy.on(), que funciona como un listener de eventos del navegador.

¿Cómo valido el texto de una alerta con stubs?

Un stub es una función que intercepta llamadas para que puedas hacer aserciones sobre ellas. Si vienes de pruebas unitarias con Jest, ya conoces el concepto.

javascript const stub = cy.stub(); cy.on('window:confirm', stub); cy.get('#confirm-button').click().then(() => { expect(stub.getCall(0)).to.be.calledWith('Do you confirm action?'); }); cy.contains('You selected OK').should('exist');

Aunque la alerta no se vea en pantalla, el stub captura el texto que recibió y te permite validarlo.

¿Hay una forma más sencilla sin stubs?

Sí. Puedes pasar directamente una función al listener y comparar el texto:

javascript cy.on('window:confirm', (confirm) => { expect(confirm).to.equal('Do you confirm action?'); }); cy.get('#confirm-button').click();

Más corto, más directo. Si solo necesitas validar el contenido, esta forma sobra. Si quieres más control, los stubs son más poderosos.

¿Qué es un stub en Cypress? Es una función falsa que reemplaza a otra para interceptar sus llamadas. Te permite verificar con qué argumentos fue llamada sin ejecutar la lógica original.

¿Cómo rechazo una alerta de confirmación?

Por defecto, Cypress acepta las alertas. Para rechazarlas, basta con devolver false desde el listener:

javascript cy.on('window:confirm', (confirm) => { expect(confirm).to.equal('Do you confirm action?'); return false; }); cy.get('#confirm-button').click(); cy.contains('You selected Cancel').should('exist');

Ese return false simula el clic en cancelar. La aserción posterior verifica que la página reaccionó correctamente al rechazo.

¿Cómo pruebo un tooltip que aparece al pasar el mouse?

Los tooltips dependen de eventos del mouse, así que necesitas dispararlos manualmente con trigger(). Este método te deja simular eventos como mouseover, mouseenter, mouseout y muchos más.

Para mostrar un tooltip y validar su contenido:

javascript cy.get('#tooltip-button').trigger('mouseover'); cy.contains('You hovered the button').should('exist');

Para ocultarlo y verificar que desapareció del DOM:

javascript cy.get('#tooltip-button').trigger('mouseout'); cy.contains('You hovered the button').should('not.exist');

La lógica es simple: disparas el evento, validas que el tooltip aparece, disparas el evento contrario y validas que ya no está. Así cubres ambos estados.

Recursos clave para tus pruebas con Cypress

Estos son los métodos y conceptos que vale la pena tener a la mano cuando trabajas con elementos interactivos:

• cy.get() y cy.contains() para seleccionar elementos del DOM, ideales para modales [01:18].
• cy.on() como listener de eventos del navegador, útil para alertas nativas [03:24].
• cy.stub() para interceptar llamadas y hacer aserciones sobre sus argumentos [04:02].
• trigger() para disparar eventos como mouseover y mouseout en tooltips [07:38].
• should('exist') y should('not.exist') para validar la presencia o ausencia de elementos [08:15].

En la siguiente clase verás cómo manejar drag and drop, una habilidad que te servirá mucho en páginas tipo to do list donde necesitas arrastrar elementos. ¿Ya probaste alguna de estas técnicas en tu proyecto? Cuéntame en los comentarios cómo te fue.