Drag & Dropping doesn't work in Nightwatch + Selenium

Question

Using nightwatch and selenium, during a system test, I am trying to drag and drop, which is done with Knockout-draggable. It works 100% while using it manually. This is the code from the system test which is supposed to drag and drop a draggable box:

this.moveToElement('@box', 0, 0);
c.mouseButtonDown(0);
this.moveToElement('@box2', 0, 40);
c.mouseButtonUp(0);

this being the page (in which the xpath elements are) and c being the client.

But this doesn't seem to even be able to move the box under the second box (which is about 40 pixels high). Yes, I've tried different numbers and it doesn't even drag the box anywhere. Done in Firefox.

And yes, both @box and @box2 are working xpaths. I have been using those for a while for a bunch of other tests.

Answer 1

How about put a pause between c.mouseButtonDown(0); and this.moveToElement('@box2', 0, 40);

Answer 2

Guys you have to try this and it works fine in Chrome, Firefox and IE. But this works only if the element to move and the element to move to are both supporting HTML5 drag and drop feature.

Just you have to install "html-dnd" using npm, as well as this is a link -
https://www.npmjs.com/package/html-dnd

After installing you just have to execute this command:
browser.execute(dragAndDrop, ['#draggable', '#droppable']);

For example:
browser.execute(dragAndDrop,['#elemendId1', '#elemendId2']).pause(2000);

Hope this will work fine for your test cases.

Answer 3

I adapted @Hikaryu's method and it's working for me:

exports.dragAndDrop = function (browser, LocatorFrom, LocatorTo) {
  browser
    .moveToElement(LocatorFrom,  10,  10)
    .mouseButtonDown(0)
    .pause(2000)
    .moveToElement(LocatorTo,  10,  10)
    .pause(2000)
    .mouseButtonUp(0);
  return browser;
};

Answer 4

I made a customCommand for this issue. It's working without a problem

module.exports.command = function (LocatorFrom, LocatorTo, callback) {

  var self = this;

  this
    .getLocation(LocatorTo, function (result) {
      let xto = result.value.x;
      let yto = result.value.y;

      this.moveToElement(LocatorFrom,  10,  10)
        .mouseButtonDown(0)
        .pause(2000)
        .moveToElement(LocatorTo,  xto,  yto)
        .pause(2000)
        .mouseButtonUp(0);
      return this;
    });



  return this;
};