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

[asos-sherrylenegauci]

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

[mateosilguero]

react-beautiful-dnd has itw own cypress integration to test the library. you should take a look into the repo, maybe you find the solution here: https://github.com/atlassian/react-beautiful-dnd/tree/master/cypress

[asos-sherrylenegauci]

Hi Matteo,

I have already followed that example and also did not work but thanks for the information.

[alexreardon]

👋 as mentioned, react-beautiful-dnd is already using cypress for our integration tests. For now we are just using keyboard dragging as there is less required to mentally parse

[asos-sherrylenegauci]

@alexreardon I have tried following that example but the keyboard commands won't work. Tab is also not supported by cypress so we can't tab on the elements on the page. I would be interested to understand more how you managed to make it work.

[Shelex]

@sherryleneg Also have this component tested with usual approach based on mousevents and coordinates. Worth mentioning, that mousevent will not drag element above its coordinates, so as a workaround I get body and then continue mousevent to target place.

[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

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

[jennifer-shehane]

Issues in our GitHub repo are reserved for potential bugs or feature requests. Closing since this is a question on Cypress use.

We recommend questions relating to how to use Cypress be asked in our community chat. Also try searching our existing GitHub issues, reading through our documentation, or searching Stack Overflow for relevant answers.

Alternatively, signing up for any of you paid plans gives you access to our team for support via email. If you would like something higher touch, we also offer screen sharing and workshops with our premium support options.

[mdbadiyuzamaevoke]

react-beautiful-dnd supports react version 15 or not?