Assert sorting in an table using Cypress

Question

Well, I have a table with many rows and columns, I would like to check if the table is sorted for a particular column.

I have tried using different expects and asserts but its always returning true. Am I doing anything wrong here?

cy.get('table tbody tr').should(function($trs) {
  var arrayOftd = $trs.map(function (i, tr) {
    return Cypress.$(tr).find('td').eq(3).text() 
  })
  var test = arrayOftd.sort()          
  expect(arrayOftd).to.deep.equal.(test)
})

It has to return true when sorted ascending and false when descending or any other order.

This is the console log of the assert statement

Command: assert cypress_runner.js:172385 Actual: (13) ["946", "947", "948", "951", "952", "955", "956", "959", "960", "963", "964", "967", "968"] cypress_runner.js:172385 Expected: (13) ["946", "947", "948", "951", "952", "955", "956", "959", "960", "963", "964", "967", "968"] cypress_runner.js:172385 Message: expected [ Array(13) ] to equal [ Array(13) ] cypress_runner.js:172385 Error: AssertionError: expected [ Array(13) ] to equal [ Array(13) ]

score 6 · Accepted Answer · edited Mar 19 '20 at 11:07

6

It may be a personal preference but I try not to use jQuery syntax if I don't really need to, for better readability. What I've done is:

function getCellTextAsArray() {
  let cellContents = [];
  return new Cypress.Promise(resolve => {
    cy.get("table tbody tr")
      .children()
      .each(($el, $index) => {
        //some logic to select the elements you want
        //like $index % 4 == 0
        if (...) {
          cellContents.push($el.text());
        }
      })
      .then(() => resolve(cellContents));
  });
}

And then you do your assertion without having to worry about passing callbacks:

getCellTextAsArray().then(cellContents => {
  let actual = cellContents.slice();
  cy.wrap(actual).should("deep.eq", cellContents.sort());
});

So what happens here is that we are trying to use higher level Cypress commands to grab all the tds, and when we are done with them we resolve the Promise with the tds text content, then it's kind of easy and readable to do a final assertion.

edited Mar 19 '20 at 11:07

Jan Klimo

4,643
2
36
42

answered Jun 27 '19 at 09:47

Vangelisz Ketipisz

897
1
7
10

Thanks for the reply. I tried but im facing problem with assertion. Eventhough the actual and expected is same it returns false in the assertion. I have added the console log in the question. – user3921554 Jun 28 '19 at 02:18
My mistake, I just edited my answer to use 'deep.eq', so that you compare the actual values, not references. – Vangelisz Ketipisz Jun 28 '19 at 08:57
@VangeliszKetipisz - Hi, thanks for posting this as I was facing the same issue. just wanted to understand if I want to see values sorted on any column, how can I achieve that. – Prany Aug 08 '19 at 10:14

totymedli · Answer 2 · 2019-06-27T09:41:21.950

2

tl;dr

You have to copy the array before sort otherwise you assert it to itself, since sort changes the array.

var test = arrayOftd.slice().sort()

Explanation

sort doesn't return a new copy, it changes the array in-place so when you assign its return value to test and compare it to arrayOftd you compare it to itself.

Referencing the MDN docs:

The sort() method sorts the elements of an array in place and returns the sorted array.

Keep in mind that slice is doesn't create a deep copy of the array, it only copies its first level, but if you change the ordering on the first level only, you should be fine.

edited Jun 27 '19 at 09:41

answered Jun 27 '19 at 09:36

totymedli

29,531
22
131
165

Thanks for the reply and in my situation the main problem was it being async. Got it solved. – user3921554 Jul 01 '19 at 04:51
@totymedli - I tried with first copying the array before sort and then sorting it on one column. the result i get is different resulting in assertion failure. what does deep.eq do then ? – Prany Aug 08 '19 at 15:31
@Prany It comes from Chai. It compares the whole objects recursively so every property have to be equal. See the [docs](https://www.chaijs.com/api/bdd/#deep). – totymedli Aug 08 '19 at 21:28

Assert sorting in an table using Cypress

2 Answers2

tl;dr

Explanation

Linked