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

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 2

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 3

Ok playing around I found that I there are better ways. probably the sources I was looking before were outdated. The following script will do the trick very clean and easy...

it( 'step : 6 : select star rating min === 1 and max === 2' , function (done) {

    driver.actions()
        .mouseDown(element(by.css('.filter-editorial-rating .ngrs-handle-max')))
        .mouseMove(element(by.css('.filter-editorial-rating .step-2')))
        .mouseUp()
        .perform();


element( by.css( '.results-indicator' ) ).getText()
    .then( function ( text ) {
        resultsB = parseInt (text.split(" ")[0]);
        expect( resultsB ).toBeLessThan( resultsA );                            
        done();
    });
});

you can get driver like this ...

browser.get(url);
var driver = browser.driver;

Cheers

Answer 4

        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.

Answer 5

I'm in a middle of converting automation project from the use of SELENIUM_PROMISE_MANAGER to the use of JS native async/await. Previously, I've been utilizing the way described by user3800138 ^, however it didn't work for me anymore as well as all other approaches described here. What did work for me is chaining every single action through then method like this

dragAndDrop: ( $element, $destination ) =>
    browser
        .actions()
        .mouseMove( $element )
        .perform()
        .then( () => browser
            .actions()
            .mouseDown( $element )
            .perform() )
        .then( () => browser
            .actions()
            .mouseMove( $destination )
            .perform() )
        .then( () => browser
            .actions()
            .mouseUp()
            .perform())

and then calling it like this await dragAndDrop($leftSlider, $lastDateTitle);

Or the same using await will look like this

dragAndDrop: async( $element, $destination ) => {
    await browser.actions().mouseMove( $element ).perform();
    await browser.actions().mouseDown( $element ).perform();
    await browser.actions().mouseMove( $destination ).perform();
    await browser.actions().mouseUp().perform();
}

I know it's a bit bulky, but I couldn't find a better option

Answer 6

As someone already mentioned (but is a bit outdated) you can also move the slider to any direction by just providing x,y coordinates:

browser.actions().dragAndDrop(sliderElement, {x: 10}).perform()

browser.actions().dragAndDrop(sliderElement, {x: -10}).perform()

browser.actions().dragAndDrop(modalElement, {x: 100, y:100}).perform()

Answer 7

import {code as dragAndDrop} from 'html-dnd';

it("dragAndDropInCanvas",function(){
   var xy= (element(by.className('row ng-star-inserted')),{x: 300, y: 300});
   var source_1 = element(by.xpath('//*[@id="sidebarnav"]/li[3]/ul/li[1]'))
   var target = element(by.id('mainCanvas'));
   browser.sleep(1000);
   browser.executeScript(dragAndDrop, source_1, target);
   browser.sleep(2000);
   element(by.className('col-4 ng-star-inserted')).click()
   browser.sleep(5000)
  })

Answer 8

With problems like this one, I isolate the business code (which actually does something useful with the drag & drop events) from the UI. That way, I can make sure the drag-start code will fill out the data structures correctly and I can make sure that the drop handling code will do the right thing without actually having to have something send real drag&drop events.

That way, the real event handling code is just 1-2 lines, so the chances that it breaks there are very, very slim. Also, there is no reason to test the drag&drop code of your browser or OS; this code should work.