I am trying to drag an element and then drop it into a drop zone area, but the test is not performing the drag and drop action in Cypress.io. It would be really helpful if someone could advise about the potential issue here. There are no errors throwing, but still, the drag and drop is not happening here.

describe('Verify the drag and drop test', function() {

  it.only('Check whether the drag and drop of an item is working fine', function() {

  cy.visit('.html')  

    const MyDataTransfer = function () {};
    const dt = new MyDataTransfer ();
    dt.types = [];

    // cy.wait(3000);

    cy.get('#todrag span')
      .contains('Draggable 1')
      .trigger("draggable", {dataTransfer: dt});

    cy.get("#todrag span")
      .contains('Draggable 1')
      .trigger('mousedown', { which: 1, pageX: 600, pageY: 600 })
      .trigger('mousemove', { which: 1, clientX: 330, clientY: 35 });

    cy.wait(3000);

    cy.get('#mydropzone')
      .trigger("dropzone", {dataTransfer: dt});                     
  });   
});

I am trying to drag an element and then drop it into a drop zone area, but the test is not performing the drag and drop action in Cypress.io. It would be really helpful if someone could advise about the potential issue here. There are no errors throwing, but still, the drag and drop is not happening here.

describe('Verify the drag and drop test', function() {

  it.only('Check whether the drag and drop of an item is working fine', function() {

  cy.visit('http://www.seleniumeasy./test/drag-and-drop-demo.html')  

    const MyDataTransfer = function () {};
    const dt = new MyDataTransfer ();
    dt.types = [];

    // cy.wait(3000);

    cy.get('#todrag span')
      .contains('Draggable 1')
      .trigger("draggable", {dataTransfer: dt});

    cy.get("#todrag span")
      .contains('Draggable 1')
      .trigger('mousedown', { which: 1, pageX: 600, pageY: 600 })
      .trigger('mousemove', { which: 1, clientX: 330, clientY: 35 });

    cy.wait(3000);

    cy.get('#mydropzone')
      .trigger("dropzone", {dataTransfer: dt});                     
  });   
});

• javascript
• drag-and-drop
• cypress

Share Improve this question Follow edited Jan 9, 2019 at 19:32 jacefarm 7,50166 gold badges3737 silver badges4646 bronze badges asked Aug 17, 2018 at 6:55 soccerwaysoccerway 12k2323 gold badges8181 silver badges161161 bronze badges 4

• 1 Any advice on the drag and drop issue in Cypress.io test ? – soccerway Commented Aug 20, 2018 at 10:45
• 1 Couldn't make it work (their DnD seems a mess), but you're triggering draggable/dropzone events which don't seem to be bound on either of those elements, so there's that. – dwelle Commented Dec 24, 2018 at 19:01
• Later, I have tried something less plicated and it is working. But I am looking forward from cypress team to have the DnD in the next major release which should be in a better state. – soccerway Commented Dec 24, 2018 at 23:19
• You can paste your working code for this example into your own answer. – dwelle Commented Dec 25, 2018 at 9:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

A few changes should achieve what you are looking for. Here's a breakdown of steps taken to solve this question...

First off, instead of stubbing out MyDataTransfer, just construct a new DataTransfer object, which es packed with the necessary properties and methods needed for drag events:

const dataTransfer = new DataTransfer;

Next, it's best to trigger native drop and drag events, as opposed to draggable and dropzone. Selenium Easy is listening for dragstart, dragend, and drop (you can see this inside of their drag-and-drop-demo.js source file). Put these inside of a helper function, to be called later inside the test:

function dndIt() {
  cy.get('#todrag span:first-of-type')
    .trigger('dragstart', { dataTransfer });

  cy.get('#mydropzone')
    .trigger('drop', { dataTransfer });

  cy.get('#todrag span:first-of-type')
    .trigger('dragend');               // <-- seleniumeasy listens for this...
}                                      // otherwise, draggables are copied.    

A beforeEach block is helpful for setting the viewport and visiting the application:

beforeEach(function() {
  cy.viewport(1000, 600);
  cy.visit('https://www.seleniumeasy./test/drag-and-drop-demo.html');
});

And finally, the test block calls the helper function, and asserts that the item was dragged and dropped:

it('Check whether the drag and drop of an item is working fine', function() {
  dndIt();

  cy.get('#droppedlist')
    .should(($el) => {
      expect($el.children()).to.have.lengthOf(1)
    });
});

Here's the solution in its entirety:

describe('Verify the drag and drop test', function() {
  const dataTransfer = new DataTransfer;

  function dndIt() {
    cy.get('#todrag span:first-of-type')
      .trigger('dragstart', { dataTransfer });

    cy.get('#mydropzone')
      .trigger('drop', { dataTransfer });

    cy.get('#todrag span:first-of-type')
      .trigger('dragend');               // <-- seleniumeasy listens for this...
  }                                      // if left out, draggables are copied.

  beforeEach(function() {
    cy.viewport(1000, 600);
    cy.visit('https://www.seleniumeasy./test/drag-and-drop-demo.html');
  });

  it('Check whether the drag and drop of an item is working fine', function() {
    dndIt();

    cy.get('#droppedlist')
      .should(($el) => {
        expect($el.children()).to.have.lengthOf(1)
      });
  });
});

The drag_n_drop_spec.js provided in the cypress-example-recipes repo was a helpful resource.