Verify table with step definition also containing a table

Question

I have this step definition:

    Then I verify that Ontvanger has received Type message with Onderwerp and Status
      | berichtOntvanger | berichtType | berichtOnderwerp | berichtStatus |
      | test1Rij1        | test2Rij1   | test3Rij1        | test4Rij1     |

Which can have one or more rows.

And now i have to verify this with a table in our application. But i'm stuck from this point on:

    verifyBerichtenTableRow(table) {
        const tableContents = table.hashes();
        tableContents.forEach((element) => {
            cy.get('.berichten-centrum .p-datatable-table')
                .find('tr')
                .each(($row, $rowIndex) => {
                    if ($rowIndex >= 1) {
                        cy.wrap($row)
                            .find('td')
                            .each(($cell, $columnIndex) => {
                                cy.wrap($cell.eq($columnIndex)).should('have.text', element.DatumTijd);
                                cy.wrap($cell.eq($columnIndex)).should('have.text', element.Ontvanger);
                                cy.wrap($cell.eq($columnIndex)).should('have.text', element.Type);
                                cy.wrap($cell.eq($columnIndex)).should('have.text', element.Onderwerp);
                                cy.wrap($cell.eq($columnIndex)).should('have.text', element.stand);
                            });
                    }
                });
        });
    }

The test finds six 'td' in a row, which is correct but never iterates through those six. Only the first td is checked. Anyone an idea? Thanks

Answer 1

The problem seems to be the $cell.eq() part. At this point you have a single cell because .each(($cell is taking an individual <td> from the collection given by .find('td').

So you would only need:

.find('td')
.each(($cell, $columnIndex) => {
  cy.wrap($cell).should('have.text', <element-column-here>)
})

But now, you need to figure out what <element-column-here> will be.

It looks like element is an object with properties corresponding to the column names,

// element shape
{
  "DatumTijd": "2023-11-05",
  "Ontvanger": "John",
  "Type": "chicken",
  "Onderwerp": "How to cook"
}

so you should be able to use Object.values[element][$columnIndex]

.find('td')
.each(($cell, $columnIndex) => {
  cy.wrap($cell).should('have.text', Object.values[element][$columnIndex])
})

---

Working with the cell list

Another way, change .each($cell) to .then($cells)

Now you are using the full list of cells, and can use .eq(n) to index individual cells.

cy.wrap($row)
  .find('td')
  .then($cells => {
    cy.wrap($cells.eq(0)).should('have.text', element.DatumTijd)
    cy.wrap($cells.eq(1)).should('have.text', element.Ontvanger)
    cy.wrap($cells.eq(2)).should('have.text', element.Type)
    ...