HTML5 Drag and Drop using Selenium Webdriver for Ruby
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 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
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
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...