Cypress code-snippet#1- Drag and Drop feature

VinayakTitti-Technical QA
2 min readApr 8, 2020

--

At the point when it comes to browser native events, for example, file transfer, drag and drop, and so on., handling in Selenium is simple yet in Cypress is somewhat dubious. Please check the below proven and workable solutions for drag and drop feature in Cypress.

Approach 1:
Using events such as dragstart, drop and dragend we can successfully achieve drag and drop.

Create a new DataTransfer object, which comes packed with the necessary properties and methods needed for drag events.

/** Used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML Drag and Drop API. */

interface DataTransfer {

/*** Returns the kind of operation that is currently selected. If the kind of operation isn’t one of those that is allowed by the effect allowed attribute, then the operation will fail.

Other approaches:

Using XY coordinates

cy.get(dragloc)        .trigger('mousedown', { button: 0 })        .wait(1500)        .trigger('mousemove', {               clientX: 357.75,               clientY: 682.25,               screenX: 1811.75,               screenY: 799.25,               pageX: 682.25,               pageY: 105.8125           })         .trigger('mouseup', { force: true });˝

Handling React drag and drop:

  1. Create a reusable function in commands.js file and call it in spec file as below:

commands.js

spec.js

cy.dragAndDrop(dragloc, droploc, 0, 0);

Hope the above workable solutions help with drag and drop feature in Cypress.

Thanks!

--

--

VinayakTitti-Technical QA

Extensive international experience having worked in UK and Asia (India & Malaysia) in a wide variety of tools- Selenium, Appium, Protractor & Cypress.