How to Implement Drag and Drop in Cypress

One of the best ways of providing a rich web-based experience for users is to include a way for elements to be moved easily from one point to another. This is what a feature like drag-and-drop seeks to achieve and it is exactly what is currently being used on WYSIWYG (What You See Is What You Get) development platforms like WordPress, Wix and Elementor. In this article, we will be exploring the two methods that can be used to interact with Drag and Drop UIs in Cypress and we would be providing a step-by-step guide on each method.

Method 1: Using the Cypress Drag-and-Drop plugin

Suppose we have a list of pending tasks and we would like to drag and drop some of these tasks into our to-do list using HTML Drag-and-Drop API, we can perform tests on this action in Cypress by following the steps below:

Step 1: Create a drag-and-drop.spec.js file where you would be writing your Cypress testing code

Step 2: Install the Cypress drag and drop plugin by entering the code below in your command line:

npm i cypress-drag-drop

Step 3: Once the plugin has been installed successfully, you now have access to the “drag” command which can be used to specify the destination where you would like to drop your dragged object. An example implementation can be seen below:

describe("Drag and Drop", () => {
 
    beforeEach(() => {
      cy.visit('/lists/drag-and-drop');
    });
   
    it('should drag visit beach to the to-do list', () => {
      cy.get('#visit-beach').drag('#todo-list');
    });
   
  });

Method 2: Using “DragStart” to move elements

Alternatively, we can perform drag-and-drop tests in Cypress using the DragStart method. This method does not require us to install a plugin. However, we would need to write some extra lines of code. Recalling our previous example of a to-do list, to perform this same test using DragStart, we would need to specify a data transfer object, the id of the item we want to drag and the destination to which we would like to drop the object.  An example implementation to be written in the drag-and-drop.spec.js file can be found below:

describe("Drag and Drop", () => {
 
    beforeEach(() => {
      cy.visit('/lists/drag-and-drop');
    });
    
    it('should drag visit beach to the to-do list', () => {
      const dataTransfer = new DataTransfer();
   
      cy.get('#visit-beach').trigger('dragstart', {
        dataTransfer
      });
   
      cy.get('#todo-list').trigger('drop', {
        dataTransfer
      });
    });  
   
  });