How to verify table's column data is sorted by name or not

Question

I have one project where I want to do some sorting. When the user click on the column name data should be show in sorted by name.

Is it possible to do in Cypress using POM?

Answer 1

You can extract the column data from the page, then sort it. Afterwards, click on app sort by name and match.

Here is a working simplified example.

cy.get('.selector-to-get-column-data')
  .then(($el) => {
    // use lodash .map() to get innerText of each element
    // then sort the array
    return Cypress._.map($el, "innerText").sort();
  })
  .as("sortedArray")

// action to sort column

cy.get("@sortedArray").then((sortedArray) => {
  cy.get(".selector-to-get-column-data")
    .then(($el) => {
      // use lodash .map() to get innerText of each element
      // then sort the array
      return Cypress._.map($el, "innerText").sort();
    })
    .then(cy.log)
    .should("deep.equal", sortedArray);
})