Drag and drop interactions can be one of the more challenging things to get right in Cypress tests. I've used several different methods myself and eventually settled on a pattern which, while dependent on a third-party plugin, has proven reliable and stable for my needs.
My implementation relies on the cypress-real-events
plugin (NPM), which you can learn more about in my article "Essential Cypress Plugins I can't live without".
With this plugin installed, I just have a custom command with the following logic:
const dragAndDrop = (dragLocator, dropLocator) => {
cy.get(dragLocator)
.realMouseDown({ button: 'left', position: 'center' })
.realMouseMove(0, 10, { position: 'center' })
.wait(200);
cy.get(dropLocator)
.realMouseMove(0, 0, { position: 'center' })
.realMouseUp();
};
Because I'm just passing in the dragLocator
and dropLocator
values to cy.get()
commands, I can use IDs, CSS classes, or cy-data
locators, just like I would in my normal test logic.
Notice that after issuing the .realMouseDown()
command, I move the mouse cursor 10px
before moving to the element I want to target for the .realMouseUp()
event. That is just to give the UI a little "wiggle" to make sure that the element is picked up by the mouse cursor. Under the hood, I'm honestly not sure why this works, but it has improved reliability for me.
Also note that I then insert a hard 200ms
wait. This is normally considered a bad practice, but in this case it's there as an extra guarantee that everything works smoothly. I don't think waiting 1/5th of a second is much of a price to pay for something as complicated as a drag and drop action.
I hope this helps you use drag and drop in your codebase more effectively, or if you have another method that you prefer, let me know down in the comments. Thanks for reading!
Top comments (3)
Such a great post! Saving this for the future. I haven't used this plugin yet but definitely want to check it out.
@jmosley Thanks for the kind comment! The
cypress-real-events
plugin is excellent, and I really recommend you try it out. If you do implement drag-and-drop in your test suite successfully, I'd love to hear your feedback on the method I've suggested here.@samelawrence thanks a ton. I was struck to find a solution for 3 hours tried all possible drag and drop , but this worked.