Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HTML5 dragging does not always work on Chrome

See original GitHub issue

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);
        });
    });
});

Issue Analytics

State:
Created 10 years ago
Reactions:2
Comments:31 (7 by maintainers)

Top GitHub Comments

8reactions

LibuMathewcommented, Mar 21, 2017

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

0reactions

IgorSasovetscommented, Jan 23, 2018

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