data-react-beautiful-dnd-draggable does not work with cypress drag and drop command

Hi,

I have been trying to understand why the mouse/keyboard cypress commands don’t work with the ‘data-react-beautiful-dnd-draggable’ in react for a web application we have developed. I am running the cypress tests on Chrome on an element of type ‘form’.

I am attempting to drag and drop a series of text boxes by swapping them with each other. These text boxes can be identified using ‘form id=X’. The text boxes also have a ‘data-position’ attribute. On drag and drop these text boxes should fire an API call that gets the text boxes reordered but so far had no luck actually moving the textboxes around.

I have tried the following approaches:

• dnd plugin
• following the cypress dnd recipe
• using keyboard actions such as keyDown/keyUp
• using dragstart,dragend,mouseover,mousedown

This is a snippet of the code I was running: Keyboard actions:

describe("Reorder text boxes", () => {
    it("should reorder textboxes", function() {
      cy.wait(2000);
      cy.get("div[class*=index_banner]:nth-child(2)")
        .focus()
        .trigger("space", { keyCode: space, force: true })
        .trigger("keyup", { keyCode: arrowUp, force: true })
        .wait(5000)
        .trigger("space", { keyCode: space, force: true });
      });
  });

Mouse actions:

              cy.get(`form[id=309]`)
              .parent() // locates dnd-react component
              .focus()           
              .trigger('mousedown', { clientX: 338 , clientY: 268 })              
              .trigger('mousemove', { clientX: 338 , clientY: 262 })
              wait(3000)
              .trigger('mouseout', { clientX: 339 , clientY: 258 })
              .trigger('mouseleave', { clientX: 339 , clientY: 258 })
              .trigger('mouseover', { clientX: 318, clientY: 262})

HTML

I have also tried to use the invoke() function to change the ‘data-position’ attribute.

Any help would be greatly appreciated!

Cypress package version: 3.1.5 Chrome 73

[Shelex]

@sherryleneg Or custom command based on coords and mousevents, accepts 2 arguments - draggable and target selectors:

Cypress.Commands.add('dragAndDrop', (subject, target) => {
    Cypress.log({
        name: 'DRAGNDROP',
        message: `Dragging element ${subject} to ${target}`,
        consoleProps: () => {
            return {
                subject: subject,
                target: target
            };
        }
    });
    const BUTTON_INDEX = 0;
    const SLOPPY_CLICK_THRESHOLD = 10;
    cy.get(target)
        .first()
        .then($target => {
            let coordsDrop = $target[0].getBoundingClientRect();
            cy.get(subject)
                .first()
                .then(subject => {
                    const coordsDrag = subject[0].getBoundingClientRect();
                    cy.wrap(subject)
                        .trigger('mousedown', {
                            button: BUTTON_INDEX,
                            clientX: coordsDrag.x,
                            clientY: coordsDrag.y,
                            force: true
                        })
                        .trigger('mousemove', {
                            button: BUTTON_INDEX,
                            clientX: coordsDrag.x + SLOPPY_CLICK_THRESHOLD,
                            clientY: coordsDrag.y,
                            force: true
                        });
                    cy.get('body')
                        .trigger('mousemove', {
                            button: BUTTON_INDEX,
                            clientX: coordsDrop.x,
                            clientY: coordsDrop.y,
                            force: true            
                        })
                        .trigger('mouseup');
                });
        });
});

[alexreardon]

@sherryleneg here is one of our tests for you to leverage: https://github.com/atlassian/react-beautiful-dnd/blob/master/cypress/integration/reorder.spec.js