12

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 5

12

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

1
  • I've added an example cucumber step using this to the project's readme. May 19, 2012 at 19:44
2

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});
  });
}                 
1
  • 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
1

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
2
  • 1
    i could not get this solution to work. Anyone else having success with this?
    – Francois
    Apr 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.
    – BM5k
    Aug 20, 2014 at 16:53
0

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

0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.