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

The method they are using there is apart of the Advanced User Interaction API. More specifically, Selenium::WebDriver::ActionBuilder This method does not work with HTML5 drag and drop. — Ryan Thomas Correia Ortega
– Ryan Thomas Correia Ortega, Commented Mar 21, 2012 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: code.google.com/p/selenium/issues/… — Michael Herrmann
– Michael Herrmann, Commented Sep 24, 2013 at 14:20

Dave Haeffner · Accepted Answer · 2014-02-26 17:03:59Z

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

answered Feb 26, 2014 at 17:03

Dave Haeffner

3242 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan Thomas Correia Ortega · Accepted Answer · 2012-04-16 21:23:57Z

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, 2012 at 21:23

answered Apr 11, 2012 at 21:01

Ryan Thomas Correia Ortega

931 silver badge6 bronze badges

1 Comment

David Over a year ago

Don't know about HTML5 drag & drop, but came across this javascript solution for drag & drop: ynot408.wordpress.com/2011/09/22/…

McShashi · Accepted Answer · 2012-05-08 00:09:22Z

0

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

answered May 8, 2012 at 0:09

McShashi

1391 silver badge5 bronze badges

2 Comments

Daniel Yankowsky Over a year ago

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.

Ryan Thomas Correia Ortega Over a year ago

That won't actually work. The code snippet I posted uses an html5 example(html5demos.com/drag) which your code does not work with. In both cases Selenium is only being used.

Collectives™ on Stack Overflow

HTML5 Drag and Drop using Selenium Webdriver for Ruby

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related