Simple Table

Work with basic HTML tables

What you will learn

Use getByRole('table'), getByRole('row'), getByRole('cell') — semantic locators survive CSS changes
Extract a whole column via locator.allTextContents() and compare arrays — more reliable than per-cell assertion
Verify header cells use <th> with scope='col' — assistive tech uses scope to associate cells with headers

Users Table

Practice locating table cells, rows, and headers with data attributes

ID	Name	Email	Role
1	John Doe	john@example.com	Admin
2	Jane Smith	jane@example.com	Editor
3	Bob Wilson	bob@example.com	Viewer
4	Alice Brown	alice@example.com	Editor
5	Charlie Davis	charlie@example.com	Viewer

Table Stats

Metadata about the table

Total rows: 5

Total columns: 4

Testing Tips

Automation hints

✓ Use data-row-id attribute to locate specific rows in #users-table
✓ Access cells by data-cell attribute (name, email, role)
✓ Count rows with locator('tbody tr').count() and verify against #row-count
✓ Use data-column on headers to identify table structure
✓ Iterate through rows to extract and validate data in bulk

Related Challenges

Simple Table

Work with basic HTML tables

What you will learn

Use getByRole('table'), getByRole('row'), getByRole('cell') — semantic locators survive CSS changes
Extract a whole column via locator.allTextContents() and compare arrays — more reliable than per-cell assertion
Verify header cells use <th> with scope='col' — assistive tech uses scope to associate cells with headers

Users Table

Practice locating table cells, rows, and headers with data attributes

ID	Name	Email	Role
1	John Doe	john@example.com	Admin
2	Jane Smith	jane@example.com	Editor
3	Bob Wilson	bob@example.com	Viewer
4	Alice Brown	alice@example.com	Editor
5	Charlie Davis	charlie@example.com	Viewer

Table Stats

Metadata about the table

Total rows: 5

Total columns: 4

Testing Tips

Automation hints

✓ Use data-row-id attribute to locate specific rows in #users-table
✓ Access cells by data-cell attribute (name, email, role)
✓ Count rows with locator('tbody tr').count() and verify against #row-count
✓ Use data-column on headers to identify table structure
✓ Iterate through rows to extract and validate data in bulk

Related Challenges

Buttons

Easy

Links

Easy

Disabled Elements

Easy

Simple Table

What you will learn

Users Table

Table Stats

Testing Tips

Timer

Need Help?

Related Challenges

Buttons

Links

Disabled Elements

Simple Table

What you will learn

Users Table

Table Stats

Testing Tips

Timer

Need Help?

Related Challenges

Buttons

Links

Disabled Elements