Nightwatch.js: Drag and Drop

Question

I am trying to test a drag and drop operation using Nightwatch.js 0.8.18, Selenium Server 2.53.0 and Chrome Driver 2.21.2.

Basically, I take the approach described at https://github.com/RobK/nightwatchjs-drag-n-drop-example/blob/master/spec/drag-and-drop.js – i.e.: something like ...

.moveToElement('some-xpath-expression', 10, 10)
.pause(100)
.mouseButtonDown(0)
.pause(100)
.moveToElement('other-xpath-expression', 30, 30)
.pause(100)
.mouseButtonUp(0)

The cursor moves to the element to be dragged (perceivable by the :hover style of the icon the mouse is over), but then nothing happens. It looks to me like the mouseButtonDown() action has no effect. (But who knows for sure?)

It makes no difference if I use Firefox instead of Chrome – the behavior is exactly the same.

Any ideas?

Answer 1

Guys you have to try this and it works fine in Chrome, Firefox and IE.

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:

var dragAndDrop = require('html-dnd').codeForSelectors;
browser.execute(dragAndDrop,['#elemendId1','#elemendId2']).pause(2000);

Hope this will work fine for your test cases.

Answer 2

The moment you click the element the expression changes and thus the tests 'forgets' what they were supposed to be clicking.

It's recommended to use an action build approach as so:

http://elementalselenium.com/tips/39-drag-and-drop