Web Tables Navigation | Bondar Academy

Lesson Summary

Lesson Overview: This lesson focuses on automating interactions with HTML tables, which can be complex due to their structure. The video covers how to navigate and manipulate table data using Playwright. Table Structure Understanding the HTML structure of tables is crucial: <table> : The main table tag. <thead> : The table header section. <tbody> : The table body section. <tr> : Represents a table row. <th> : Table header cell. <td> : Table data cell. Interacting with Table Rows To automate interactions: Identify a row using a unique value (e.g., email). Use the row as a locator to interact with its elements. Example: Updating a Row To update a value in a specific row: const tableRowByEmail = page.getByRow('row', { name: 'email' }); await tableRowByEmail.locator('.pencil').click(); await tableRowByEmail.locator('input[placeholder="age"]').fill('35'); await tableRowByEmail.locator('.checkmark').click(); Handling Non-Unique Values When dealing with non-unique values, use the filter method to target specific columns: const tableRowByID = page.getByRow('row').filter({ has: page.locator('td:nth-child(2)', { text: '10' }) }); Key Takeaways Use unique identifiers to locate rows. Be aware that editing table cells may change them to input fields, requiring different locator strategies. For validation, use methods that target the visible text in the table. In summary, mastering table interactions involves understanding their structure and employing effective locator strategies for automation.