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]

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

• Labels added: Component-WebDriver

[lukeis]

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)_

[lukeis]

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

[lukeis]

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

[lukeis]

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

[lukeis]

(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

[lukeis]

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)_

[lukeis]

Issue 4455 has been merged into this issue.

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