Cypress - Drag and drop not working on a react-based website

Question

I'm struggling with Cypress for any drag and drop actions on a react-based website. The actions don't fail in the Cypress dashboard, but the items simply don't get dragged.

What I have is a set of divs which are a list of pages that are "In Menu" (so they are visible to users), and another set of divs which are "Not In Menu" (so they are not visible to the users). What I want to do is move the "Not In Menu" pages into the "In Menu" section.

These are the elements in the website:

The "draggable" item:

<div data-testid='pages-section-not-in-menu-list' data-rbd-droppable-id="notInMenu" data-rbd-droppable-context-id="0" class="draggable-place">
    <div class="page1">Page1</div>
    <div class="page2">Page2</div>
    <div class="page3">Page3</div>
</div>

The "droppable" area:

<div data-testid='pages-section-in-menu-list' data-rbd-droppable-id="inMenu" data-rbd-droppable-context-id="0" class="droppable-place">
</div>

My code:

public dragAndDropPagesToInMenu(): void {

        const dataTransfer = new DataTransfer();
        cy.wait(3000);
        cy.log("Dragging one page to `In Menu` section");
        cy.get("div[class='page3']")
            .first()
            .trigger('dragstart', { dataTransfer });
        cy.get("div[data-testid='pages-section-in-menu-list']")
            .eq(0)
            .trigger('drop', { dataTransfer });
        cy.get("div[class='page3']")
            .last()
            .trigger('dragend');

    }

I've also tried the following solutions, but none of them have worked so far:

Any ideas?

score 4 · Answer 1 · answered Mar 04 '22 at 10:33

I have the same issue and I found this solution. Hope it works for you:

Add the following code to your cypress/support/commands.js file

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

then you can do something like this in your test

describe('example to drag & drop in react web app', () => {
 it('drag & drop', () => {
   cy.visit(
     'https://react-beautiful-dnd.netlify.app/iframe.html?id=single-vertical-list--basic'
   )
   cy.get('[data-rbd-draggable-id="1"]').dragAndDrop(
     '[data-rbd-draggable-id="1"]',
     '[data-rbd-draggable-id="4"]'
   )
 })
})

This is a super answer. I would just like to add, that it may be necessary to add your command.js to your index.js file (https://stackoverflow.com/questions/47695535/cypress-custom-command-is-not-recognized-when-invoked). In addition, when working with typescript, you might want to modify your Cypress interface: ```export {} declare global { namespace Cypress { interface Chainable { dragAndDrop: (subject:string, target:string) => void; } } }``` — Gregoire Cattan, Apr 21 '22 at 12:17

score 3 · Answer 2 · answered Dec 21 '21 at 08:06

Here is what worked for me, notice the small wait between drop and dragend. That portion was very important:

cy.get('element to be dragged').trigger('dragstart');
cy.get('target where we will drop the element')
  .trigger('dragenter', { force: true })
  .trigger('dragover', { force: true })
  .trigger('drop', { force: true })
  .wait(50)
  .trigger('dragend', { force: true });

I had to use force since the element that I was dragging gets invisible for a few milliseconds. Which made the trigger action fail, so adding force fixed that.

score 2 · Accepted Answer · answered Jul 23 '22 at 17:13

To simplify @Agustin Catalano's answer, you can make the custom command a child command, by passing { prevSubject: "element" } as the second argument to Cypress.Commands.add, like so:

// cypress/support/commands.ts

declare global {
    namespace Cypress {
        interface Chainable {
            /** Custom command to drag subject to target */
            drag(target: string, options?: Partial<TypeOptions>): Chainable<Element>

        }
    }
}


/** Adds custom command `cy.drag` to the global `cy` object  */
Cypress.Commands.add("drag", { prevSubject: "element" }, (
  subject: Cypress.JQueryWithSelector<HTMLElement>, 
  target: string, 
  _options?: Partial<Cypress.TypeOptions>
) => {
    const BUTTON_INDEX = 0;
    const SLOPPY_CLICK_THRESHOLD = 10;

    cy.get(target)
        .first()
        .then($target => {
            let coordsDrop = $target[0].getBoundingClientRect();

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

This way, you only have to specify the selector of the subject once in the query chain:

cy.get("subject").drag("target")

Cypress - Drag and drop not working on a react-based website

3 Answers3