Cypress .trigger commands with mousedown, mousemove & mouseup do not work

Question

Is there some secret method to get this working?

We are using the draggable library to do this in the UI.

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

I am trying to drag one column to the next using the Cypress automation runner.

This is my code:

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

Executing this code has no visible result whatsoever.

Also tried this:

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');

I must make it clear that I need the automation to actually DO the drag & drop, not just trigger events.

What am I missing?

Answer 1

I have even faced the similar issue; only tweak which helped me was setting - {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})

FYI., you have to listen to the browser events and set these details. More details here - https://developers.google.com/web/tools/chrome-devtools/console/events

Also, I think this will run only on fixed viewport. Please see if this helps.

Answer 2

Problem description

I have came across with same issue but I wasn't using any library.

Problem was that somewhere in code I had type check for event, like this:

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

After some debugging, I found out that mousedown event (fired from Cypress) is instance of Event but from different environment (event instanceof Event always returned false). I never dug deep into this, so I could be wrong about that.

Anyway, solution for me was to fire native JavaScript event in Cypress using MouseEvent from cy.window().

---

Potential solution for your case

Now after looking around a bit that library that you are using, I see it uses events such as DragMouseEvent which might be same problem like I had. If that is the case, I guess that following code would get it working (I haven't tested):

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})));
})

Please note that $element is jQuery wrapped element. Also clientX and clientY should have proper position values of element in page that you want to drag (100 is just placeholder).

---

Alternative solution for my problem above is to perform duck-type check in code like this:

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

This would work only if you are writing your own code (not using library).