html5 drag and drop,HTML5 Drag and Drop with Selenium Webdriver

Copy link

Member

Author

Reported by barancev on 2012-03-27 06:12:04

Labels added: Component-WebDriver

Copy link

Member

Author

Here is a temporary workaround that could help the community with testing in the meantime...

1) drag_and_drop_helper.js to your test/helpers directory

2) Create a new method in your test_helper.rb

def drag_and_drop(source,target)

js_filepath=File.dirname(__FILE__)+"/drag_and_drop_helper.js"

js_file= File.new(js_filepath,"r")

java_script=""

while (line=js_file.gets)

java_script+=line

end

js_file.close

@driver.execute_script(java_script+"$('#{source}').simulateDragDrop({ dropTarget:

'#{target}'});")

rescue Exception => e

puts "ERROR :" + e.to_s

end

Reported by rcorreia@blurb.com on 2012-04-16 21:21:42

- _Attachment: [drag_and_drop_helper.js](https://storage.googleapis.com/google-code-attachments/selenium/issue-3604/comment-4/drag_and_drop_helper.js)_

Copy link

Member

Author

Where actually this test/helpers directory located?. While running the script, I am

getting error (ERROR) jQuery is not defined

Reported by checkitoutkarthik on 2012-05-03 03:43:48

Copy link

Member

Author

this requires the implementation in the atoms of the events:

dragstart, dragover, dragenter, dragleave, drop

with native events this *could* work as is... although my attempt failed miserably.

Reported by luke.semerau on 2012-06-02 04:45:56

Status changed: Accepted

Labels added: Type-Enhancement, Browser-Atoms

Labels removed: Type-Defect

Copy link

Member

Author

I'm seeing a similar issue with drag and drop using html 5 events. Can a developer confirm

that selenium drag and drop does not support html 5 drag and drop events?

Reference: http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html

Reported by catphive@catphive.net on 2012-09-12 02:14:51

Copy link

Member

Author

(i am a selenium developer) and yes, I'll confirm that html5 drag/drop is not currently

supported/implemented.

Reported by luke.semerau on 2012-09-12 04:46:15

Copy link

Member

Author

The workaround we put together is working for us. It's been a life saver for testing

our Ember.js app.

attached is the latest version of what we are using...

this is what we have in our test_helper:

def drag_and_drop(source,target)

js_filepath=File.dirname(__FILE__)+"/drag_and_drop_helper.js"

js_file= File.new(js_filepath,"r")

java_script=""

while (line=js_file.gets)

java_script+=line

end

js_file.close

@driver.execute_script(java_script+"$('#{source}').simulateDragDrop({ dropTarget:

'#{target}'});")

rescue Exception => e

puts "ERROR :" + e.to_s

end

Reported by rcorreia@blurb.com on 2012-09-12 15:35:59

- _Attachment: [drag_and_drop_helper.js](https://storage.googleapis.com/google-code-attachments/selenium/issue-3604/comment-9/drag_and_drop_helper.js)_

Copy link

Member

Author

Issue 4455 has been merged into this issue.

Reported by a.u.savchuk on 2013-07-19 23:55:10

Copy link

Member

Author

Issue 5953 has been merged into this issue.

Reported by a.u.savchuk on 2013-07-19 23:56:18

Copy link

Member

Author

When will it be available in `selenium-webdriver` core?

Reported by tuka.08 on 2013-07-20 06:09:41

Copy link

Member

Author

Is there any planning date for this feature?

HTML 5 drag&drop is still not working and it will be very useful tho have it.

Reported by m.machniak on 2013-08-06 12:01:05

Copy link

Member

Author

Issue 5707 has been merged into this issue.

Reported by a.u.savchuk on 2013-08-13 19:03:43

Copy link

Member

Author

Issue 6222 has been merged into this issue.

Reported by a.u.savchuk on 2013-09-07 17:25:55

Copy link

Member

Author

Issue 6315 has been merged into this issue.

Reported by barancev on 2013-09-25 11:57:42

Copy link

Member

Author

I agree with m.machn... I would also be interested in whether there are any plans to

fix this bug?

Reported by mherrmann.at on 2013-09-25 12:12:38

Copy link

Member

Author

There is a workaround - the mouse just needs to move twice - for example once you click

and hold, move to any position on screen, then move to final destination, then release

and it works.

Reported by byatt.chris on 2013-09-25 12:26:48

Copy link

Member

Author

Thanks for your reply Byatt. I can't seem to get this workaround to work (Selenium 2.35.0,

FF 23.0.1, 64 bit Win 7). Here's what I tried:

