Skip to content
This repository has been archived by the owner on Jul 29, 2024. It is now read-only.

Protractor failed to drag and drop elements #2293

Closed
wangfeiv opened this issue Jul 1, 2015 · 7 comments
Closed

Protractor failed to drag and drop elements #2293

wangfeiv opened this issue Jul 1, 2015 · 7 comments

Comments

@wangfeiv
Copy link

wangfeiv commented Jul 1, 2015

I tried to use protractor to simulate dragAndDrop, but it did not work, and there was no any error about it, below is my test code:

this.dragAndDropDashboardTab = function(source, target) {
// Way-1: it did not work
// browser.actions().dragAndDrop(source, target).perform();
// browser.actions()
// .mouseDown(source)
// .mouseMove(target)
// .mouseUp()
// .perform();
// Way-2: it did not work
// browser.actions().dragAndDrop(source, target).perform();
};

Who will tell me the work around? And would you like to help me fix this issue?

@juliemr
Copy link
Member

juliemr commented Jul 1, 2015

Duplicate of #1205 or maybe #583 if you are using Chrome.

@marcoliceti
Copy link

@juliemr just like @wangfeiv I tried both:

browser.actions().dragAndDrop(draggable_element, target_element).perform();

and:

browser.actions().
   mouseDown(draggable_element).
   mouseMove(target_element).
   mouseUp().
perform();

where draggable_element and target_element are properly retrieved, i.e. this expectations are satisfied:

expect(draggable_element.isPresent()).toEqual(true);
expect(target_element.isPresent()).toEqual(true);

draggable_element is a div with an AngularJS directive that adds draggable=true, while draggable_element is a div with an AngularJS directive that handles the drop event by adding a row with some text inside a table within the same div. Here is a screenshot:

schermata da 2015-08-11 14 17 51

The full code of my spec looks like this:

var draggable_element = element(...);
var target_element = element(...);
expect(draggable_element.isPresent()).toEqual(true);
expect(target_element.isPresent()).toEqual(true);
browser.actions().dragAndDrop(draggable_element, target_element).perform();
expect(element.all(by.css('tr')).count()).toEqual(1);

The last expectation fails: Expected 0 to equal 1.

I've read #1205, but it seems to me only a discussion about how to improve the syntax. Instead, I would like to know if and how I can test drag and drop.

Also, where should I search actions documentation? The Official API is really too short.

About #583, my test is failing both in Chrome and in Firefox. My OS is Ubuntu Gnome 14.04.

Note that I'm 100% sure that my directives work fine. I checked with a couple of demo apps and with several unit-tests.

@EvanBurbidge
Copy link

@marcoliceti did you ever figure this out currently reading through trying to figure out how to drag and drop an element and cannot get it to work for me! My code is pretty much the same but cannot find a way to get it working.

@marcoliceti
Copy link

@EvanBurbidge: nope :-/

In the end I removed Protractor tests from my project, since it's very hard to test non-trivial stuff like drag & drop and it's also hard to get help, since it's usually not clear if issues are related to Protractor itself or to Selenium.

@pidupuis
Copy link

That's a shame, this is an important feature...

@krasevych
Copy link

I have the same problem(

@binhvtle
Copy link

binhvtle commented Aug 1, 2018

I got the same issue. I saw the content of the page has been "selected when clicking the mouse down, hold and move". Is there any solution for this case.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

7 participants