Introducción al curso

1

Automatización de Pruebas UI con Cypress

Conociendo Cypress

2

Pruebas automatizadas con Cypress: Integra y depura eficientemente

3

Automatización de Pruebas con Cypress y Prettier

Crea tu primer prueba

4

Pruebas Automatizadas con Cypress: Estructura y Ejecución Básica

5

Cómo recargar y navegar entre páginas usando Cypress

Elementos y localizadores

6

Uso de Selectores en Cypress para Pruebas Automatizadas

7

Uso de Contains y Parents para Buscar Elementos en Cypress

8

Manipulación de Elementos con Cypress y jQuery

Creando una Prueba

9

Aserciones en Cypress: Valida tus pruebas automatizadas

10

Optimización de código con hooks en desarrollo web

11

Debugging efectivo en Cypress: Console.log, Plugins y más

Esperar por elementos

12

Esperas en Cypress: Usos y Configuraciones Detalladas

Ejecución de Cypress

13

Modos de Ejecución de Cypress: Headless y Navegadores

Interactuando con elementos

14

Clicks avanzados en Cypress: normal, doble, derecho y por posición

15

Manejo de Inputs de Texto en HTML con Cypress

16

Interacción con Radiobotones y Checkboxes en Cypress

17

Extracción de Datos en Cypress: Alias y Variables Compartidas

18

Interacción con Selects y Dropdowns Dinámicos en Formularios

19

Interacción con tablas HTML usando Cypress

20

Manejo de Date Pickers: Selección y Automatización Avanzada

21

Interacción con Modales y Alertas usando Cypress

22

Eventos JavaScript para Drag and Drop en Interfaces Web

Próximos pasos

23

Automatización de Pruebas con Cypress: Flujos End to End

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Clicks avanzados en Cypress: normal, doble, derecho y por posición

14/23
Recursos

¿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.

Aportes 1

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Click

📚 Documentación
.
Como referencia, el comando click no permite ejecutar diferentes tipos eventos onClick:

.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)

Complementando la sesión, click es un comando que sigue el concepto de Accionabilidad.
.

Un comando, se dice que es accionable cuando simula la interactividad del usuario.

.
De esto, podemos mencionar que Cypress lanza el evento y espera por el navegador que cause un estado, del cual Cypress inspecciona el DOM y toma acción de ello para asegurar que dicho elemento está listo para efectuar una acción.
.

Practicando

Tomando como ejercicio Cypress Example, lanzaremos eventos de click para nuestro fin.
.

.

cy.get('.action-btn').click()

// clicking in the center of the element is the default
cy.get('#action-canvas').click()

cy.get('#action-canvas').click('topLeft')
cy.get('#action-canvas').click('top')
cy.get('#action-canvas').click('topRight')
cy.get('#action-canvas').click('left')
cy.get('#action-canvas').click('right')
cy.get('#action-canvas').click('bottomLeft')
cy.get('#action-canvas').click('bottom')
cy.get('#action-canvas').click('bottomRight')

// .click() accepts a an x and y coordinate
// that controls where the click occurs :)
cy.get('#action-canvas')
  .click(80, 75)
  .click(170, 75)
  .click(80, 165)
  .click(100, 185)
  .click(125, 190)
  .click(150, 185)
  .click(170, 165)

// click multiple elements by passing multiple: true
cy.get('.action-labels>.label').click({ multiple: true })

// Ignore error checking prior to clicking
cy.get('.action-opacity>.btn').click({ force: true })

Dando como resultado:
.