element_location = element.location

to_location = to.location

dx = to_location['x'] - element_location['x']

dy = to_location['y'] - element_location['y']

ActionChains(driver).click_and_hold(element).perform()

ActionChains(driver).move_by_offset(dx / 2, dy / 2).perform()

ActionChains(driver).move_to_element(to).perform()

ActionChains(driver).release(to).perform()

Do you happen to have a working example?

Many thanks,

Michael

Reported by mherrmann.at on 2013-09-25 13:56:33

Copy link

Member

Author

I used a mixture of selenium and java robot. My code also allows for an x offset if

you want to drag it apst something. Should be easily modifiable.

public void dragAndDropElement(WebElement dragFrom, WebElement dragTo, int xOffset)

throws Exception {

//Setup robot

Robot robot = new Robot();

robot.setAutoDelay(50);

//Fullscreen page so selenium coordinates work

robot.keyPress(KeyEvent.VK_F11);

Thread.sleep(2000);

//Get size of elements

Dimension fromSize = dragFrom.getSize();

Dimension toSize = dragTo.getSize();

//Get centre distance

int xCentreFrom = fromSize.width / 2;

int yCentreFrom = fromSize.height / 2;

int xCentreTo = toSize.width / 2;

int yCentreTo = toSize.height / 2;

//Get x and y of WebElement to drag to

Point toLocation = dragTo.getLocation();

Point fromLocation = dragFrom.getLocation();

//Make Mouse coordinate centre of element

toLocation.x += xOffset + xCentreTo;

toLocation.y += yCentreTo;

fromLocation.x += xCentreFrom;

fromLocation.y += yCentreFrom;

//Move mouse to drag from location

robot.mouseMove(fromLocation.x, fromLocation.y);

//Click and drag

robot.mousePress(InputEvent.BUTTON1_MASK);

//Drag events require more than one movement to register

//Just appearing at destination doesn't work so move halfway first

robot.mouseMove(((toLocation.x - fromLocation.x) / 2) + fromLocation.x, ((toLocation.y

- fromLocation.y) / 2) + fromLocation.y);

//Move to final position

robot.mouseMove(toLocation.x, toLocation.y);

//Drop

robot.mouseRelease(InputEvent.BUTTON1_MASK);

}

Reported by byatt.chris on 2013-09-25 13:59:46

Copy link

Member

Author

Reported by barancev on 2013-11-02 17:39:46

Copy link

Member

Author

hi all,

or the proposed solution based on the drag_and_drop_helper.js script, is it possible

to use something similar to this to simulate dragging a set of files from outside of

the browser into an element?

Thx!

L.

Reported by leonardo.ramirez on 2014-01-06 17:32:49

Copy link

Member

Author

Hi,

after a lot of hard work, I eventually figured this out. It's implemented in a tool

of mine that makes tasks like this one-liners: http://heliumhq.com/docs/api_documentation#helium.api.drag_file.

No java.awt.robot is required, just any WebDriver object.

The idea for the implementation is the following: You need to simulate the following

JavaScript events:

i. A `dragenter` event on the JavaScript document object.

ii. A `dragover` event on the JavaScript document object.

iii. A `drop` event on the target element

All of these events include as a parameter a JavaScript `File` object that contains

information about the file being attached. The problem is that because of security

reasons, the browser does not allow creating such objects via JavaScript.

To work around the security constraints, we perform a little trick: We use JavaScript

to create an element on the page. Then, we use Selenium's `send_keys`

command to send the path of the file to be dragged to this element. This automatically

sets a JavaScript property on the file input element that contains a `File` object

representing our file. Since we can read this property via JavaScript, we have succeeded

in obtaining the `File` object that is required to properly simulate the three events

above.

Hope this helps anyone wanting to implement this for himself.

Cheers,

Michael

heliumhq.com

Reported by michael.herrmann@open-closure.com on 2014-01-07 07:55:25

Copy link

Member

Author

We had trouble with the original drag_and_drop_helper.js posted as a workaround for

this issue. The workaround is 99% correct, but I needed to modify the workaround to

