Web Tables Navigation | Bondar Academy

Lesson Summary

In this lesson, we explore web tables and techniques for locating web elements within them using Playwright . Navigating tables can be challenging due to their structure, but we will cover effective strategies to identify specific rows and cells. Key Concepts Table Structure: A web table starts with a <table> tag, often containing <thead> and <tbody> sections. Inside the body, rows are defined by <tr> tags, and columns by <td> tags. Locating Rows: To locate a specific row, use getByRow with a unique identifier, such as an email address. Editing Values: When editing a value, such as a user's age, ensure to identify the correct input field, which may not be the same as the displayed text. Automation Steps Identify the target row using a unique identifier (e.g., email). Click the edit button (e.g., pencil icon) to modify the row. Use getByPlaceholder to locate input fields for editing. Submit changes and confirm updates using a checkmark button. Advanced Techniques When dealing with non-unique identifiers, such as IDs that may repeat across pages, use a filter method to narrow down results based on specific columns. This involves: Using page.locator to find elements. Filtering results by column index to ensure accuracy. In summary, to effectively automate interactions with web tables, utilize unique identifiers and appropriate locators, and be mindful of the differences between displayed text and input values. This knowledge will enhance your ability to navigate and manipulate web tables in your tests.