Unable to dragAndDrop using Protractor

Question

I am unable to perform drag and drop function in my application. But something I observed, dragAndDrop is not happening it seems. Can someone look into my function and help me if anything I missed.

Try-1

    this.dragAttributetoColumn =  function () {
        let dragElement = element(by.xpath("//span[@class='drag-icon']"));
        let dropElement = element(by.xpath("//div[@id='column']//mat-form-field"));
        browser.actions().
        mouseDown(dragElement).
        mouseMove(dropElement).
        mouseUp().
        perform();
    }

Try-2

    this.dragAttributetoColumn =  function () {
        let dragElement = element(by.xpath("//span[@class='drag-icon']"));
        let dropElement = element(by.xpath("//div[@id='column']//mat-form-field"));
        browser.actions().dragAndDrop(dragElement, dropElement).mouseUp().perform();
}

Try-3

    this.dragAttributetoColumn =  async function () {
        let dragElement = element(by.xpath("//span[@class='drag-icon']"));
        let dropElement = element(by.xpath("//div[@id='column']//mat-form-field"));
        await browser.actions().dragAndDrop(await dragElement.getWebElement(), await dropElement.getWebElement()).perform();
    }

Using Sergey's suggestion i have implemented my code but still I am not able to do the drag and drop.

    it('verify drag and drop', () => {
        let dragElement = element(by.css("span[class='drag-icon']"));
        let dropElement = element(by.css("div[id='column'] mat-form-field"));
        //my code

        //drag and drop attribute
        dragAndDrop(dragElement,dropElement);
    });
    

function dragAndDrop($element, $destination) {
    return browser
        .actions()
        .mouseMove($element)
        .perform()
        .then(() =>
            browser
                .actions()
                .mouseDown($element)
                .perform()
        )
        .then(() =>
            browser
                .actions()
                .mouseMove($destination)
                .perform()
        )
        .then(() =>
            browser
                .actions()
                .mouseUp()
                .perform()
        );
}

this has been answered many times https://stackoverflow.com/a/63994200/9150146 https://stackoverflow.com/a/64821521/9150146 — Sergey Pleshakov, May 12 '21 at 14:19
@SergeyPleshakov, I created same like your function initially but not worked before I post this question here. Anyway, I have tried same function which you mentioned even though not working. I am not able to see the movement of action. Is there away to check/implement see slow dragAndDrop/ — BugBee, May 15 '21 at 07:28
honestly there can be many things you do wrong. I'd start by making sure locators are correct, then how you call the function is also important — Sergey Pleshakov, May 17 '21 at 12:45
I don't see my function in your example. Add the code how you use my function and your observation what's happening — Sergey Pleshakov, May 17 '21 at 12:47
@SergeyPleshakov, I have added what I tried using your inputs in my Question. — BugBee, May 18 '21 at 05:16
First, your answer will not be working from time to time. Second, your answer relies on my answer — Sergey Pleshakov, May 18 '21 at 13:54

score 0 · Answer 1 · answered May 18 '21 at 13:07

this makes more sense. The function returns a Promise which you don't resolve

try this

    it('verify drag and drop', async () => {
        let dragElement = element(by.css("span[class='drag-icon']"));
        let dropElement = element(by.css("div[id='column'] mat-form-field"));
        //my code

        //drag and drop attribute
        await dragAndDrop(dragElement,dropElement);
    });

BugBee · Accepted Answer · 2021-05-18T13:58:52.957

Finally, I got the Solution. Application is using Angular and Material for drag and drop.

it('verify drag and drop', async () => {
        let dragElement = element(by.css("#listElement"));
        let dropElement = element(by.css(".cdk-drop-list"));
        //my code

        //drag and drop attribute
        await dragAndDrop(dragElement,dropElement);
    });
function dragAndDrop($element, $destination) {
    return browser
        .actions()
        .mouseMove($element)
        .perform()
        .then(() =>
            browser
                .actions()
                .mouseDown($element)
                .perform()
        )
        .then(() =>
            browser
                .actions()
                .mouseMove($destination)
                .perform()
        )
        .then(() =>
            browser
                .actions()
                .mouseUp($destination)
                .perform()
        );
}

Unable to dragAndDrop using Protractor

2 Answers2