Automatizar un drag and drop en Cypress parece complicado al principio, pero se reduce a disparar tres eventos del mouse en orden y pasarles coordenadas. Si ya manejas selectores y triggers en Cypress, esta técnica te permitirá simular cualquier interacción de arrastre que un usuario real haría sobre tu aplicación web.

¿Cómo se simula un drag and drop en Cypress paso a paso?

La idea central es replicar lo que hace una persona cuando arrastra un elemento: presiona el clic, lo desplaza y lo suelta. En código, eso se traduce en tres eventos secuenciales sobre el mismo elemento.

El flujo arranca seleccionando el contenedor con cy.get('#drag-box') y encadenando los triggers que simulan el comportamiento del cursor. Cada evento recibe un objeto con la propiedad which en valor 1, que representa el botón izquierdo del mouse, y las coordenadas pageX y pageY que indican hacia dónde se mueve el puntero.

javascript cy.get('#drag-box') .trigger('mouseover', { which: 1, pageX: 600, pageY: 100 }) .trigger('mousemove', { which: 1, pageX: 100, pageY: 600 }) .trigger('mouseout');

¿Para qué sirve la propiedad which en un trigger de Cypress? Indica qué botón del mouse está presionado durante el evento. El valor 1 corresponde al clic izquierdo, necesario para que el navegador interprete que el usuario está sosteniendo el elemento mientras lo arrastra.

¿Qué hace cada evento de mouse en el arrastre?

Los tres eventos cumplen funciones distintas y deben dispararse en el orden correcto para que el navegador procese la acción como un arrastre genuino [00:55].

• mouseover: simula que el cursor entra sobre el elemento y mantiene presionado el clic. Aquí defines el punto de partida del arrastre.
• mousemove: representa el desplazamiento. Las coordenadas que pases aquí marcan el destino al que quieres llevar el elemento.
• mouseout: equivale a soltar el clic. Sin este evento final, el elemento quedaría como si siguiera siendo arrastrado.

En el ejemplo de la clase, el elemento parte desde la coordenada (600, 100) y se mueve a (100, 600), invirtiendo los ejes para hacer evidente el desplazamiento [02:10].

¿Cómo calculo las coordenadas correctas para el drag?

Las coordenadas dependen del tamaño y la posición del elemento dentro del viewport. Cuando no son evidentes, puedes calcularlas usando los métodos de Cypress que ya viste en clases anteriores: obtener las dimensiones del div, leer su posición o medir longitudes con invoke.

¿Qué pasa si las coordenadas no coinciden con la posición del drop zone? El elemento se moverá hasta donde le indiques, pero no quedará anclado en la zona destino. Por eso conviene calcular las coordenadas en base a las dimensiones reales del contenedor receptor.

¿Por qué usar trigger en lugar de un comando nativo de drag?

Cypress no incluye un comando único para drag and drop nativo, así que la forma más confiable es disparar los eventos manualmente con trigger(). Esto te da control total sobre cada fase del movimiento y funciona con la mayoría de implementaciones de arrastre en HTML5.

Esta técnica no se limita al drag and drop. Sirve para cualquier interacción donde necesites simular comportamiento del usuario que no esté cubierto por comandos como click o type: deslizadores, gestos personalizados o canvas interactivos.

El truco está en pensar como el navegador. Si entiendes qué eventos del DOM se disparan cuando un humano interactúa con la pantalla, puedes replicarlos uno por uno en tu test y conseguir pruebas mucho más cercanas a la experiencia real.

¿Has tenido que automatizar alguna interacción rara en tus pruebas? Cuéntame en los comentarios qué retos enfrentaste y cómo los resolviste.