Menu
I am using cucumber/capybara/selenium/firefox on Mac. All working great except for d&d. Drag and drop is available via drag_node.drag_to(drop_node). When called, it does not raise any errors but the actual drag and drop just never happens.
Now rather than copy pasting bits and pieces, I've found this sample app (written by a guy who apparently had similar problems) that demonstrates the issue.
Google however isn't aware of drag_to() being broken. As far as I could see. That gives a hope that it is me missing something rather than a bug. So what is it? What am I missing? A bug?
719
For me, #drag_to did work, however, its powers seem to be limited.
In order to move a UI-sortable table row down, I had to create a table with three rows, then run this code (in a Cucumber step):
element = find('tbody tr:nth-child(1)')
target = find('tbody tr:nth-child(3)')
element.drag_to target
This would swap the first with the second row. My interpretation is that Capybara does not drag far enough, so I gave it a target beyond my actual target.
Note: I have configured UI-sortable with tolerance: 'pointer'.
137
I have had the same proble and solved it by going directly to the selenium-webdriver.
I an using selenium-webdriver 2.20.0 and Capybara 1.1.2
this 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 fore the Ruby code. Getting at the 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
It is selenium-webdriver having problem with sortable lists. This post covers the workaround: http://www.dixis.com/?p=626
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
