How do I programmatically create a DragEvent? - html

Question

This page describes the api for programmatically creating an event. Looking at the list, it indicates that Chrome and Safari do not support this api for creating DragEvents.
I'm trying to write automated tests for native html5 drag and drop behavior in an angular app. How can I programmatically mimic drag and drop events so I can do that?

Answer 1

You may want to use action chains (from selenium): https://code.google.com/p/selenium/wiki/AdvancedUserInteractions#Generating_Action_chains
We've used them on a non-angularjs app in the past for drag-drop. Anyway, as protractor (angularjs defacto tool for testing e2e apps) uses selenium webdriver, I bet you can use even protractor (https://github.com/angular/protractor) to accomplish that (with the object "browser.webdriver".
From protractors doc:
The browser.get method loads a page. Protractor expects Angular to be present on a page, so it will throw an error if the page it is attempting to load does not contain the Angular library. (If you need to interact with a non-Angular page, you may access the wrapped webdriver instance directly with browser.driver).

Answer 2

You're better off using the following protractor API:
https://code.google.com/p/selenium/source/browse/javascript/webdriver/actionsequence.js
You'll most likely want to use the following pattern:
browser
.actions()
.dragAndDrop(myEle, {x:100,y:100})
.perform();