How to Test HTML5 Drag and Drop
Intro
Exercising a page's drag-and-drop functionality should be simple with Selenium's Actions API, but HTML5 drag and drop doesn't work with it in every browser. At the time of writing, it works in Chrome, but not in Firefox.
A Solution
As a workaround that works in every browser, we can simulate dragging and dropping by executing JavaScript with Selenium. Let's continue with an example.
Example
You can see a simple HTML5 drag and drop example here on the-internet.
First, we borrow the JavaScript made available by rcorreia on GitHub for
this workaround and store it in a local file (e.g., dnd.js). It adds a simulateDragDrop function to jQuery (which
the page already uses), that fires the same events the browser fires when a user drags and drops an element.
Then, in our test, we visit the page, read the dnd.js file, and execute it with Selenium along with the function
call and the elements we want to work with ($('#column-a').simulateDragDrop({ dropTarget: '#column-b'});). After
that, it's just a simple matter of grabbing text from the page and making an assertion against it.
Since there are only two elements to drag and drop on the page, they should have switched places. So, column-a
should now contain the text B, and column-b should contain the text A.
Expected Behavior
- Open the browser
- Visit the page
- Text in Column A and Column B will switch places
- Close the browser
Summary
Hopefully this tip has helped you figure out how to wrangle HTML5 dragging and dropping in every browser.
Happy Testing!
Authors
