dragAndDrop NOT working on Chrome

[dhawanaseem]

I am trying to perform a Drag and Drop operation on our Angular application using Protractor Jasmine. I am able to get hold of the source item but as the test runs, the source element gets selected but nothing happens thereafter; the drag and drop operation does not take place. There are no errors shown in the console.

An interesting thing about the destination container is that the items dropped here can be resized as per user wish. Also, there is no clearly marked place/area in the destination container where the dragged item will get dropped! But the container does have an ID; though that has still not helped here.

Here is the code:
let dragAndDrop = require('html-dnd').code;
.
.
.

function dragAndDropListItems(fdIndex: number): void {
let dragElement = element.all(by.repeater('listDefinition in lists')).get(fdIndex); // Select the first repeater corresponding to the first List Item in the list

let dragElementh5 = dragElement.all(by.css('a')).get(0); // Select the first List Item
let printFD = dragElementh5.getText().then((text: string) => {
    console.log(text); // Print the innerHTML text from the chosen List Item to the Console
});

let finalDrop = element.all(by.css('[id="dashboardContainerDiv"]')).get(0);

dragElement.click();
browser.actions().dragAndDrop(dragElement, finalDrop).perform();

};

I have tried using coordinate based DragNDrop operation as well but the same in every case.

Other tried options include:

//browser.executeScript(dragAndDrop, dragElement, finalDrop); // Perform the drag and drop operation 

//browser.driver.actions().dragAndDrop(dragElement, finalDrop).perform();

//browser.actions().dragAndDrop(dragElement, { x: 400, y: 400 }).perform();      

// browser.driver.actions().mouseDown(dragElement).mouseMove(finalDrop).mouseUp(finalDrop).perform();

[zac11]

Please mention your protractor and Chrome/Firefox version?

[dhawanaseem]

@zac11
Protractor version: 5.1.1
Chrome version: 58.0.3029.110 (64-bit)

Let me please know if you need some more info.

[wswebcreation]

Hi @dhawanaseem

I wonder if this is an issue of protractor. If it is really an issue I would think it's more a webdriver / chromedriver thing. But having said that, I'm working with the following configuration

Protractor: 5.1.2
Chrome: 59
Chromedriver: 2.30
Node: 7.5

I have created 2 testcases on 2 different sites. 1 site works and 1 doesn't In my opinion this is not an issue but more like a app thing that a Protractor / Chrome thing

describe('Drag and drop with chrome', () => {
    it('test-case 1: should drag and drop element', () => {
        browser.get('http://codef0rmer.github.io/angular-dragdrop/#!/');
        const drag = element(by.model('list1'));
        const drop = element(by.model('list2'));

        browser.actions().dragAndDrop(drag, drop).perform();

        // Added it to be verify it by eye
        browser.sleep(5000)
    });

    it('test-case 2: should not drag and drop', () => {
        browser.get('http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple');
        const drag = $$('.panel-body').get(0).all(by.repeater('item in list')).get(0);
        const drop = $$('.panel-body').get(1);

        browser.actions().dragAndDrop(drag, drop).perform();

        // Added it to be verify it by eye
        browser.sleep(5000)
    });
});

[dhawanaseem]

@wswebcreation Thank you for the feedback. I have also put this issue on SO:
https://stackoverflow.com/questions/44700710/draganddrop-not-working-on-chrome

It was suggested that this page contains and HTML5 Drag and Drop that is not supported by Selenium. Do you think you can shed more light based on the discussion there?

[wswebcreation]

I'll try to. Are you also convinced that that the problem is not with protractor? If so, can you please close the issue?

[dhawanaseem]

@wswebcreation I do not know where the problem lies and I am also not getting any definitive answer. If I close this issue here, the issue does not get resolved and I do not know where else to seek a solution to this.

[wswebcreation]

Based in your SO post, the comments and some searching on the internet it looks like your app is using a HTML5 drag and drop which is not supported by Selenium. The library I mentioned in my comment above has a closed ticket that refers to it. See here

I think you can close the issue now.

[dhawanaseem]

@wswebcreation I have seen the solution that you are referring to. Can you kindly point out to me why -> Code for “jquery_load_helper.js” and the code above this script is the same. I do not understand how is the implementation supposed to be done because it not clear what is supposed to be referenced.

Both the scripts: 1) jquery_load_helper.js is & 2) drag_and_drop_helper.js are being referenced in jquery_load_helper.js and the Code above (which should ideally be the implementation for dragNdrop). If you look closely, when both these files are referenced their path is different. Perhaps you can suggest what is the exact method. Thank you.

[wswebcreation]

Hi @dhawanaseem

I don't think that this is the right place for these kind of questions. Please close this one

[dhawanaseem]

I am still looking for help for Protractor with Typescript to implement this DragNDrop. The solution offered is for Python with Selenium Webdriver.

[wswebcreation]

And this is not the medium to look for that answer. The issuelist is only for issues related to Protractor.

From the the getting help section of the README:

Please ask usage and debugging questions on StackOverflow
(use the "protractor" tag) or in the Angular discussion group. (Please do not ask support questions here on Github.)

Thanks!

[dhawanaseem]

Thank you!

[filipefmelo]

I'm also having some trouble with this and StackOverflow has no answers.

browser.driver.actions() .dragAndDrop(secondMenuItem.getWebElement(), thirdMenuItem.getWebElement()) .perform();

The item I'm dragging is stuck to the mouse but never dropped.

[bogdanmartinescu]

After spending some time on this, it seems the only viable solution is using the html-dnd library

    const dnd = require('html-dnd').code;
    const dragAndDrop = (elem, target) => {
        let e1 = element(by.css(elem));
        let e2 = element(by.css(target));

        browser.executeScript(dnd, e1.getWebElement(), e2.getWebElement());
    }
    // usage
    dragAndDrop('.dragThis', '.dropHere');