Cypress - Web Tables

Cypress - Interacting with Web Tables

Cypress can effectively interact with HTML web tables, whether they are static (fixed rows and columns) or dynamic. Understanding table structure is key to automating interactions.

In HTML, tables are typically structured with <table>, <thead>, <tbody>, <tr> (table row), <th> (table header), and <td> (table data/cell) tags.

Common Cypress Commands for Tables

To access all rows within a table body: cy.get('tbody tr') or a more specific selector like cy.get('#myTableId tbody tr').
To access all cells (columns) within rows: cy.get('tbody tr td').
To access a cell in a specific column (e.g., the second column): cy.get('tbody tr td:nth-child(2)'). Note that nth-child is 1-indexed.
To iterate through rows or cells, the .each() command is invaluable.

Cypress also provides commands like .next() to get the immediately following sibling element, and .prev() for the immediately preceding sibling. These are useful for navigating between cells in a row. The .parent() command can be used to go up to the containing row, and .find() to locate elements within a specific row or cell.

A typical HTML table structure might look like this:

<table>
  <thead>
    <tr>
      <th>Automation Tool</th>
      <th>Type</th>
      <th>License Cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Selenium</td>
      <td>Open Source</td>
      <td>Free</td>
    </tr>
    <tr>
      <td>Cypress</td>
      <td>Open Source</td>
      <td>Free (Dashboard is paid)</td>
    </tr>
    <!-- ... more rows ... -->
  </tbody>
</table>

Example: Verifying Table Cell Content

Let’s consider a scenario where we want to find a row containing ‘Selenium’ in the first column (‘AUTOMATION TOOL’) and then verify that the corresponding ‘TYPE’ in the second column is ‘Open Source’. We’ll use the table at https://sqengineer.com/practice-sites/practice-tables-selenium/ (Table ID: table1).

The target web page displays a table with columns like ‘Automation Tool’, ‘Type’, ‘Link’, etc.

Implementation

Below is an example of how to implement this verification using Cypress:

describe('Web Table Interaction', () => {
    it('Verifies cell content based on another cell in the same row', () => {
        cy.visit('https://sqengineer.com/practice-sites/practice-tables-selenium/');

        // Target the first column (Automation Tool) of table with id 'table1'
        cy.get('#table1 tbody tr td:nth-child(1)').each(($cell, index) => {
            const toolName = $cell.text();

            if (toolName.includes('Selenium')) {
                // If 'Selenium' is found, get the corresponding cell in the second column (Type)
                cy.get('#table1 tbody tr').eq(index) // Get the current row
                    .find('td:nth-child(2)')    // Find the second cell in that row
                    .then(($typeCell) => {
                        const typeValue = $typeCell.text();
                        // Assert that the type is 'Open Source'
                        expect(typeValue.trim()).to.equal('Open Source');
                    });
            }
        });
    });
});

Execution and Output

When this test runs:

Cypress visits the specified URL.
It iterates through each cell in the first column of #table1.
When it finds a cell containing ‘Selenium’, it then finds the second cell (td:nth-child(2)) in the same row.
It extracts the text from this second cell and asserts that it equals ‘Open Source’.

The Test Runner logs will show the commands executed, including the iteration and the successful assertion if the data matches. If ‘Open Source’ was not found for ‘Selenium’, the assertion would fail.

Best Practices for Table Interaction

Use specific selectors for your table (e.g., by ID or a data-cy attribute) to avoid ambiguity if multiple tables exist on the page.
When iterating, .parent() and .find() can be very useful for precisely targeting elements relative to the current iterated element.
For complex tables, consider creating custom commands or helper functions to encapsulate common table operations.