Interacción con Pop-ups, Modales y Tooltips en Cypress

¿Cómo trabajar con los modales y pop-ups?

Al navegar por la web, es inevitable encontrar modales, pop-ups o alertas. Estos elementos son clave para la interacción, pero también para las pruebas de software en aplicaciones web. Aquí aprenderás a manejarlos efectivamente utilizando Cypress.

¿Qué son los modales y cómo interactuar con ellos?

Un modal es una ventana emergente que se superpone a la interfaz principal del sitio, centrando la atención del usuario en un contenido específico. Estos no son nativos del navegador, facilitando su identificación y manipulación dentro del código HTML.

Puedes identificar un modal utilizando atributos únicos como IDs o clases específicas. Para interactuar, sigue estos pasos básicos:

1. Utiliza métodos de Cypress como cy.get() para obtener el elemento.
2. Realiza acciones como .click() para abrir o cerrar el modal.

cy.get('#showModel').click(); // Abre el modal
cy.get('#closeModel').click(); // Cierra el modal

¿Cómo trabajar con pop-ups y alertas?

A diferencia de los modales, los pop-ups y alertas son más complejos, ya que son nativos del navegador y no tienen representaciones directas en el DOM. Esto implica que no pueden inspeccionarse ni manipularse directamente como los elementos comunes del DOM.

¿Cómo manejar alertas con Cypress?

1. Aceptación Automática: Cypress por defecto acepta automáticamente las alertas, lo cual simplifica el proceso en pruebas automatizadas.
2. Escuchando Eventos: Utiliza cy.on() para escuchar eventos del navegador.
3. Intercepción de Llamadas: Implementa un cy.stub para capturar las alertas y realizar validaciones.

cy.on('window:confirm', (message) => {
    expect(message).to.equal('Do you confirm action?');
    return true; // o false para simular rechazo
});

¿Cómo realizar pruebas unitarias con stubs y validar alertas?

Un stub permite capturar y simular interacciones, interceptando llamadas para validar comportamientos esperados sin la necesidad de moquear funciones complétamente:

• Utiliza cy.stub para mochaear funciones dentro de los tests.
• Valida que la función haya sido llamada correctamente con valores esperados.

¿Cómo interactuar con tooltips?

Un tooltip es un pequeño texto emergente que aparece cuando el usuario posiciona el puntero sobre un elemento. Es común en interfaces de usuario para proporcionar información adicional.

Para probar tooltips en Cypress:

1. Utiliza cy.trigger() para simular eventos como mouseover.
2. Realiza validaciones con cy.contains() para asegurar que el tooltip está mostrando el texto esperado.

cy.get('#tooltipElement').trigger('mouseover'); 
cy.contains('You over the button').should('exist'); 

Para desactivar el tooltip, usa:

cy.get('#tooltipElement').trigger('mouseout');
cy.contains('You over the button').should('not.exist');

El dominio de estas herramientas y técnicas enriquecerá tus habilidades en pruebas de software. La práctica es clave, sigue explorando y aplicando lo aprendido con Cypress para dominar la automatización de pruebas. ¡Ánimo en tu camino hacia la maestría de la automatización!