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:

 @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

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:

 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

But, unfortunately, this did not work. I googled around a bit and found the following two similar questions:

• drag_to with jquery sortable list
• drag_to don't work on sortable elements

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:

 // drag item down one position in the list
 $('#itemToDrag').simulateDragSortable({ move: 1 });

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:

 When /^I drag book "([^"]\*)" to the top$/ do |book_title|
    page.execute_script %Q{ 
      $('.sortable-books li:last').simulateDragSortable({move: -4}); 
    }
 end

Hope this helps :)

I am developing Ruby on Rails on Windows platforms mostly. But using Rspec and cucumber on windows has a very strange side-effect: all a's are missing as can be seen from the following screenshot: Luckily, after some very extensive googling, i found a single blogpost with a fix! Apparently it has something to do with UTF-8 encoding, and the simple solution is that you need to change the encoding of the current command prompt. This can be achieved via a simple call before you start: [sourcecode] chcp 1252 [/sourcecode] The aforementioned post then proposes to adjust the cucumber.bat to not have to type this every time. This is all good for cucumber, but not for rspec, and anyhow, every new update of the cucumber i would need to apply this fix again. I was thinking that it might be possible to set the default codepage, which is 850 on my machine, to 1252 permanently. As this blogpost mentions, there are two different ways to achieve the wanted result.

Change the codepage system-wide

This can be done in the registry. [sourcecode] [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Nls\CodePage] OEMCP=1252 [/sourcecode] But one commenter notes this is not without risk.

Only for command prompt

An alternative way is to put make sure that each time a console is opened (cmd.exe) the codepage is set automatically. [sourcecode] [HKEY_LOCAL_MACHINE\Software\Microsoft\Command Processor] Autorun=chcp 1252 [/sourcecode] This will only work for console windows in which you run cmd.exe, which is just what i needed.