HTML5 drag and drop with Selenium Webdriver for Ruby

Question

Are there any problems getting HTML5 Drag and Drop to work 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 problem:

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 

Answer 1

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

I built an example of dragging an HTML page and wrote a test to use it using drag_and_drop_helper.js gist Ryan provided . You can see my full entry here .

Cheers
Dave h
@TourDeDave

Answer 2

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

1) drag_and_drop_helper.js (https://gist.github.com/2362544) to the test / helpers directory

2) Create a new method in 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 

Answer 3

Here's 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 must abandon Capybara in Selenium, and when using Selenium, use the click_and_hold method followed by drag_and_drop, and then release 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...