Read more

Testing drag&drop with Selenium

Arne Hartherz
August 21, 2014Software engineer at makandra GmbH

When using jQueryUI's Sortable plugin Show archive.org snapshot (either directly or via Angular's ui.sortable Show archive.org snapshot ), you might struggle testing your nice drag&drop GUI since Selenium webdriver does not support native dragging events.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

But jQueryUI uses jquery.simulate for their testing, so why shouldn't you? There is even an extension to it that makes testing drag & drop quite easy.

Here is what you need:

  1. jquery.simulate.js Show archive.org snapshot
  2. jquery.simulate.ext.js Show archive.org snapshot
  3. jquery.simulate.drag-n-drop.js from jquery.simulate.ext above

Require those files in that order in a separate JS file that is only loaded for tests.

Then just do something like this:

$('.move-handle').first().simulate('drag-n-drop', { dy: 110, interpolation: { stepWidth: 10, stepDelay: 5 } })

The interpolation option is only there so that the element is actually dragged along its path. You may omit it. \
See the documentation Show archive.org snapshot for other options.

Posted by Arne Hartherz to makandra dev (2014-08-21 11:25)