Web Tables Loops | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explored how to automate the filtering functionality of a table using TypeScript and Playwright. The key focus was on retrieving values from a specific column by looping through the rows, as direct column access is not available. Key Concepts Filtering Table Data: The table can be filtered based on user input, such as ages (20, 30, 40, 200). The expected behavior is that the table displays only the relevant rows or shows a "no data found" message. Looping Through Rows: To validate the filtering, we create a loop that iterates through an array of ages. For each age, we input the value and check the table's response. Implementation Steps Create an array of test data: const ages = [20, 30, 40, 200]; Use a loop to input each age value into the filter input field. Set up conditions to validate: If the age is 200, assert that the text "no data found" is displayed. For other ages, loop through the table rows to ensure the last column matches the input age. Implement a wait condition to ensure the table is in the correct state before retrieving rows. Important Notes Use locator assertions to confirm the table's first row contains the expected value before proceeding with row retrieval. Ensure that the automation script accounts for any delays in the UI response after inputting filter values. This approach enhances the reliability of tests by ensuring that the application state is verified before performing assertions on the table data.