Is it possible to test the order of elements via RSpec/Capybara?

Question

I'm using RSpec/Capybara as my test suite. I have some javascript that dynamically appends <li> to the end of a <ul>. I want to write a request spec to ensure that this is happening.

I tried using the has_css Capybara method and advanced CSS selectors to test for the ordering of the <li> elements, but Capybara doesn't support the + CSS selector.

Example:

page.should have_css('li:contains("ITEM #1")')
pseuo_add_new_li
page.should have_css('li:contains("ITEM #1")+li:contains("ITEM #2")')

Does anyone know of another way to test for ordering?

score 38 · Accepted Answer · answered Dec 10 '11 at 04:17

38

I resolved this issue by testing for a regex match against the body content of the page. A bit kludgy, but it works.

page.body.should =~ /ITEM1.*ITEM2.*ITEM3/

answered Dec 10 '11 at 04:17

John

9,254
12
54
75

And with plain **Minitest**: `assert page.body =~ /ITEM1.*ITEM2.*ITEM3/` – user664833 Aug 12 '15 at 21:24
You could also check for the end of a tag: ```expect(page) =~ >ITEM1<.*>ITEM2<.*>ITEM3<``` – dani24 Jul 26 '18 at 13:16
3

Thank you, very elegant solution. I ended up using ```expect(response.body).to match(/ITEM1.*ITEM2.*ITEM3/m)``` with RSpec 4 and multi-line match – Ben Jul 06 '20 at 05:37
Can someone explain what `ITEM` represents in these examples? Are those class names? – Duderino9000 Dec 02 '21 at 23:09
@Barryman9000 It was the actual text in each of the `
`

John

Jan 12 '22 at 17:50

score 29 · Answer 2 · answered Nov 08 '12 at 16:00

29

I found a more canonical way of testing this behaviour with CSS. You could user :first-child, :last-child and :nth-child(n) selectors in whichever assert you like.

In your example I'd try these assertions:

page.should have_tag("ul:last-child", :text => "ITEM #1")
pseuo_add_new_li
page.should have_tag("ul:nth-last-child(2)", :text => "ITEM #1")
page.should have_tag("ul:last-child", :text => "ITEM #2")

I hope this helps someone. Read more about this.

answered Nov 08 '12 at 16:00

dgilperez

10,716
8
68
96

2

``nth-last-child`` selects the nth child from the bottom. http://www.quirksmode.org/css/nthlastchild.html – dgilperez Dec 11 '12 at 19:58

score 28 · Answer 3 · answered Feb 08 '13 at 09:56

28

this article lists several ways to test sort order in RSpec, the best of which seems to be this matcher:

RSpec::Matchers.define :appear_before do |later_content|
  match do |earlier_content|
    page.body.index(earlier_content) < page.body.index(later_content)
  end
end

answered Feb 08 '13 at 09:56

Finn MacCool

808
1
7
12

Using Webrat I get "undefined local variable or method `page'" – JoaoHornburg Apr 18 '13 at 16:59
@JoaoHornburg sorry, i can't help there. i've only used capybara so far. – Finn MacCool Apr 19 '13 at 08:22
I've made it work with webrat. Already forked the project on github, will release my code when I have some time to change the docs and publish the gem – JoaoHornburg Apr 19 '13 at 12:41
I'm using this, and it works. I want to check order of items within a particular div, what should do? – lightsaber Jul 09 '17 at 19:24
The article is really good for further information. – alexventuraio Jan 31 '21 at 19:54

score 5 · Answer 4 · answered Jul 31 '14 at 19:38

5

I have had the same issue recently and found this neat & ideal solution: http://launchware.com/articles/acceptance-testing-asserting-sort-order

It's even packaged as a tiny gem.

answered Jul 31 '14 at 19:38

TomTaila

1,694
1
20
33

