How to test drag & drop functionality in AngularJS e2e testing

javascript angularjs protractor angularjs-e2e
Zahid Afaque picture Zahid Afaque · Apr 10, 2014 · Viewed 7.3k times · Source

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?

Answer

Brady Isom picture Brady Isom · Aug 6, 2014

I had this same issue. The solution for me was to follow the advice in the Selenium issue here: https://code.google.com/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

Related questions

(Protractor) Checking whether an input is disabled on click?

I have two input fields, Username and Password and a spinner button. When i click on this spinner button these two input fields get disabled and I am redirected to another page. I am writing an end-to-end testing to check …

Read More
Protractor - Where to use browser.waitForAngular()

I have some tests written using protractor for angular.js app. I am using Page Objects design pattern and there i have some methods that navigate to other pages by clicking on links and buttons. and soon after that i …

Read More
Protractor, with isDisplayed() I get NoSuchElementError: No element found using locator

In protractor 2.0, I am checking in a expect() if one element is displayed. I expect a false, but the weird thing is that I get following error: NoSuchElementError: No element found using locator: By.id("userForm") My code is: describe(…

Read More