JavaScript Drag & Drop Simulator

Pure JavaScript implementation HTML5 drag & drop simulator. It is to be used in UI tests using WebDriver.

Most WebDriver implementations by major browser vendors have not yet properly implemented support for automating HTML5 drag and drop. Although it's actively being worked on, it is not yet there.

https://bugs.chromium.org/p/chromedriver/issues/detail?id=1392#c4

Until then, this is the only solution. Existing implementations:

• Are incomplete
• Are incorrect
• Depend on frameworks such as jQuery.

The most widely spread example of this is:

https://gist.github.com/rcorreia/2362544

Which doesn't work correctly since it fails to implement the DataTransfer object correctly, neither does it implement all the drag and drop events. This solution does all of that and is written in pure JavaScript. It dispatches the following events in the following order:

• mousedown
• dragstart
• drag
• dragenter
• dragover
• drop
• dragend
• mouseup

Which is exactly what the browser emits when you perform the drag and drop manually. On top of that, it more properly implements the DataTransfer object described here:

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

Using

All you have to do is figure out how to execute JavaScript code in your UI automation framework. In Selenium C# this would be:

IJavaScriptExecutor executor = driver as IJavaScriptExecutor;
executor.ExecuteScript("js code here");

Inject the code contained in dndsim.js and then you can call the following JavaScript code to perform the drag and drop:

DndSimulator.simulate('#sourceElem', '#targetElem');

You can pass in CSS selectors or a JavaScript HTMLElement object.

License

This code is licensed under the MIT license. See LICENSE for more information or visit:

https://opensource.org/licenses/MIT