How to get the total number of Rows in a table in Cypress

When using Cypress for automated testing, retrieving the total number of rows in a table is a common requirement. This helps verify that the table contains the correct number of data rows. Below are the steps and examples for using Cypress to retrieve the number of table rows.

Steps

1. Locate the Table: First, identify the selector for the table you want to inspect. This is typically a <table> element.

2. Retrieve All Rows Using Selectors: Use the .find() or .children() methods combined with appropriate selectors, typically <tr>, to select all table rows.

3. Calculate the Number of Rows: The number of rows can be obtained using .its('length').

4. Assert the Number of Rows: Use .should() or .expect() to verify that the number of rows matches the expected value.

Example Code

Assume an HTML table with the following structure:

html
<table id="data-table">
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 3</td><td>Data 4</td></tr>
    <tr><td>Data 5</td><td>Data 6</td></tr>
</table>

To retrieve the total number of rows in this table (excluding the header), you can write the following Cypress test code:

javascript
describe('Table Test', () => {
    it('should get the total number of rows in the table', () => {
        // Visit the page containing the table
        cy.visit('http://example.com');

        // Locate the table and find all <tr> elements (rows), excluding the header row
        cy.get('#data-table')
          .find('tr')
          .then(rows => {
              // Obtain the number of rows
              const rowCount = rows.length - 1; // Subtract 1 because it includes a <th> row

              // Assert that the number of rows matches the expected value
              expect(rowCount).to.equal(3); // Assuming we expect 3 data rows
          });
    });
});

In this example, we first visit the page containing the table using cy.visit(). We locate the table using cy.get() with the selector #data-table, then use .find('tr') to retrieve all rows. The calculation rows.length - 1 is performed because we exclude the header row from the row collection. Finally, we use expect() to verify that the actual number of rows matches the expected value.

Notes

• Ensure the page is fully loaded before retrieving elements.
• Adjust the selectors based on the table's specific structure, especially if the table has multiple sections such as <thead> and <tbody>.

Such tests effectively verify the completeness and correctness of the data in the table.