Aprende a interactuar con elementos en Cypress usando los distintos tipos de click disponibles: clic normal, doble clic, clic derecho, clic forzado y clic por posición. Esta guía es para QA Engineers y desarrolladores que automatizan pruebas E2E y quieren resolver casos reales como botones con IDs dinámicos o elementos deshabilitados.

¿Cómo dar click a un botón con ID dinámico en Cypress?

Cuando un botón tiene un identificador que cambia en cada carga, no puedes apoyarte en el ID ni en el texto si otros botones comparten la misma etiqueta click me. La solución está en seleccionar por tag y usar el índice del elemento.

En la página de botones de demoQA hay tres botones con el mismo texto. Con cy.get('button') obtienes la lista completa y luego accedes al que necesitas por su posición. La clave es que el comando eq() empieza en cero, aunque en el conteo visual a veces se mencione desde uno [03:20].

javascript cy.get('button').eq(2).click() cy.get('#dynamicClickMessage') .should('be.visible') .and('contain', 'You have done a dynamic click')

Después del clic, validas con una aserción encadenada: should('be.visible') confirma que el mensaje aparece y and('contain', ...) verifica el texto exacto.

¿Qué hace eq() en Cypress? Selecciona un elemento dentro de una lista de coincidencias usando su índice numérico, útil cuando varios elementos comparten selector.

¿Cuál es la diferencia entre click, double click y right click?

Cypress ofrece tres comandos nativos para los gestos más comunes del mouse, cada uno disparando el evento correspondiente en el DOM.

• click(): ejecuta un clic simple sobre el elemento.
• dblclick(): dispara el evento de doble clic.
• rightclick(): simula el clic derecho del mouse.

En la práctica, si el botón de doble clic tiene id="doubleClickBtn", basta con encadenar el comando y validar el contenedor de respuesta #doubleClickMessage con el texto You have done a double click [05:40].

javascript cy.get('#doubleClickBtn').dblclick() cy.get('#doubleClickMessage').should('contain', 'You have done a double click')

cy.get('#rightClickBtn').rightclick() cy.get('#rightClickMessage').should('contain', 'You have done a right click')

La sintaxis es directa y se lee casi como lenguaje natural, lo cual hace que tus pruebas sean fáciles de mantener.

¿Cómo forzar un click en un elemento deshabilitado con Cypress?

A veces te topas con botones bloqueados, ocultos detrás de un div o que se habilitan después de un tiempo. Si intentas un clic normal, Cypress falla con un mensaje claro: the element was disabled [07:50].

La solución es pasar el parámetro { force: true } al método click(). Esto le indica a Cypress que dispare el evento sin validar el estado del elemento.

javascript cy.visit('https://demoqa.com/dynamic-properties') cy.get('#enableAfter').click({ force: true })

¿Cuándo debo usar force: true? Solo cuando no haya otra alternativa. Forzar el clic rompe la simulación del flujo real de un usuario, así que úsalo con criterio en escenarios donde el bloqueo sea un falso positivo.

Esta opción es poderosa, pero abusar de ella esconde bugs de UX que tus pruebas deberían detectar.

¿Cómo hacer click por posición en Cypress?

Una funcionalidad poco común en otros frameworks es la posibilidad de hacer clic en una zona específica de un elemento. Cypress acepta tanto posiciones nombradas como coordenadas exactas [09:30].

Las posiciones disponibles son:

• topLeft, top, topRight.
• left, center, right.
• bottomLeft, bottom, bottomRight.

También puedes pasar coordenadas X e Y en píxeles relativas al elemento. Cypress muestra un punto rojo sobre el elemento durante la ejecución, indicando exactamente dónde se disparó el clic.

javascript cy.get('button').eq(2).parent().parent().click('topRight') cy.get('button').eq(2).parent().parent().click('bottomLeft') cy.get('button').eq(2).parent().parent().click(15, 40)

En el ejemplo, parent() sube en el árbol del DOM hasta el contenedor padre que se quiere clickear. Esto es útil cuando necesitas validar que un event listener está enlazado al contenedor y no solo al botón interno.

Habilidades y conceptos clave de la clase

Dominar estos comandos te da control fino sobre la interacción con la interfaz:

• Selección por índice con eq(): resuelve elementos con IDs dinámicos [03:00].
• Aserciones encadenadas con should y and: validan visibilidad y contenido en una sola cadena [04:15].
• Comandos dblclick y rightclick: simulan gestos avanzados del mouse [05:40].
• Parámetro force: true: fuerza interacciones en elementos deshabilitados u ocultos [08:20].
• Recorrido del DOM con parent(): navega del nodo hijo al contenedor padre [09:50].
• Click por posición: ataca zonas específicas con nombres o coordenadas [10:10].

Si ya estás automatizando un flujo donde un botón te está dando dolores de cabeza, ¿qué tipo de clic resolvería tu caso? Cuéntalo en los comentarios.