无法使用量角器拖放

Question

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

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

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

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

Answer 1

这更有意义。函数 returns 一个你没有解决的 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);
    });

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

无法使用量角器拖放

Unable to dragAndDrop using Protractor

javascript

angularjs

drag-and-drop

protractor