How to write a cucumber step to test if a list of elements is sorted?

I need to write a cucumber scenario to test that a list of projects are sorted (by name). I have something like:

Scenario: Sort projects by name
   Given there is a project called "Project B"
   And there is a project called "Project A"
   And there is a project called "Project C"
   Given I am on the projects page
   When I follow "Sort by name"
   Then I should see in this order ["Project A", "Project B", "Project C"]

I have added a step, that looks like:

Given /^I should see in this order (\[.*\])$/ do |array|

end

What's the best way to test if the projects that are listed on the page appear with the right order? I tried to get all the project names through jQuery:

$(function() {
    var arrjs = new Array();
    $("div.project-main-info").find("a:first").each(function(){
        arrjs.push($(开发者_运维百科this).text());
    })
  });

and put them inside an array to do a comparison with the array passed as a parameter to this step, but I don't know how to integrate that jQuery code inside this step!

Thanks!

EDIT

As suggested by McStretch, I tried to get the anchors using XPath by doing:

all('a').each do |a|
    if(/\/projects\/\d*/).match("#{a[:href]}")
        arr_page << "...." # Need to retrieve the value out of <a href="..">VALUE</a> but don't know how..any idea?
    end
  end

Is this the right way to proceed? I just tested, and unfortunately arr_page doesn't get filled with anything (I replaced the "..." part with a[:href] just to test)! Actually I tried to check the value of a[:href] (by raising it) and it's blank! How would I better check my anchors (given there href all match the regex mentionned above)?

Firstly, it would be better to write your final step as:

Then I should see the projects in this order:
  | Project A |
  | Project B |
  | Project C |

Now you can easily access the list as an array, e.g.

expected_order = table.raw

You then need to collect together the projects in the page into an array, as @McStretch suggests:

actual_order = page.all('a.project').collect(&:text)

(This assumes that each of your project links has a "project" CSS class to make testing easier).

You can then use RSpec to compare the two arrays.

expected_order.should == actual_order

This will show a failure if the order is incorrect.

Capybara offers two ways to execute JavaScript:

In drivers which support it, you can easily execute JavaScript:

page.execute_script("$('body').empty()")

For simple expressions, you can return the result of the script. Note that this may break with more complicated expressions:

result = page.evaluate_script('4 + 4');

So you could attempt to store your JS expression as a string, and use the evaluate_script method to get the returned array of elements arrjs.

Reference: https://github.com/jnicklas/capybara

You could also try to use Capybara's Node::Finders all method, which will return a list of elements that match a given XPath:

all('a').each { |a| do_something_with_a }

Reference: http://rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Finders#all-instance_method

Great solutions, i am just sharing a slightly more complete example:

Then /^I should see the "([^"]*)" in this order:$/ do |selector, table|
  expected_order = table.raw
  actual_order = page.all(selector).collect(&:text)
  actual_order.should == expected_order.flatten
end

called with:

Then I should see the ".node .name" in this order:
| East Co     |
| HQ          |
| London      |