Geek Answers Handbook

Capybara 'drag & drop' not working

I am using cucumber / capybara / selenium / firefox on Mac. Everything works fine except d & d. Drag and drop is available through drag_node.drag_to(drop_node) . When called, it does not cause any errors, but the actual drag will never happen.

Instead of copying the pasted chunks, I found this example application (written by a guy who seemed to have similar problems), which demonstrates the problem.

Google, however, is unaware of the drag_to() violation. As far as I could see. This gives hope that I am missing something, not a mistake. So what is it? What am I missing? Mistake?

+7
source share
4 answers

For me, #drag_to really worked, however its powers seem limited.

To move the row of the UI sorting table down, I had to create a table with three rows, and then run this code (in the Cucumber step):

 element = find('tbody tr:nth-child(1)') target = find('tbody tr:nth-child(3)') element.drag_to target

This will replace the first with the second line. My interpretation is that Capybara does not stretch far enough, so I gave her a goal that exceeds my real goal.

Note. I configured the UI sort with tolerance: 'pointer '.

+5
source

I had the same problem and it was resolved by going directly to selenium-webdriver.

I am using selenium-webdriver 2.20.0 and Capybara 1.1.2

it works with this HTML

 <!DOCTYPE html> <html> <head> <title>Cabybara Drag And Drop</title> </style> <style type="text/css" media="screen"> #list_1 { background:#2C4999; } #list_2 { background:#99752A; } .list { padding:10px; width:200px; } .item { background:#FFF; margin:10px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> <script type="text/javascript"> $().ready(function(){ $( "#list_1" ).sortable({ connectWith:"#list_2" }); $( "#list_2" ).sortable({ connectWith:"#list_1" }); }); </script> </head> <body> <ol id='list_1' class='list'> <li id='item_1' class='item'>Item 1</li> <li id='item_2' class='item'>Item 2</li> <li id='item_3' class='item'>Item 3</li> <li id='item_4' class='item'>Item 4</li> <li id='item_5' class='item'>Item 5</li> </ol> <ol id='list_2' class='list'> <li id='item_6' class='item'>Item 6</li> <li id='item_7' class='item'>Item 7</li> <li id='item_8' class='item'>Item 8</li> <li id='item_9' class='item'>Item 9</li> <li id='item_10' class='item'>Item 10</li> </ol> </body> </html>

Now imagine the Ruby code. How to get to selenium-webdriver from capybara call page.driver.browser

 require 'test_helper' class DragDropTest < ActionDispatch::IntegrationTest setup do Capybara.current_driver = Capybara.javascript_driver # :selenium by default end def test_drag_item_1_to_list_2 visit '/drag_drop' element = page.find(:id, 'item_1') target = page.find(:id, 'list_2') selenium_webdriver = page.driver.browser selenium_webdriver.mouse.down(element.native) selenium_webdriver.mouse.move_to(target.native, 0, 10) selenium_webdriver.mouse.up sleep 2 end end
+4
source

This selenium-webdriver has problems with sortable lists. This post describes a workaround: http://www.dixis.com/?p=626

+1
source

#drag_to does not work in sortable lists, presumably since you are not dragging an element “into” as much as you are dragging a given distance and direction. Selenium #drag_by is what you are looking for, but is not currently supported by Capybara.

See also:

https://github.com/jnicklas/capybara/issues/222

https://github.com/jnicklas/capybara/issues/119

0
source

More articles:


All Articles