Get data of HTML table in Cypress

Question

I would like to return table data in human readable format using Cypress (without Cy wrappers).

Suppose we have such a table:

Col1	Col2	Col3
D1	D3	D5
D2	D4	D6

This is my code but I don't know how to get the real data:

getTableData() {
  return cy.get('#table-modal')
    .then(modal => cy.wrap(modal).find('table > tbody > tr'))
    .each(row =>
      cy
        .wrap(row)
        .find('td')
        .each(column => cy.wrap(column).invoke('text'))
    );
}

const expected = [
  ['D1', 'D3', 'D5'],
  ['D2', 'D4', 'D6']
];

getTableData().should('eq', expected); // failing, because function returns wrapped data by Cypress

Answer 1

Try:

async function getTableData() {
  const table = (await cy.get("table")).get(0);
  const data = Array.from(table.querySelectorAll("tr")).map((tr) =>
    Array.from(tr.children).map((td) => td.textContent)
  );
  
  return data;
}

const expected = [
  ["Col1", "Col2", "Col3"],
  ["D1", "D3", "D5"],
  ["D2", "D4", "D6"],
];

cy.wrap(getTableData()).should("deep.eq", expected);