Thanks - that article really helped me (we're using Minitest, not RSpec) – samjewell Apr 11 '18 at 14:21

Jay Prall · Answer 5 · 2016-08-13T22:41:05.090

5

You can use the all finder method to select multiple elements and then use collect to pull out the text into an array:

assert_equal page.all('#navigation ul li').collect(&:text), ['Item 1', 'Item 2', 'Item 3']

If your list isn't visible on the page such as a popup navigation menu, you need to pass visible: false into the all method.

edited Aug 13 '16 at 22:41

answered Aug 10 '16 at 14:57

Jay Prall

5,295
5
49
79

charlesdeb · Answer 6 · 2012-12-28T18:43:11.733

This page has got a very clever way of testing the order of string elements on a page - be they in a list or not:

https://makandracards.com/makandra/789-match-strings-in-a-given-order-with-cucumber-and-capybara

It is in the form of a cucumber step, but you should be able to extract what you need for an Rspec step. It is similar to Johns 'kludgy' solution - but a bit fancier from what I can make out. All of their other cunning capybara testing steps can be found here:

https://github.com/makandra/spreewald

score 1 · Answer 7 · answered May 26 '16 at 04:31

1

Use the orderly gem, written by the author of the article mentioned previously.

It's as simple as:

expect(this).to appear_before(that)

answered May 26 '16 at 04:31

Jan Klimo

4,643
2
36
42

score 0 · Answer 8 · answered Jan 23 '16 at 00:59

Using capybara-ui you could use the #widgets method to get all of the elements in top-down order.

# First define the widget,
# or reusable dom element reference.
# In this case in a role
class UserRole < Capybara::UI::Role
  widget :list_item, '.list-item'
end

# Then test the expected order using #widgets
role = UserRole.new
expected_order = ['buy milk', 'get gas', 'call dad']
actual_order = role.widgets(:list_item).map(&:text)

expect(actual_order).to eq(expected_order)

score 0 · Answer 9 · answered Jan 25 '18 at 02:32

0

In above solutions, it was very difficult to test order if having multiple elements on page. So, I have found another way.

I have posted the solution here - Test order(sequence) of content using capybara

Mapping the arrays having css specific elements and then match that array with expected array(keep elements in sequence)

answered Jan 25 '18 at 02:32

rhunal

395
2
15

In the OP's case I think this is a flaky test waiting to happen. Mapping the specific elements if at least one already exists on the page prior to the javascript that adds a new one will immediately return only those elements that are currently on the page, which may not include the new one if the javascript takes too long. Better to be explicit and use positional pseudo-class selectors as other answers have suggested. – soupdog Mar 04 '20 at 19:05

score 0 · Answer 10 · answered Oct 21 '20 at 11:25

0

Since page.body.should is deprecated, we can use regexp matching for a multiline comparing like a Ben said in a comment over there:

expect(page.body).to match /#{item1.name}.*#{item2.name}/m

answered Oct 21 '20 at 11:25

Unkas

3,522
2
19
23

score 0 · Answer 11 · answered Apr 24 '22 at 16:30

Here's a custom matcher that I currently use to test the order of page contents:

RSpec::Matchers.define :appear_before do |later_content|
  match do |earlier_content|
    earlier_content_index = page.body.index(earlier_content)
    later_content_index = page.body.index(later_content)

    @failure_message = "Expected \"#{earlier_content}\" to appear before \"#{later_content}\""

    def raise_missing_content_error(content)
      @failure_message += " but \"#{content}\" was not found on the page."
      raise RSpec::Expectations::ExpectationNotMetError
    end

    raise_missing_content_error(earlier_content) if earlier_content_index.nil?
    raise_missing_content_error(later_content) if later_content_index.nil?

    earlier_content_index < later_content_index
  end

  failure_message { @failure_message }
end

You can then use it like this:

expect('My new post').to appear_before('My old post')

score -1 · Answer 12 · answered Dec 07 '11 at 23:15

-1

Capybara should support the + selector (I believe it uses Nokogiri, which certainly supports this). Are you perhaps using an old version? Or are you using a Capybara driver that doesn't support JavaScript, so that the extra element isn't getting rendered at all?

Also, don't use RSpec for testing your HTML. Cucumber is far better at this. For interacting with JavaScript, you'll want to use Selenium or Capybara-Webkit. Or if you have a lot of JavaScript, consider testing it with Jasmine.

answered Dec 07 '11 at 23:15

Marnen Laibow-Koser

5,959
1
28
33

1

I don't know why you got a downvote, but you're perfectly correct about Capybara (well, Nokogiri) supporting the `+` selector. My suspicion is the new `li` was not being added *adjacent* to `ITEM #1`, and he should have used the `~` selector instead. – Daniel Wright Jul 15 '13 at 20:53
How is cucumber better at testing html? – Drew Verlee Jul 13 '14 at 13:07
@DrewV Cucumber is better at doing assertions about user-facing content in user-facing terms. RSpec is at the wrong level of abstraction for testing UI. – Marnen Laibow-Koser Jul 16 '14 at 20:58

Is it possible to test the order of elements via RSpec/Capybara?

12 Answers12