Nightwatch: Drag and drop not working

[atkach]

nightwatch v0.8.18

I execute following code:
browser.moveToElement('#draggable', 0, 0)
.mouseButtonDown(0)
.moveToElement('#droppable', 10, 10)
.mouseButtonUp(0);

In Chrome (Version 49.0.2623.108 Ubuntu 14.04 (64-bit)) element not captured at all, looks like mouse gets triggered right after mouse down.

In Firefox 45.0, draggable captured but mouse don't release it, mouseButtonUp not wotking.

[beatfactor]

I'm afraid this is not something we can fix in Nightwatch, since it's related to how Selenium works.

[vernak2539]

@beatfactor is there a possible workaround?

[amitesh786]

@atkach - whatever you have provided above that was not working in nightwatch becasue it's depend on the cursor pointer for example if your cursor is present on the "droppable" element then it works fine but it is not possible if you are running your cases at night or automatic deploy on machines.

So, you have to try this and this was working 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']);

Hope this will work fine for your test cases.

@beatfactor - Sorry to say, but this features present in nightwatch as well as not working.
Yeah it's related to Selenium but it should work in nightwatch also as provided in nightwatch api.
This is the link - http://nightwatchjs.org/api/

[chhavijain1205]

is you code is working.. did drag and drop works in nightwatch

[amitesh786]

@chhavijain1205 - Yeah it's working in nightwatch, if it was not working in your case please upload a piece of code, so I'll check & let you know.

[chhavijain1205]

var dragAndDrop = require('html-dnd').codeForSelectors;
module.exports = {
'Demo test Google' : function (browser) {

.url('.............')
browser .execute(dragAndDrop,['/html/body/div/div/div/div/div/div/div/div/div/div[3]/div[2]/div[2]/div[2]/img[9]', '/html/body/div/div/div/div/div/div/div/div/div/div[3]/ul/li[1]/div[2]/div[2]/canvas'])
.end();

i have used xpath for droppable image and draggable image
i am doing by nightwatch

[amitesh786]

I have seen your code, just want to let you know few things like -

1) Check you path whether it is correct or maybe some issue for defining.
2) If you drag something from that path, could you check whether drop for some path but that shoud be present or open(box) ?
3) Could you check your chrome version if it is updated ?

If you're using function to return browser then it's fine to use - .url, .execute or .end() but in your piece of code what is this "browser .execute" ? it should never work like this.

[sandeepthukral]

I have created this custom command that I use to drag and drop elements.
My developers have not used the HTML5 drag-drop functionality

exports.command = function(dragFromSelector, dragToSelector){
  this.log(`Dragging ${dragFromSelector}`);
  this.log(`to ${dragToSelector}`);
  this
    .moveToElement(dragFromSelector, 5, 5)
    .mouseButtonDown(0)
    .moveToElement(dragToSelector, 5, 5)
    .mouseButtonUp(0)
    .pause(500);
};

[chhavijain1205]

Thanks for quick resolution now its working... i think the problem was with xpath .. with css selector it was working fine.