Testing drag and drop with Leadfoot

Question

We are testing a simple drag and drop behaviour with Intern and the excellent new Leadfoot client library. Our requirement is simple:

1. Find an element and move to it
2. Press the mouse button (pick up the draggable item)
3. Find another element and move to it (drag)
4. Release the mouse button (drop the draggable item)
5. Check something happened

I would expect the following example syntax to perform this task:

.findById("MY_DRAGGABLE")
  .moveMouseTo()
  .pressMouseButton()
.end()

.findById("MY_DROP_ZONE")
  .moveMouseTo()
  .releaseMouseButton()
.end()

This doesn't work. I already know that there may be an idiosyncrasy in Selenium and that a couple of 'moves' may be required to pick up something draggable:

.findById("MY_DRAGGABLE")
  .moveMouseTo()
  .pressMouseButton()
  .moveMouseTo(null, 1, 1)
.end()

This still doesn't work and in fact to make the 'pickup' work I have to add a click() as well:

.findById("MY_DRAGGABLE")
  .moveMouseTo()
  .click()
  .pressMouseButton()
  .moveMouseTo(null, 1, 1)
.end()

This part now works and the draggable is picked up, but the move and release doesn't work. In fact to make them do what I want I have to use a rather strange syntax which breaks out of the promise chain:

.findById("MY_DROP_ZONE")
  .then(function(element) {
    browser.moveMouseTo(element)
  })
  .releaseMouseButton()
.end()

So in the end I have:

.findById("MY_DRAGGABLE")
  .moveMouseTo()
  .click()
  .pressMouseButton()
  .moveMouseTo(null, 1, 1)
.end()

.findById("MY_DROP_ZONE")
  .then(function(element) {
    browser.moveMouseTo(element)
  })
  .releaseMouseButton()
.end()

What I'm interested to know is whether or not there is something about object positioning that I'm missing here or whether or not there may be a fault in the commands we are using?

We're testing this on Firefox primarily on a variety of platforms.

Answer 1

Unfortunately, Selenium doesn't support HTML5 drag-and-drop, so while the mouse press and release are registered by the browser, the drag operation is not.

One solution is to use JavaScript to simulate the drag-and-drop process. An example of how to do this is the DragAndDrop helper in the dnd branch of Leadfoot.