Testing the line order of text on a web page - Rspec & Capybara in rails

Question

Maybe I'm missing the obvious ...

I can easily check for the presence or absence of text on a web page.

Is there an easy way to check the order of the elements listed in a div or on a web page, say from top to bottom?

So if I expect

• it
• it
• Another thing
• And one more element

... to display in that order. Is there a pairing method or verification method that you can call to verify the contents of a web page? It should fail if something like this has been shown:

• it
• Another thing
• it
• And one more element

Answer 1

You can do this with CSS or XPath selectors:

expect(page.find('li:nth-child(1)')).to have_content 'This' 

http://www.w3schools.com/cssref/sel_nth-child.asp

See also:
http://makandracards.com/makandra/9465-do-not-use-find-on-capybara-nodes-from-an-array

Answer 2

You can do something similar with RSpec Matchers / Index

  def items_in_order page.body.index('This').should < page.body.index('That') && page.body.index('That').should < page.body.index('The other thing') && page.body.index('The other thing').should < page.body.index('And one more item') end 

Answer 3

If the display order is the same as in html, for example:

 <div id="one">This</div> <div id="two">That</div> <div id="three">The other thing</div> <div id="four">And one more item</div> 

Then it should be possible as follows:

 it "should have the right order" do elements = all('#one, #two, #three, #four'); # all in one selector expect(elements[0]['id']).to eql('one'); expect(elements[1]['id']).to eql('two'); expect(elements[2]['id']).to eql('three'); expect(elements[3]['id']).to eql('four'); end 

The order of the elements should be the same as in the document. I tested it myself.

Answer 4

As an option:

  expect(some_el).to have_text(/This .+ That .+ The other thing .+ And one more item/)