Búsqueda de sitios web

typescript - Los comandos .trigger de Cypress con mousedown, mousemove y mouseup no funcionan

¿Hay algún método secreto para que esto funcione?

Estamos usando la biblioteca draggable para hacer esto en la interfaz de usuario.

https://github.com/Shopify/draggable/tree/master/src/Draggable

Estoy intentando arrastrar una columna a la siguiente usando el ejecutor de automatización Cypress.

Este es mi código:

cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .trigger('mousedown', { which: 1 });
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(1)
      .trigger('mousemove')
      .trigger('mouseup');

Ejecutar este código no tiene ningún resultado visible.

También probé esto:

cy.get(dataExplorerTableAttributeDraggable)
      .eq(2)
      .trigger('mousedown', { which: 1 })
      .trigger('dragstart', {})
      .trigger('drag', {});
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .trigger('dragover')
      .trigger('drop')
      .trigger('dragend')
      .trigger('mouseup');

Debo dejar claro que necesito que la automatización realmente REALICE el arrastrar y soltar, no solo que active los eventos.

¿Qué me estoy perdiendo?

Respuesta #1

Incluso me he enfrentado al mismo problema; el único ajuste que me ayudó fue configurar - {clientX: 505, clientY: 357}

cy.get(etlWidget)
    .trigger('mouseover')
    .trigger('mousedown', {which: 1})
    .trigger('mousemove', {clientX: 505, clientY: 357})
    .xpath(PageElements.workflow.x_initial_drop_target_area)
    .trigger('mousemove')
    .trigger('mouseup', {force: true})

Para tu información, tienes que escuchar los eventos del navegador y establecer estos detalles. Más detalles aquí - https://developers.google.com/web/tools/chrome-devtools/console/events

Además, creo que esto solo funcionará en una ventana de visualización fija. Por favor, vea si esto ayuda.

Respuesta #2

Descripción del problema

Me he encontrado con el mismo problema, pero no estaba usando ninguna biblioteca.

El problema era que en algún lugar del código tenía una comprobación de tipo para el evento, así:

if (event instanceof MouseEvent) {
    /* this never gets executed in Cypress but works fine when manually testing in browser */
}

Después de algo de depuración, descubrí que el evento mousedown (disparado desde Cypress) es una instancia de Event pero de un entorno diferente (event instanceof Event siempre devolvía false). Nunca profundicé en esto, así que podría estar equivocado al respecto.

De todos modos, la solución para mí fue disparar un evento nativo de JavaScript en Cypress usando MouseEvent desde cy.window().

Solución potencial para tu caso

Ahora, después de mirar un poco esa biblioteca que estás usando, veo que utiliza eventos como DragMouseEvent que podrían ser el mismo problema que tuve. Si ese es el caso, supongo que el siguiente código podría hacerlo funcionar (no lo he probado):

cy.window().then(win => {
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .then($element => $element[0].dispatchEvent(new win.MouseEvent('mousedown', {button: 1, clientX: 100, clientY: 100})));
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(1)
      .then($element => $element[0].dispatchEvent(new win.MouseEvent('mousemove', {clientX: 100, clientY: 100})))
      .then($element => $element[0].dispatchEvent(new win.MouseEvent('mouseup', {clientX: 100, clientY: 100})));
})

Tenga en cuenta que $element es un elemento envuelto en jQuery. Además, clientX y clientY deben tener los valores de posición correctos del elemento en la página que desea arrastrar (100 es solo un marcador de posición).

La solución alternativa para mi problema anterior es realizar una comprobación de tipo duck en el código como esta:

if (event.pageX && event.pageY) {
    /* this now gets executed in Cypress and when manually testing in browser */
}

Esto solo funcionaría si estás escribiendo tu propio código (no usando una biblioteca).

Artículos relacionados