如何在AngularJS e2e测试中测试拖放功能

Question

我正在尝试测试我的应用程序，需要将小部件从一个位置移动到另一个位置，换句话说，我需要在端到端测试中测试拖放功能。

我该如何测试这个功能？

- Zahid Afaque

---

请查看 https://github.com/angular/protractor/issues/123 和 https://github.com/angular/protractor/commit/fb46ec9bcd568510248831f11d43d0e2398cc606。 - Nicolae Olariu

@Nicolae Olariu，您提供的链接（https://github.com/angular/protractor/commit/fb46ec9bcd568510248831f11d43d0e2398cc606）对我有效。 - Zahid Afaque

Answer 1

我也遇到了这个问题。对我来说，解决方案是按照Selenium的这篇问题建议进行操作：https://code.google.com/p/selenium/issues/detail?id=3604#c20 从@nilsK的示例开始，这是我的解决方案：

var yourOffset = {x:5,y:5};
ptor().actions()
    .mouseMove(yourElement,yourOffset)
    .mouseDown()
    .mouseMove(yourElement,{x:0,y:0}) // Initial move to trigger drag start
    .mouseMove(youTarget[,targetOffset]) // [] optional
    .mouseUp()
    .perform();

我认为这也解决了这个问题

。

- Brady Isom

Answer 2

您需要链接多个鼠标操作：

var yourOffset = {x:5,y:5};
ptor().actions().
   mouseMove(yourElement,yourOffset).
   mouseDown().
   mouseMove(youTarget[,targetOffset]). // [] optional
   mouseUp().
   perform();

- nilsK

Answer 3

您可以使用ptor.actions().dragAndDrop(el1, el2).perform();

我在我的应用程序测试套件中有一个示例：

/**
 * Reorders questions by dragging and dropping.
 */
this.moveQuestion = function (questionToMove, positionToMoveTo) {
    return page.getQuestionField(positionToMoveTo).then(function (dest) {
        page.getDragHandle(questionToMove).then(function (dragHandle) {
            ptor.actions().dragAndDrop(dragHandle, dest).perform();
            ptor.sleep(800);    // wait for animation
        });
    });
};

- Lukas S.