Drag and drop Cypress test fails in Electron browser only

Viewed 902

I've got a drag and drop test based off a command that seems to be working for folks. The command triggers mouse events that react-beautiful-dnd understands as a drag and drop interaction. It's working beautifully in the Cypress GUI. I can see the list item dragging and dropping correctly and the test passes. However when I run the Cypress Electron browser that we use in CI, it doesn't work. I don't see the list item move, despite Cypress correctly finding the draggable element via my selector and invoking the same mouse event triggers without any type of error reported.

My assumption is that the Cypress trigger method has some problem triggering certain events in the Electron browser. Any tips or suggestions are greatly appreciated!

Dependencies:

"cypress": "^3.1.4",
"react-beautiful-dnd": "^10.0.3",
"react": "^16.6.0"

Code:

/*
 * Drag and Drop
 *
 * Based on https://github.com/atlassian/react-beautiful-dnd/issues/162#issuecomment-448982174
 */
Cypress.Commands.add(
  'dragAndDrop',
  { prevSubject: 'optional' },
  (subject, offset = { x: 0, y: 0 }) => {
    const BUTTON_INDEX = 0;
    const SLOPPY_CLICK_THRESHOLD = 10;

    cy
      .wrap(subject)
      .first()
      .then(element => {
        const coords = element[0].getBoundingClientRect();

        // Use { force: true } to prevent Cypress from scrolling and interfering with the drag behavior.
        cy
          .wrap(element)
          .trigger('mousedown', {
            button: BUTTON_INDEX,
            clientX: coords.x,
            clientY: coords.y,
            force: true
          })
          .trigger('mousemove', {
            button: BUTTON_INDEX,
            clientX: coords.x + SLOPPY_CLICK_THRESHOLD,
            clientY: coords.y,
            force: true
          });

        cy.get('body', { force: true }).trigger('mousemove', {
          button: BUTTON_INDEX,
          clientX: coords.x + offset.x,
          clientY: coords.y + offset.y,
          force: true
        });

        cy.get('body', { force: true }).trigger('mouseup');
      });
  }
);
0 Answers
Related