Web Table Navigation | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
Lesson Overview: This lesson focuses on automating web tables, which are often considered challenging UI components. The lesson is divided into two parts: navigating web tables and running loops/scenarios. HTML Table Structure The basic structure of an HTML table includes: <table> - the main table tag <thead> - the table header (optional) <tbody> - the table body (usually present) <tr> - table row <td> - table column Automating Table Interactions To automate interactions with a table: Identify the table row using a unique value (e.g., name). Use CyContains to find the row containing the unique value. Wrap the row with CyWrap to perform actions within it. Click on elements (e.g., edit button) using class selectors. Update values in input fields and confirm changes. Validate changes by checking the last cell's value. Handling Non-Unique Identifiers If unique identifiers are not available, you can: Use indexing to target specific rows or columns. Utilize methods like eq , first , and last to navigate through rows and columns. Conclusion: Automating web tables involves navigating by unique values or using indexes when necessary. Remember that indexing starts at zero.