include the dropTarget in the options propagated via the 'coord' object in simulateDrag.

i.e. I need to change:

coord = { clientX: x, clientY: y }

to:

coord = { clientX: x, clientY: y , dropTarget: options.dropTarget || undefined }

Also, a note for those following the example usage, if the app under test does not

already alias the jQuery function to $, you will need to spell-out jQuery:

i.e., after injecting the drag and drop helper onto the page, we have a method that

accepts jQuery selectors to use the simulated drag and drop functions (Java):

/**

* Drag and drop via the JQuery-based drag and drop helper -- the helper

* must have been injected onto the page prior to calling this method.

*

* @param dragSourceJQuerySelector a JQuery-style selector that identifies the

source element to drag;

* will be passed directly to jQuery(), perform all quoting yourself

* @param dropTargetJQuerySelector a JQuery-style selector that identifies the

target element to drop the source onto;

* will be passed directly to jQuery(), perform all quoting yourself

*/

protected void dragAndDropViaJQueryHelper(String dragSourceJQuerySelector, String

dropTargetJQuerySelector) {

String javascript =

"var dropTarget = jQuery(" + dropTargetJQuerySelector + ");" +

"\n" +

"jQuery("+ dragSourceJQuerySelector + ").simulate('drag', { dropTarget:

dropTarget });";

getLogger().info("executing javascript:\n" + javascript);

this.executeScript(javascript);

getLogger().info("executed drag-n-drop action via javascript");

}

rcorr...@blurb.com thanks for sharing your workaround!

Reported by skuenzli on 2014-02-04 17:58:38

