HTML5 dragging does not always work on Chrome

[bartvanherck]

Following test case:

describe('Drag materials', function() {
    ptor = protractor.getInstance();
    beforeEach(function() {
        browser.get('http://tombatossals.github.io/angular-leaflet-directive/examples/center-example.html');
    });
    describe('draggable map', function() {
        it('Drag Test', function() {
            var el = element(by.xpath('.//img[contains(@class, "leaflet-tile-loaded")][1]'));
            ptor.actions().dragAndDrop(el.find(),{x:40,y:40}).perform();
            expect(element(by.model("london.lat")).getAttribute("value")).not.toBe('51.505');
        });
    });
});

The test does not seem to drag the map. There is also no drop possible with the following test page: http://html5demos.com/drag that seems the same problem.

describe('Drag materials', function() {
    ptor = protractor.getInstance();
    beforeEach(function() {
       browser.get('http://html5demos.com/drag');
    });
    describe('draggable map', function() {
        it('Drag Test', function() {
            var item = element(by.xpath('//*/a[@id="one"]'));
            var dest = element(by.xpath('//*/div[@id="bin"]'));
            ptor.actions().dragAndDrop(el.find()dest.find()).perform();
            ptor.sleep(6000);
        });
    });
});

The drag and drop does even not work with mouseevents:

describe('Drag materials', function() {
    ptor = protractor.getInstance();
    beforeEach(function() {
       browser.get('http://html5demos.com/drag');
    });
    describe('draggable map', function() {
        it('Drag Test', function() {
            var item = element(by.xpath('//*/a[@id="one"]'));
            var dest = element(by.xpath('//*/div[@id="bin"]'));
            ptor.actions().mouseMove(item.find()).
                mouseDown(item.find()).
                mouseMove(dest.find()).
                mouseUp(dest.find()).
                perform();
            ptor.sleep(6000);
        });
    });
});

[juliemr]

There's some webdriver weirdness around drag and drop - let's pass these along to the webdriver team. Which browser are you using?

[bartvanherck]

I use Chrome latest version. Did you raise an error report to the webdriver team? Or do I still have to do it ?

[juliemr]

I have a set of webdriver-related things to look into - I'll add it to my list and take care of it.

[bartvanherck]

I found an issue in selenium https://code.google.com/p/selenium/issues/detail?id=3604 Looks like it is the same problem.

[boxertech]

The mouse movements seem to work for both the dragAndDrop and chained mouseDown mouseMove actions. But none of the HTML5 drag events (dragstart, dragend, dragover, dragenter, dragleave, and drop) are firing. This is using the Chrome driver.

[vkkaruna]

@juliemr Looks like this issue still exists. I am not able to drag and drop an element in chrome browser. The same code works fine in firefox. If you can help me it would be really great.
I am using protractor v1.0 and latest chrome browser.

[cristover-lopes]

Ditto. Drag and drop working fine in Firefox but not in Chrome.
Using Chrome 36, Firefox 31. and protractor 1.0.0 with chromedriver.

[FuturaITLtd]

I'm having the same problem - Protractor 1.3.1 - Chrome 37.0 - Firefox - 28.

Using the following code to drag and drop

browser.actions().dragAndDrop(slider, {x: amountX, y: amountY}).perform();

On 22 August 2014 16:08, cristover-lopes notifications@github.com wrote:

Ditto. Drag and drop working fine in Firefox but not in Chrome.
Using Chrome 36, Firefox 31. and protractor 1.0.0.

—
Reply to this email directly or view it on GitHub
#583 (comment).

[juliemr]

@hankduan Let's make a test case without using Protractor and add to https://github.com/juliemr/webdriver-bugs

[hankduan]

Is this test case necessary. It seems like it's a known issue documented here: https://code.google.com/p/selenium/issues/detail?id=3604

[juliemr]

Yup, good call. Known issue: https://code.google.com/p/selenium/issues/detail?id=3604

[NehaMG]

Still facing this problem on Chrome driver.
Any updates if this issue is fixed!!

[Lmahalin]

Im new to the Protractor -- i have to automate the drag and drop
Is there any workaround for this issue please help me on this guys.

ptor = protractor.getInstance();
var item = element.all(by.css('div[dnd-moved="list.splice($index, 1)"]'));
var dest = element.all(by.css('div.panel-body'));
ptor.actions().mouseMove(item.find()).
mouseDown(item.find()).
mouseMove(dest.find()).
mouseUp(dest.find()).
perform();
ptor.sleep(6000);

