I'm tryting to write a cucumber/capybara test to reorder some items and then save them back. Any thoughts on how to best do this?
5 Answers
I have developed a JQuery plugin to solve this problem, check out jquery.simulate.drag-sortable.js which includes a plugin along with a suite of tests and examples.
Hope you find this useful! Feedback is welcome.
Matt
-
I've added an example cucumber step using this to the project's readme. May 19, 2012 at 19:44
the drag_to method did not work for me. But I was able to cause the first element in my list to be dragged to the last position by including the following in my capybara selenium test using jquery.simulate.js :
page.execute_script %Q{
$.getScript("/javascripts/jquery.simulate.js", function(){
distance_between_elements = $('.task:nth-child(2)').offset().top - $('.task:nth-child(1)').offset().top;
height_of_elements = $('.task:nth-child(1)').height();
dy = (distance_between_elements * ( $('.task').size() - 1 )) + height_of_elements/2;
first = $('.task:first');
first.simulate('drag', {dx:0, dy:dy});
});
}
-
Hi @Francois. I have tried your code, but the simulate.js library does not work with sortable lists. I have create an example where I have embedded the simulate plugin but modified it so that it slows down the steps. As you will see, the simulate plugin is dragging, but sortable is not responding correctly. Go to http://jsbin.com/efuyef/7/edit#javascript,live to see an example where draggable works and sortable fails. I too am trying to do something similar for Cucumber, so a solution to this would be great. How did you get yours to work? Aug 19, 2011 at 1:44
I'm using a web step like this and it works fine:
When /^I drag "([^"]*)" on top$/ do |name|
item = Item.find_by_name(name)
sleep 0.2
src = find("#item_id_#{item.id}")
dest = find("div.title")
src.drag_to(dest)
end
-
1i could not get this solution to work. Anyone else having success with this?– FrancoisApr 21, 2011 at 22:27
-
Using rspec + capybara (not cucumber) & I can't get this to work either. dragging the elements works (as in the method returns true) but the on-screen order isn't changed (per save_and_open_screenshot) or checking the text directly.– BM5kAug 20, 2014 at 16:53
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 Cucumber step:
# Super-primitive step
When /^I drag the first table row down$/ do
element = find('tbody tr:nth-child(1)')
# drag_to needs to drag the element beyond the actual target to really perform
# the reordering
target = find('tbody tr:nth-child(3)')
element.drag_to target
end
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
'.
I followed @codener's solution and it works! The only thing I changed in my code is configuring the UI-sortable with tolerance: 'pointer'
.
The limitation described in @codener's answer is not gone, too. (I'm using capybara 2.18.0.) It doesn't need the third row to swap the first with the second row.
When /^I drag the first table row down$/ do
element = find('tbody tr:nth-child(1)')
target = find('tbody tr:nth-child(2)')
element.drag_to target
end