"Ancora Imparo" - I'm still learning (Michelangelo at 87)

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

Share on

Share on facebook
Share on twitter
Share on linkedin

About the Autor

Jamiu Idowu

Jamiu Idowu

Entrepreneur seeking to shape the world through IT and emerging technologies. Enjoys research and technical writing, and can serve as a bridge between technology and its users.

Liked this article?

We have a lot more where that came from!
Join the subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.

Want to make your life easier?

Use Testup,  the easiest test automation tool on the web. Don’t hesitate and 

Well done so far!

Was something unclear?

We have our own Slack workspace for your support, which you are welcome to join.