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

Answer 1

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...

Answer 2

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

Answer 3

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