Does cypress "get" returns elements in order it appears on HTML document?

Question

I am writing e2e tests using Cypress and I need to write a test that asserts if front-end correctly orders a set of elements.

Only for example, consider I have a page that just list a set of ages as follows:

<div id="list">
   <div class="age">18</div>
   <div class="age">20</div>
   <div class="age">19</div>
</div>

And I want to write a test that asserts if it is sorted from older to younger.

One approach could be to get elements in which class is age and discover if it is ordered by iterate over them:

cy.get(".age").then((ages) => {
  //check if elements are ordered iterating over ages array
})

But I can only guarantee that my test is correct if ages array is in the same order as presented in HTML.

Does DOM elements yield by cy.get() always are in the exact order that it is put in HTML document?

I can't find any reference to this in official documentation

score 2 · Accepted Answer · answered Aug 06 '20 at 09:02

Short answer, yes.

Explanation:

From the cypress doc of get:

The querying behavior of this command matches exactly how $(…) works in jQuery.

...So the final answer is that yes, I can use $('.myList li').each() and iterate through the list items in the order that they appear in the DOM.

1 Answers1