Drag and Drop in Cypress

Learn how to simulate drag and drop actions in Cypress

Drag and drop is a common tool that gives developers the ability to provide rich experiences for web apps. 

In this example that’s using the native HTML Drag and Drop API, if I wanted to add some ice cream to my order ticket, I can simply click and drag this over to my ticket and we can see that it was added. Similarly, I shouldn’t spoil my dinner. So, I’m also going to grab some fried chicken to start. 

But when this interaction is critical to your application, we want to make sure that we’re still able to test it, to make sure that it’s working as expected. 

So, in my code, I’m starting off a new test where first I’m going to visit that same page with our example. And I’m saying it “should drag fried chicken to the order”.

Now, like we usually do, the first thing that we want to do is grab the actual item we want to select. So here we can see that I found my list element, where I’m going to grab that ID of “menu-fried-chicken”.

In my test, I’m going to run cy.get where I’m going to pass in the ID as my selector. And I’m going to use the trigger method so I can trigger a new event where that event is going to be dragstart. 

How to Transfer Data with Drag Events in Cypress

Now, if I try to run this event, as is, inside of Cypress, we can see that we’re getting an error that says that it’s missing something. Particularly, it’s trying to setData, but it’s undefined. 

When we’re using any of our drag events, we also need to pass in a dataTransfer property. 

When we’re using the HTML Drag and Drop API, what we’re ultimately doing is using the dataTransfer object in order to take data from one place and put it in another. So, when we’re actually testing this drag and drop, we also need to provide that data transfer.

Let’s start off by passing in a second argument to this trigger method, where we’re going to define an object where we’re going to pass in a dataTransfer property. 

Instead of defining this in line, we’re going to actually use this in a second method. So, at the top of this statement, I’m going to say const dataTransfer, and I’m going to set that equal to a new DataTransfer(). 

Now, while it’s not doing anything yet, we can see that it was successfully ran. We can even see that if we hover over this, we can see that it’s starting to actually grab that item. 

How to Move Items with Drop Trigger Event in Cypress

Now let’s make it actually move over to the order.

To do that, I want to actually drag this item into the section that is accepting this drag request. And in this case, it’s going to be this div that has an ID of “plate”. 

So, I’m going to run a second cy.get statement where this time I’m going to pass in “plate”. Again, I’m going to use that trigger method where this time I’m going to say drop. I’m going to pass in that second argument where we’re going to pass in that dataTransfer.

If we look inside of Cypress, we can see that it already worked. And if we look through the steps, it first grabbed that item, and then it moved it over to our plate.

How to Use Cypress Drag and Drop Plugin

Now this didn’t really take too much to add, but what if we wanted a slightly simpler way to do this? 

We could instead install this cypress-drag-drop plugin, where we have an easy way to specify exactly where we want to drag and where we want to drop all in one simple statement. 

Now I’ve gone ahead and already installed this plugin.  What if this time we wanted to drag ice cream to the order? Similar to before, we first want to grab the ID of our item, which in this case is “menu-ice-cream”. So, I’m going to run cy.get and we’re going to specify “#menu-ice-cream”.

Now this time, instead of triggering our event, I’m going to use the drag command, which because we installed that plugin is now available on the cy object. But this time we want to pass in a slightly different ID. 

Because of how it works, we want to drag this item into “plate-items” instead of the “plate”. So, we’re going to use this ID of the unordered list that wraps these items of “plate-items”. 

But now if I pass in that ID of “#plate-items”, we can see that as Cypress goes through it was able to successfully move that ice cream over.

Differences Between Cypress Drag and Drop Methods

It’s important to note that there are differences between these 2 ways that we’re testing this drag and drop functionality. With this first way, we’re only using the dragstart and drop triggers. Where in the second instance, using the plugin, we’re able to use a variety of different options to try to attempt that drag and drop. 

This method of using the dragstart and drop may only work using the actual native HTML Drag and Drop API. If we actually look at what’s happening with the plugin, we can see that it’s triggering a variety of different methods, including the pointerdown, mousedown, and that dragstart, in order to try to attempt to actually drag that item over. 

Because there’s a variety of ways to actually implement drag and drop, and because some developers won’t actually use the native HTML API, we need to also see the variety of ways that we can test the drag and drop. 

Since we’re using the native HTML API, we can be confident that either of these methods will work, but we need to make sure that we’re testing our applications for how they’re actually implemented.

Resources

• Git Repo – drag-and-drop.spec.js
• Applitools Kitchen – Drag & Drop Testing
• HTML Drag and Drop API 
• Cypress Drag and Drop Plugin – npm cypress-drag-drop