Drag and Drop is confusing. Document better, or create a better syntax to work with it

[juliemr]

Using an action sequence is hard, and causes a lot of confusion. Let's discuss how to make this easier.

[elgalu]

What about:

/**
 * Schedules an ElementFinder's new dragAndDrop({x: x, y: y}) action sequence.
 * @return {!webdriver.promise.Promise} A promise that will
 *     be resolved when the element is drag and dropped.
 */
ElementFinder.prototype.dragAndDrop = function(x, y) {
    return browser.actions().dragAndDrop(this,
        { x: x, y: y }).perform();
};

[juliemr]

@elgalu I like that. I still think we'll need documentation for other cases though (eventually someone will have to do a mouseMove or something), so in either case unless we want to completely wrap every possible thing in the action sequence (which I don't think we do) we'll need better documentation on how the methods under browser.actions work.

[elgalu]

I say let's wrap it all!! :)
It would be nice that they become chainable too:

elm.dragAndDrop(10, 50).mouseDown().mouseUp().click(); // and so on..

[ashaffer]

How about just

elem1.dragTo(elem2).drop()

That way you can test that the behavior while the drag is occurring is correct, e.g.:

elem1.dragTo(elem2);
expect(container).to.eventually.have.class('pointer')
elem1.drop();

Of course, elem2 could be either an element or an {x:,y:} offset pair.

[clement94]

I try to use dragAndDrop with protractor and I would like to know if you could add the following function :

webdriver.ActionSequence.prototype.dragAndDrop2 = function(element, location, opt_offset) {
    return this.mouseDown(element).mouseMove(location, opt_offset).mouseUp();
}

Indeed, there's no function allowing user to drag and drop an element into another one at a specific offset.

thanks

[BarTsouri]

@juliemr
I would like to contribute for this matter. Where do I begin?

[elgalu]

@BarTsouri you can contribute by making possible stuff like

elm.doubleClick();
elm.mouseMove();
elm1.dragAndDrop(elm2);
elm.dragAndDrop(10, 50);
elm.dragAndDrop(10, 50).mouseDown().mouseUp().click(); // and so on..

And updating related documentation.

[pidupuis]

Any advance on this topic ?
I am currently not able at all to simulate a drag and drop... I would really like to have a better flexibility and a better documentation

[heathkit]

We're not going to make any API changes. However, I'll do the following

• Add the browser.actions() API to our docs
• mention this in the FAQ (and also mention that HTML5 DnD events do not work in Chrome due to a known chromedriver issue)
• add a cookbook example for doing drag and drop