Curso de Automatización de Pruebas UI con Cypress
Curso de Automatización de Pruebas UI con Cypress

Introducción al curso

1

Automatización de Pruebas UI con Cypress

Conociendo Cypress

2

Pruebas Automatizadas con Cypress: Ventajas y Desventajas

3

Automatización de Pruebas con Cypress: Instalación y Configuración

Crea tu primer prueba

4

Estructuración y Configuración de Pruebas en Cypress

5

Navegación y recarga de páginas con Cypress

Elementos y localizadores

6

Uso de Cypress para Localizar Elementos en Formularios Web

7

Búsqueda y Selección de Elementos en Cypress con Contains y Find

8

Uso de Cypress: Guardar e Interactuar con Elementos DOM

Creando una Prueba

9

Aserciones en Cypress: TDD, BDD y Chai para Pruebas Efectivas

10

Optimización de pruebas con hooks en desarrollo web

11

Debugging en Cypress: Herramientas y Técnicas Esenciales

Esperar por elementos

12

Esperas y Timeouts en Cypress: Uso Eficiente y Práctico

Ejecución de Cypress

13

Modos de Ejecución de Pruebas con Cypress

Interactuando con elementos

14

Uso de Cypress: Click y Eventos en Pruebas Automatizadas

15

Manejo de Inputs de Texto en Cypress: Escribir y Limpiar Eficazmente

16

Interacción con Radiobotones y Checkboxes en Cypress

17

Extracción y manejo de datos en pruebas con Cypress

18

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

19

Interacción y validación de tablas HTML con Cypress

20

Manejo e Interacción con Date Pickers en Formularios

21

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

22

Simulación de Drag and Drop con Eventos del Mouse

Próximos pasos

23

Automatización de Pruebas Web con Cypress: Proyecto Final

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Curso de Automatización de Pruebas UI con Cypress

Curso de Automatización de Pruebas UI con Cypress

Javier Fuentes Mora

Javier Fuentes Mora

Simulación de Drag and Drop con Eventos del Mouse

22/23
Recursos

¿Cómo manejar drag and drop en tus proyectos?

Los drag and drops son una funcionalidad esencial para una experiencia de usuario fluida en muchas aplicaciones web. Aunque pueden parecer intimidantes al principio, entender y manipular esta característica con código automatizado es mucho más sencillo de lo que podrías imaginar. Vamos a profundizar en cómo interactuar con ellos y a mostrarte cómo simular los eventos que un usuario típico ejecutaría.

¿Qué es un drag and drop?

Un drag and drop (arrastra y suelta, en español) es una interacción de usuario común donde un elemento es arrastrado desde un punto a otro en una página web, generalmente iniciando con un clic del mouse, seguido por el movimiento, y finalmente, soltando el elemento en su lugar deseado. Muchos elementos dentro de interfaces de usuario utilizan este método para mover componentes de manera intuitiva y rápida.

¿Cómo se simula un drag and drop con código?

Para simular un drag and drop, necesitas seguir una secuencia de eventos que replican el comportamiento del usuario. Estos eventos son mouse down, mouse move y mouse up. Te guiamos en cómo dispararlos de forma programada:

// Obtener el elemento de drag and drop
cy.get('#dragBox')
  // Disparar evento mouse down
  .trigger('mousedown', {
    which: 1,
    pageX: 600,
    pageY: 100
  })
  // Disparar evento mouse move con cambio de coordenadas
  .trigger('mousemove', {
    which: 1,
    pageX: 100,
    pageY: 600
  })
  // Disparar evento mouse up
  .trigger('mouseup');

¿Cuáles son las coordenadas y por qué son importantes?

Para replicar la acción de arrastrar y soltar, necesitas identificar las coordenadas exactas en la pantalla donde deseas mover el objeto. Estas coordenadas se expresan generalmente como pageX y pageY, indicando la posición en los ejes X e Y del navegador. La elección cuidadosa de las coordenadas es importante porque influye directamente en la precisión del movimiento que estás simulando.

¿Qué habilidades son necesarias para un drag and drop efectivo?

  • Identificación de elementos: Asegúrate de poder seleccionar correctamente el elemento que deseas mover, generalmente utilizando selectores como IDs o clases.
  • Entendimiento de eventos del mouse: Conocer el flujo de mouse down, mouse move y mouse up, y saber cómo interactúan entre sí.
  • Cálculo de coordenadas: Saber cómo calcular y ajustar las coordenadas necesarias para los eventos de movimiento.
  • Pruebas y ajustes: Es posible que necesites hacer ajustes a medida que pruebas el código para garantizar que el movimiento sea suave y natural.

Siguientes pasos y práctica recomendada

El manejo eficaz de los drag and drop puede requerir práctica, sobre todo en aprender a calcular las coordenadas exactas y comprender cómo interactúan los elementos en la interfaz web. Te animamos a continuar explorando otras interacciones y eventos automatizados, y a seguir practicando la implementación de estas técnicas en proyectos reales para mejorar tus habilidades de prueba y simulación de usuario.

Aportes 3

Preguntas 1

Ordenar por:

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

Jairo Campos Ruiz

Jairo Campos Ruiz

hace 3 años

Una cosa que me he dado cuenta probando es que las coordenadas del primer trigger pueden ser cualquiera, y en base a estas se calculan las del segundo trigger por ello es mas fácil simplemente poner un valor de 0 en ambas y en el segundo poner cuanto queremos que se desplace el elemento.

describe('Interactuando con drag and drops', () => {
  it('Interactuando con drag and drops', () => {
    cy.visit('https://demoqa.com/dragabble')
    cy.get('#dragBox')
      .trigger('mousedown', { which: 1, pageX: 0, pageY: 0 })
      .trigger('mousemove', { which: 1, pageX: 200, pageY: 200 })
      .trigger('mouseup')
  })
})
Israel Vasquez

Israel Vasquez

hace 3 años

Esta combinacion de movimientos me ayudo a entender mejor como funcionan los dragabbles.

it.only('Interacting with drag and drop', () => {
    cy.visit('/dragabble')
    cy.get('#dragBox')
    .trigger('mousedown', {which:1, pageX:600, pageY:100}) // Selection
    .trigger('mousemove', {which:1, pageX:700, pageY:400}) // Movement
    .trigger('mousedown', {which:1, pageX:700, pageY:400}) // Selection
    .trigger('mousemove', {which:1, pageX:900, pageY:200}) // Movement
    .trigger('mouseup') // De-selection
  })
Emmanuel Rodríguez

Emmanuel Rodríguez

hace 3 años

¡Rock 'n Roll! 🤟

it.only title:'Interactuando con drag and drop',config:function(){
   cy.visit('/dragabble')
    cy.get('#dragBox')
        .trigger('mousedown', {
           which:1,
            pageX:600,
            pageY:100,
       }).trigger('mousemove', {
           which:1,
           pagex: 100,
           pageY:600
      }).trigger(eventName:'mouseup')
})