HTML5 Drag and Drop with Selenium Webdriver

[lukeis]

Originally reported on Google Code with ID 3604

Are there any work arounds to getting HTML5 Drag and Drop working with Selenium Webdriver
with Ruby? I am using Selenium-Webdriver 2.20.0 with Ruby 1.9.2

Here is a simple test to reproduce the issue:

require "selenium-webdriver"
require "test/unit"

class Html5DragAndDropTest < Test::Unit::TestCase

  def setup
    @driver = Selenium::WebDriver.for :firefox
    @driver.manage.timeouts.implicit_wait = 30
    @verification_errors = []
  end

  def teardown
    @driver.quit
    assert_equal [], @verification_errors
  end

  def test_html5_drag_and_drop
    @driver.get("http://html5demos.com/drag")
    target = @driver.find_element(:id, "one")
    source = @driver.find_element(:id, "bin")
    @driver.action.drag_and_drop(target, source).perform
    assert target.displayed? == false
  end
end

Reported by rcorreia@blurb.com on 2012-03-21 19:59:17

[lukeis]

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

[lukeis]

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

[lukeis]

#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

[lukeis]

#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

[lukeis]

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

[lukeis]

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

[lukeis]

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

[lukeis]

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

[lukeis]

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

[lukeis]

Issue 7976 has been merged into this issue.

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

[lukeis]

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

[lukeis]

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

[lukeis]

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

[lukeis]

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

[lukeis]

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

[lukeis]

Issue 5807 has been merged into this issue.

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

[lukeis]

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

[lukeis]

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

[lukeis]

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

• Labels added: Restrict-AddIssueComment-Commit