[davizuku]

I have the same problem.
My test tries to simulate a panning over an svg graph. Besides panning, the graph shows tooltips of values when the mouse passes over its area.

I simplified at the maximum the code to see if something was wrong in accessing the elements. However, when I execute the test, it seems like only mouseover events are fired, since tooltips are shown at the start and end points of the drag.

browser.actions()
    .mouseMove({x: 500, y: 300})
    .mouseDown()
    .mouseMove({x: -500, y: 0})
    .mouseUp().perform();
browser.sleep(3000);

Note: I fixed the window size so the coordinates of the code are correct.

Is there any update on this issue?

[nvega-ms]

Same issue here!

[EvanBurbidge]

Same issue was this ever resolved?

[pidupuis]

+1 need a solution

[lopesc]

+1

[keithrz]

Is this the root issue?
https://bugs.chromium.org/p/chromedriver/issues/detail?id=841

[pidupuis]

I guess so

[pidupuis]

But it does not work in firefox either for me. I tried every code I found on the internet, without any luck...

[keithrz]

It worked for my coworker on Firefox, but not Chrome. Specifics:

protractor version: 2.5.1

The test just drags the element 100 pixels down and drops it. We wanted to use pixels in our case because our drag&drop simply reorders an element within the same parent. The test drags the first item in a list, verifies that the dragged element is still visible, and verifies that the first element is now something else.

code:

      //test works in firefox but not in chrome - known drag and drop bug
      it('should drag and drop elements correctly', function() {
        var myElement = myPageObj.getElements().first();

        browser.actions().dragAndDrop(myElement, {x:0, y:100}).perform().then(function() {
          var elements = exportPDFView.getElements();
          expect(myElement.isDisplayed()).toBe(true);
          expect(elements.first().getText()).not.toEqual("Expected Text of dragged element");
        });
      });

[keithrz]

FYI, @EvanBurbidge says he got drag and drop working in Chrome&protractor: #123 (comment)

We haven't tried this approach, since you can't use it to drag a certain number of pixles. You can only use it to drop it into a different element.

[heathkit]

This is still an issue as of Selenium 2.53.1. I found that using mouse actions seems to work ok with drag and drop implementations that use mouse events, but the HTML5 drag and drop events are not firing. So, confusingly, drag and drop works some of the time, and not if you're trying to use HTML5 events.

[ChristianM18]

Hello everyone.
I am facing the exact same issue. Any information about a possible fix?

[zakirhere]

I used browser.wait and inside that, I keep calling dragAndDrop with an exit condition that the drag happened. Please note that a small time out works. I used that approach from my finding that if I call dragAndDrop multiple times, the drag works (through repl). On Feb 15, 2017 7:59 AM, "Christian Martins" <notifications@github.com> wrote: Hello everyone. I am facing the exact same issue. Any information about a possible fix? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#583 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADkYpOmZCl92QN_R9jej8KtGrri2lOyoks5rcvbCgaJpZM4BnVpH> .

[miriamstub]

@zakirhere can you please post an example?

[LibuMathew]

Resolved
I used the HTML Drag and Drop Simulator from GitHub https://github.com/PloughingAByteField/html-dnd

Working code:

 var dragAndDrop = require('html-dnd').code;
 
 describe('Protractor Drag and Drop', function () {
     it('should drag input to  ___content', function () {
         browser.get('http://127.0.0.1:7000/#/editor');
 
         var draggable = element(by.id('Input'));
         var droppable = element(by.id('___content'));
         var offsetX = 0;
         var offsetY = 0;
 
         browser.executeScript(dragAndDrop, draggable, droppable, offsetX, offsetY);
         browser.sleep(3000);
     });
 });

but offsetX & offsetY not working for me

[miriamstub]

@LibuMathew This works awesome!!!
Thank you!!!

[agusbosso]

@LibuMathew you are a genius!!! thanks!!!! 👏

[IgorSasovets]

Hi, everyone! I also had the same issue but with Firefox browser. Many actions such as DnD, right mouse button click, .etc don't work when running test in Firefox. Here is my implementation of these actions: https://github.com/IgorSasovets/protractor-firefox-support . Now I'm still working on it, but there are some methods that can be used for writing e2e tests using protractor.
Protractor version: 5.2.0
Firefox: 57.0.4
geckodriver: v0.19.1