How to read the last row of a table in Cypress?

Question

I want to take the last row in the third column in my dynamic table.This cell has the last email randomly created and stored in the variable storedEmail. Those are what I tried:

cy.fixture('email.json').then((fixture) => {
  const storedEmail = fixture.email;

  cy.get('table')
    .find('tr')
    .last()
    .find('td:nth-child(3)')
    .invoke('text')
    .then((cellText) => {
      expect(cellText.trim()).to.contain(storedEmail);
    });
});
});

I also tried:

cy.get('table')
  .find('tbody > tr')
  .last()
  .within(() => {
    cy.get('td:nth-child(3)')
      .invoke('text')
      .then((cellText) => {
        const trimmedText = cellText.trim();
        cy.log('Cell Value:', trimmedText);
        expect(cellText.trim()).to.contain(storedEmail);

      });
  });

But both snippets gave me the first row instead the last one.

Answer 1

To read the last row of a table in Cypress, you can modify your code as follows:

cy.fixture('email.json').then((fixture) => {
  const storedEmail = fixture.email;

  cy.get('table')
    .find('tbody > tr')
    .last()
    .find('td:nth-child(3)')
    .invoke('text')
    .then((cellText) => {
      const trimmedText = cellText.trim();
      cy.log('Cell Value:', trimmedText);
      expect(trimmedText).to.contain(storedEmail);
    });
});

In the updated code:

1 Use the selector 'tbody > tr' to select the table rows within the <tbody> element. This helps to exclude any header rows if present in the table.

2 Use the .last() function to target the last table row.

3 Use .find('td:nth-child(3)') to locate the third column cell within the last row.

4 Invoke .text() to retrieve the text content of the cell.

5 Trim the cell text using .trim() to remove any leading or trailing whitespace.

6 Use cy.log() to output the trimmed cell value to the Cypress command log for verification purposes.

7 Assert that the trimmed cell text contains the expected storedEmail value.

With these modifications, the code should correctly select and assert against the last row's third column cell value in the dynamic table.

If the issue persists, please ensure that your table structure and CSS selectors are accurate. Additionally, verify that the 'email.json' fixture file contains the expected data.

Answer 2

Since your table is dynamic, is there a possibility the test is running before all the rows are present?

You can try asserting the number of rows before testing the content

cy.get('table')
  .find('tbody > tr')        // definitely use tbody, since thead also has child tr
  .should('have.length', 10) // test the expected rows have loaded
  .last()
  .find('td:nth-child(3)')
  ... // etc