Uso de Cypress: Click y Eventos en Pruebas Automatizadas

¿Cómo interactuar con elementos utilizando Cypress?

Cuando trabajamos con Cypress, la interacción con elementos de la página web es fundamental para realizar pruebas automatizadas efectivas. A continuación, exploraremos cómo se utilizan distintas funciones de Cypress para interactuar con botones y otros elementos de una página de forma dinámica, manteniendo la fiabilidad y claridad en el proceso.

¿Qué es el click normal y dinámico?

Cypress ofrece numerosas formas de interactuar con los elementos de una página, comenzando por el click simple. Para empezar, usamos cy.visit() para abrir una página y luego cy.get() para seleccionar elementos específicos:

cy.visit('url_a_demo');
cy.get('button_selector').click();

Sin embargo, los elementos con identificadores dinámicos pueden cambiar durante cada carga de página. En tales casos, el uso de índice se convierte en una técnica crucial:

cy.get('button_tag').eq(2).click();

Con esto, accedemos a un botón específico en base a su posición en la estructura del DOM, asegurando así la precisión en pruebas donde los IDs varían.

¿Cómo se maneja el double click y el right click?

La interacción con elementos mediante eventos como el doble click y el click derecho también puede manejarse con gran facilidad en Cypress. Ejemplos de esto son cy.dblclick() y cy.rightclick(), usados para activar esos eventos específicos sobre un botón u otro elemento:

cy.get('#doubleClickButton').dblclick();
cy.get('#rightClickButton').rightclick();

Además, es importante corroborar la visibilidad de los mensajes esperados tras estos clicks, usando aserciones Cypress:

cy.get('#doubleClickMessage').should('be.visible').and('contain', 'You have done a double click');
cy.get('#rightClickMessage').should('be.visible').and('contain', 'You have done a right click');

¿Cuál es el propósito del force click?

Hay ocasiones en que ciertos elementos están deshabilitados intencionalmente hasta que ciertas condiciones se cumplen. No obstante, al realizar pruebas, podrías necesitar forzar un click aún si el elemento no está habilitado:

cy.get('#enableAfter').click({ force: true });

Aunque es una técnica poderosa, su uso debe limitarse ya que no refleja un comportamiento típico del usuario.

¿Cómo se realiza un click por posición?

Cypress también permite clicks por posición relativa al elemento. Se puede especificar exactamente dónde se desea hacer click: en la esquina superior derecha, inferior izquierda, etc. Además, puedes definir posiciones exactas usando coordenadas:

cy.get('parent_element').click('topRight');
cy.get('parent_element').click(25, 50);

Esto puede ser particularmente útil en pruebas donde la posición del click en el elemento es relevante.

Cada una de estas técnicas proporcionadas por Cypress amplía las posibilidades de cómo puedes interactuar con los elementos durante tus pruebas automatizadas. A medida que continúas tu viaje de aprendizaje con Cypress, recuerda experimentar con estas funciones para optimizar y robustecer tus estrategias de prueba. La exploración constante es clave para profundizar y aprender nuevos gramos de cypress.

¡Sigue aprendiendo y mejorando tus habilidades de testing! Tu próximo desafío en este emocionante mundo de pruebas espera en la siguiente sección donde nos sumergiremos en la interacción con inputs y elementos de formularios.