How to simulate a drag and drop action in protractor?

Question

I have a double slider and I'd like to test that it's operable and return's the right data. The slider has a min and a max handler, it also has some "breakpoints that I can hook to. "

What I want to simulate is

• a touchStart of the ".handler-max" element
• a move of the thumb over the element with class ".step-3"
• a touchEnd of the ".handler-max" element

while I found how to trigger a touchStart and a touchEnd event. I'm clueless on how to simulate the move of the thumb

browser.executeScript('angular.element(arguments[0]).triggerHandler("touchstart");', filterHandler);
// <--- move event????
browser.executeScript('angular.element(arguments[0]).triggerHandler("touchend");', filterHandler);

P.S. The scope of this question is an integration test that tests if what happens to the application when a user interact's with a double slider directive is the desirable result.

Answer 1

This is quite straightforward nowadays:

browser.actions().dragAndDrop(elem, target).perform();

---

Where dragAndDrop behind the scenes is mouseDown + mouseMove + mouseUp:

/**
 * Convenience function for performing a "drag and drop" manuever. The target
 * element may be moved to the location of another element, or by an offset (in
 * pixels).
 * @param {!webdriver.WebElement} element The element to drag.
 * @param {(!webdriver.WebElement|{x: number, y: number})} location The
 *     location to drag to, either as another WebElement or an offset in pixels.
 * @return {!webdriver.ActionSequence} A self reference.
 */
webdriver.ActionSequence.prototype.dragAndDrop = function(element, location) {
  return this.mouseDown(element).mouseMove(location).mouseUp();
};

Answer 2

elem = Element you want to move;

target = Element where you want to drop elem;

For WebdriverJS:-

browser.driver.actions().dragAndDrop(elem,target).mouseUp().perform();

For Protractor:-

browser.actions().dragAndDrop(elem,target).mouseUp().perform();

Answer 3

        var plot0 = ptor.element(protractor.By.id(''));

        ptor.driver.actions()

        .dragAndDrop(plot0, {x: 200, y: 100})

        .mouseMove(plot0, {x: 200, y: 100}) // 200px from left, 200 px from top of plot0

        .mouseDown()

        .mouseMove({x: 600, y: 0}) // 600px to the right of current location

        .perform();

This works for me guys. My scenario is drag a pop up dialog box which does not have a target element.