HTML5 Drag and Drop using Selenium Webdriver for Ruby

Question

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
  end

  def teardown
    @driver.quit
  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

[This](http://sqa.stackexchange.com/a/1296) could perhaps be the answer. — Mark Thomas, Mar 21 '12 at 01:55
The method they are using there is apart of the Advanced User Interaction API. More specifically, [Selenium::WebDriver::ActionBuilder](http://selenium.googlecode.com/svn/trunk/docs/api/rb/Selenium/WebDriver/ActionBuilder.html#drag_and_drop-instance_method) This method does not work with HTML5 drag and drop. — Ryan Thomas Correia Ortega, Mar 21 '12 at 16:59
I had the same problem. After extensive research on SO and the net, I think this is a Selenium bug. I filed a bug report here: https://code.google.com/p/selenium/issues/detail?id=6315&thanks=6315&ts=1380031813 — Michael Herrmann, Sep 24 '13 at 14:20

Ryan Thomas Correia Ortega · Answer 1 · 2012-04-16T21:23:57.557

2

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

1) drag_and_drop_helper.js(https://gist.github.com/2362544) 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

edited Apr 16 '12 at 21:23

answered Apr 11 '12 at 21:01

Ryan Thomas Correia Ortega

93
1
6

Don't know about HTML5 drag & drop, but came across this javascript solution for drag & drop: http://ynot408.wordpress.com/2011/09/22/drag-and-drop-using-selenium-webdriver – David Jan 24 '13 at 22:35

score 2 · Accepted Answer · answered Feb 26 '14 at 17:03

This is still a bug in Selenium, so the JavaScript workaround noted above is a good one.

I built an example HTML drag and drop page and wrote a test to exercise it using the drag_and_drop_helper.js gist Ryan provided. You can see my full write-up here.

Cheers,
Dave H
@TourDeDave

score 0 · Answer 3 · answered May 08 '12 at 00:09

Here is how to get drag and drop (dnd) to work with Capybara/Selenium for cucumber tests. Basically calling dnd directly from Capybara using the drag_to method does not work. You have to drop out of Capybara into Selenium, and when using Selenium use click_and_hold method followed by drag_and_drop and then release for dnd to work. Here is the code:

#jump out of capybara for dnd

#selenium web driver accessed directly using page.driver.browser
source_selenium_ele = page.driver.browser.find_element(:xpath, "//draggable-element")
target_selenium_ele = page.driver.browser.find_element(:xpath, "//destination-element")

#drag and drop actions
page.driver.browser.action.click_and_hold(source_selenium_ele).perform
page.driver.browser.action.drag_and_drop(source_selenium_ele, target_selenium_ele).perform
page.driver.browser.action.release.perform

#jump back into capybara...

I could be wrong, but I think the calls to .click_and_hold and .release are implicitly done by the call to .drag_and_drop. So I think this code will click while holding and release after it has already released. — Daniel Yankowsky, Jul 30 '12 at 17:51
That won't actually work. The code snippet I posted uses an html5 example(http://html5demos.com/drag) which your code does not work with. In both cases Selenium is only being used. — Ryan Thomas Correia Ortega, Feb 21 '13 at 02:21

HTML5 Drag and Drop using Selenium Webdriver for Ruby

3 Answers3

Linked