无法使用量角器进行拖放答案

【问题标题】：Unable to dragAndDrop using Protractor无法使用量角器进行拖放
【发布时间】：2021-05-12 11:10:10
【问题描述】：

我无法在我的应用程序中执行拖放功能。但我观察到，dragAndDrop 似乎没有发生。如果我遗漏了什么，有人可以查看我的功能并帮助我。

试一试

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

使用 Sergey 的建议，我已经实现了我的代码，但我仍然无法进行拖放操作。

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

【问题讨论】：

这个已经回答了很多次了stackoverflow.com/a/63994200/9150146 stackoverflow.com/a/64821521/9150146
@SergeyPleshakov，我最初创建的函数和你的函数一样，但在我在这里发布这个问题之前没有工作。无论如何，我已经尝试过你提到的相同功能，即使没有工作。我看不到动作的动作。有没有检查/实施看到慢的dragAndDrop/
老实说，您可能做错了很多事情。我首先要确保定位器是正确的，然后你如何调用函数也很重要
我在您的示例中看不到我的功能。添加代码你如何使用我的功能和你观察发生了什么
@SergeyPleshakov，我已经在我的问题中添加了我尝试使用您的输入的内容。

标签： javascript angularjs drag-and-drop protractor

【解决方案1】：

这更有意义。该函数返回一个你没有解决的 Promise

试试这个

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

【讨论】：

【解决方案2】：

终于，我得到了解决方案。应用程序正在使用 Angular 和 Material 进行拖放。

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

【讨论】：