Web Table Loops | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to validate each row in a web table based on a specific value, such as age. The goal is to automate the filtering of table rows and validate the displayed results. Key Steps in the Automation Process Filter the Table: Input a value (e.g., age) to filter the rows. For instance, typing 20 should display only rows with that age. Locate Elements: Use placeholder.age as a locator to input the age. Loop Through Rows: Retrieve all table rows using tbody.tr and loop through them with the each method. Validation: Check if the last column of each row contains the expected age value. Troubleshooting Common Issues During testing, an error may occur stating "subject no longer attached to the DOM." This happens when Cypress attempts to access elements before the DOM has updated after an input. To resolve this: Implement a CyWait command to introduce a delay, allowing the table to update before querying it. Note that using CyWait is generally discouraged and should be a last resort. Testing Multiple Values We can enhance the automation by testing multiple ages using an array: const ages = [20, 30, 40, 200]; For each age, validate the corresponding table rows. If an age has no corresponding data (e.g., 200 ), assert that the message "no data found" is displayed. In summary, this lesson demonstrates how to effectively loop through table rows, validate values, and handle timing issues in Cypress testing.