Filter Table Rows

The concept

Tables are full of repeated controls. Every row has an “Edit” button, so getByRole('button', { name: 'Edit' }) matches dozens. The fix is to narrow the search: first find the row you care about, then the control inside it.

locator.filter() keeps only matches that satisfy a condition. filter({ hasText: 'Ada Lovelace' }) keeps rows containing that text; filter({ has: page.getByRole('cell', { name: 'Overdue' }) }) keeps rows containing a matching element. Then you chain a locator onto the result to act inside that row only.

This is called scoping, and it is one of the most useful habits in Playwright: describe where something is in human terms, not by its index.

The fragile version

await page.locator('table tr:nth-child(3) td:nth-child(5) button').click();

Why it breaks: Sort the table, add a row, or insert a column and this clicks the wrong person's button, without failing.

A robust Playwright version

const row = page.getByRole('row').filter({ hasText: 'Ada Lovelace' });
await row.getByRole('button', { name: 'Edit' }).click();
await expect(page.getByRole('dialog', { name: /edit ada lovelace/i })).toBeVisible();

It finds the row by its content and the button by its role, so reordering does not matter.

This is a general example on a made-up page, not the challenge’s reference solution.

Common mistakes

• Filtering by text that appears in more than one row (for example a first name only).
• Using nth() on rows after sorting or paging.
• Filtering the cell instead of the row, then failing to find the button.

FAQ