- _Attachment: [drag_and_drop_helper.propagate-dropTarget.js](https://storage.googleapis.com/google-code-attachments/selenium/issue-3604/comment-25/drag_and_drop_helper.propagate-dropTarget.js)_

Copy link

Member

Author

Thanks for the drag_and_drop_helper.js! It worked perfectly for my needs. You can see

a full write-up along with my example code here: http://elementalselenium.com/tips/39-drag-and-drop

Cheers,

Dave H

@TourDeDave

Reported by dave@arrgyle.com on 2014-02-26 17:09:49

25 hidden items

Load more…

Copy link

Member

Author

Thanks for the contribution! I will review and update the existing gist.

Reported by rcorreia@blurb.com on 2014-07-24 16:57:30

Copy link

Member

Author

Hi all,

Please note if your website has JQuery enabled then comment out the following line:

Object o1 = js.executeScript(load_jquery);

from drag_and_drop_js function. this call is only necessary if your webpage does not

have JQuery loaded.

Running the above code if your site already uses JQuery risks changing the functionality

of the page for instance right click menu options.

Reported by arad@qaworks.com on 2014-07-25 09:20:36

Copy link

Member

Author

I've created a more versatile HTML5 Drag and Drop simulator. It uses native JavaScript

and not jQuery. It allows for Cross-Window drag and drop (example provided in file)

and dragging to a specific position. The attached file is written for Java WebDiver,

but could easily be converted, and has been tested on Firefox 24 and Firefox 17 on

RHEL 6.4, Windows 7, and Mac.

Reported by salomj9 on 2014-07-30 16:46:44

- _Attachment: [HTML5DragAndDropSimulator.txt](https://storage.googleapis.com/google-code-attachments/selenium/issue-3604/comment-58/HTML5DragAndDropSimulator.txt)_

Copy link

Member

Author

salo... had a little trouble with HTML5DragAndDropSimulator.txt with the chrome driver

until swapping

var event = document.createEvent("DragEvent");

for

var event = document.createEvent('HTMLEvents');

event.initEvent('DragEvent', true, true);

Reported by dan.roon on 2014-08-11 11:54:02

Copy link

Member

Author

#52 , is not working if source and target are xpath. Is this a limitation of the script

?

I read in another mail thread that webelements must be in CSS , is it true ?

I've got dynamic webelements and I use dynamic xpath for those. I'm not sure how to

use dynamic CSS

This is just to update @ a...@qaworks.com and others.

Reported by vikram.silk on 2014-08-22 16:24:57

Copy link

Member

Author

#60, can you provide examples of what you mean by dynamic XPath? If it can be translated

to CSS, then it should be ok.

Reported by mangaroo on 2014-08-22 20:05:41

Copy link

Member

Author

manga...@gmail.com

Please find more info as below

//div[@class='tasks-scroll']//ol[1]/li["+OriginalPositionToBeMoved+"]/div/div/span

//div[@class='tasks-scroll']//ol[1]/li["+DestinationPositionToBeMoved+"]/div/div/span

I get value of variables on run time.

Thanks & Regards,

Vikram

Reported by vikram.silk on 2014-08-25 08:28:17

Copy link

Member

Author

Vikram, I believe that roughly translates to this CSS

"div[class='tasks-scroll'] ol:nth-child(1) > li:nth-child("+OriginalPositionToBeMoved+")

> div > div > span"

and if nth-child() doesn't seem to work, you can give nth-of-type() instead, but generally

nth-child() is used.

Reported by mangaroo on 2014-08-25 17:31:14

Copy link

Member

Author

Hi manga...@gmail.com,

sorry I forgot to update yesterday

I figured out CSS locators and did as below

source = getDriver().findElement(By.cssSelector("div.tasks-scroll ol:nth-child(1) >

li:nth-child("+OriginalItemPositionToBeMoved+") div > div > span"));

target = getDriver().findElement(By.cssSelector("div.tasks-scroll ol:nth-child(1) >

li:nth-child(5) div > div > span"));

But this is only clicking first element , after that no action / exception taking place.

I'm not able to figure out what else am I doing wrong here ?

Thanks,

Vikram

Reported by vikram.silk on 2014-08-26 10:40:57

Copy link

Member

Author

Still I'm not able to get this working. It just clicks first element but doesn't initiate

drag action.

what step can be going wrong here ?

Thanks,

Vikram

Reported by vikram.silk on 2014-09-03 16:04:28

Copy link

Member

Author

Hive Mind,

Is it fixed now?

I am still not able to drop the Element..

When is the plan to fix this?

Reported by varunas@thoughtworks.com on 2014-09-23 05:45:08

Copy link

Member

Author

Issue 7976 has been merged into this issue.

Reported by barancev on 2014-09-30 21:13:03

Copy link

Member

Author

I am also facing this issue can we have any fix for this in next release.

Thanks

Jag

Reported by jagmoahn.jackisback on 2014-11-21 13:39:15

Copy link

Member

Author

Hi,

I would like to know if the issue is already addressed.

I tried to do the work around using javascript and actions but none works.

Thanks,

Shin

Reported by cmentrada on 2014-11-26 03:04:24

Copy link

Member

Author

Reported by jmleyba on 2014-11-27 16:28:07

Copy link

Member

Author

The solution I added here is still working for us using 2.41.0 currently and I'm pretty

sure we wrote it using 2.18.0 but I still spent some time looking at 2.44.0 and everything

seems to be working.

I spent some time looking at a few blogs that have shared the solution and everyone

seems to be able to get it working ok.

The gist has gotten some comments as early as 20 days ago with happy implementations:

https://gist.github.com/rcorreia/2362544

And apparently it is compatible with Zepto which is pretty cool to hear :-)

Don't give up!

Reported by rcorreia@blurb.com on 2014-12-10 19:27:48

Copy link

Member

Author

Hi,

Is the drag drop for native events issue fixed in web driver 2.44.0

Reported by pratibha.maram22 on 2015-02-05 02:12:40

Copy link

Member

Author

Issue 5807 has been merged into this issue.

Reported by barancev on 2015-03-16 05:47:41

Copy link

Member

Author

I tried the java helper method in post#25 and used the attached js file

but I am getting

wgen-selenium dlee$ org.openqa.selenium.WebDriverException: missing ) after argument

list

my dragSourceJQuerySelector = #group_1

my dropTargetJQuerySelector = #group_0 div:contains('BC')

Am I doing anything wrong..?

Reported by dlee@amplify.com on 2015-03-27 17:43:43

Copy link

Member

Author

Cross-referencing the StackOverflow post with a working workaround solution (Python):

http://stackoverflow.com/questions/29381233/how-to-simulate-html5-drag-and-drop-in-selenium-webdriver-in-python/29381532#29381532

Reported by AfanasieffAV on 2015-04-01 02:23:15

Copy link

Member

Author

Reported by luke.semerau on 2015-09-17 17:44:48

Labels added: Restrict-AddIssueComment-Commit