javascript - How to test drag & drop functionality in AngularJS e2e testing - Stack Overflow

admin管理员组

文章数量:1278653

I am trying to test my application where I need to move a widget from one location to other, in other word I need to test drag & drop functionality in an end to end test.

How would I test this?

I am trying to test my application where I need to move a widget from one location to other, in other word I need to test drag & drop functionality in an end to end test.

How would I test this?

• javascript
• angularjs
• protractor
• angularjs-e2e

Share Improve this question Follow edited Apr 10, 2014 at 12:18 Zahid Afaque asked Apr 10, 2014 at 9:40 Zahid AfaqueZahid Afaque 24344 silver badges1313 bronze badges 2

• 2 Have a look at github./angular/protractor/issues/123 and github./angular/protractor/mit/… – Nicolae Olariu Commented Apr 10, 2014 at 9:44
• @Nicolae Olariu the link (github./angular/protractor/mit/…) you provided work for me – Zahid Afaque Commented Apr 11, 2014 at 11:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I had this same issue. The solution for me was to follow the advice in the Selenium issue here: https://code.google./p/selenium/issues/detail?id=3604#c20

Starting with the example from @nilsK, here was my solution:

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

I think this also solves this issue

you will need to chain your mouse actions:

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

You can use ptor.actions().dragAndDrop(el1, el2).perform();

I have an example here from the test suite in my own application:

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

本文标签： javascriptHow to test drag amp drop functionality in AngularJS e2e testingStack Overflow