Cypress: Working with Tables

Working with dynamic tables in end-to-end testing is a common but often tricky task — especially when rows are editable, contain checkboxes, or are updated live. This guide shows how to use Cypress to interact with rows based on both content and index, as well as how to perform validations across multiple rows dynamically.

Example HTML Table

Cypress Test Example

Cypress Table Interaction Techniques

Finding Rows by Text

A simple and reliable way to work with table rows is to search by visible content. This is ideal when the row contains unique values like a user’s name or email.

Example:

This tells Cypress to find a <tr> element that contains the text “Emily”. After locating the row, use cy.wrap() to perform actions inside it:

Selecting Rows by Index

When you're dealing with rows that don’t yet contain text (like newly added rows), you can target them by position using .eq(index).

Example:

This approach is helpful when your table has a predictable structure — like always placing the newest row at the top.

Looping Through Filter Inputs

When you want to test a filter (e.g., by age), looping over a range of values keeps your tests clean and avoids repetition. Cypress allows you to iterate using .each():

This lets you test both valid and edge-case scenarios in a concise way.

Best Practices for Table Testing

• Use .contains() to locate rows by known, visible text — it’s readable and stable.

• Use .wrap() when chaining actions on elements already located in .then().

• Prefer .each() when iterating through dynamic values or validating filters.

• Validate results immediately after interactions — don’t just click and move on.

• Use .eq(index) only when the table structure is fixed and predictable.

• Avoid over-reliance on .wait() — use it only if your app needs time to render updates.

• Favor stable attributes like data-testid instead of styling classes for selectors.