testing drag and drop of jQuery UI sortable with cucumber and capybara

The Problem

For jottinx I wrote a small piece of code that allowed to sort items using drag and drop. Of course, after writing it and making sure it works (manually), I want to make sure it keeps working. So I add a test, using cucumber. My scenario actually looks pretty straightforward: [ruby] @javascript Scenario: Dragging a book Given I authenticate as a "default user" And I add a new book with title "a-new-book" And I add a new book with title "another-book" And I add a new book with title "one-last-book" And I drag book "one-last-book" to the top Then book "one-last-book" is at the top of the list [/ruby] The difficult bit was: how do I implement the dragging?. Actually it seemed straightforward, because capybara has a method called drag_to. So I implemented the step like this: [ruby] When /^I drag book "([^"]*)" to the top$/ do |book_title| drop_place = page.find(:css, 'ul.sortable-books li:first') page.find(:xpath, "//a[@href='##{book_title.parameterize}']").drag_to(drop_place) end [/ruby] But, unfortunately, this did not work. I googled around a bit and found the following two similar questions: The short conclusion: it does not work, and it is a combination of how jquery implemented the sortable element, and the fact that the selenium driver does not support it yet. So, refraining to using the selenium driver directly does not help either. After some more googling, I found a similar question on stackoverflow, and there I found the solution.

The solution

Enter jquery.simulate.drag-sortable.js. It is a script that will allow you to simulate dragging in a sortable object by issuing a simple javascript command: [javascript] // drag item down one position in the list $('#itemToDrag').simulateDragSortable({ move: 1 }); [/javascript] If move parameter is negative, it will move up. And down if positive. If you include the js inside your project, you can easily test that out inside your Chrome console. It just works. Awesome piece of work. To use that in a step-definition, just write: [ruby] When /^I drag book "([^"]*)" to the top$/ do |book_title| page.execute_script %Q{ $('.sortable-books li:last').simulateDragSortable({move: -4}); } end [/ruby] Hope this helps :)
Comments
J. Pablo Fernández 2012-04-03 11:24:10 UTC

Thank you! This post really helped me because you showed me all the ways that don't work (which I was sure to try) and then the one that does work.

Nishutosh Sharma 2015-10-01 05:56:26 UTC

its been 3 years, do we still have no improvements in capybara to work it out ?

Add comment

Recent comments

Tags