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:

• How to implement drag and drop in cypress test?
• https://applitools.com/event/drag-and-drop-in-cypress/
• https://docs.cypress.io/api/commands/trigger#Arguments

Any ideas?

Answer 1

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"]'
   )
 })
})

Answer 2

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.