How to select the table checkbox with Playwright

Ask us anything
1

I’m trying to select a row from a table by person’s name and selecting the checkbox in the table. I’ve tried all these methods, but none have worked.

table
table1352×749 47.1 KB

const linha = page.getByRole('row', { name: 'MENSALISTA É ESSE TESTE NOVO' });
await linha.getByRole('checkbox').click();

const linha = page.locator('tr').filter({ hasText: 'MENSALISTA É ESSE TESTE NOVO' });
await linha.getByRole('checkbox').click();

const linha = page.locator('tr').filter({ hasText: 'MENSALISTA É ESSE TESTE NOVO' });
await linha.locator('td').first().click();

const linha = page.locator('tr').filter({ hasText: 'MENSALISTA É ESSE TESTE NOVO' });
await linha.locator('input[type="checkbox"]').click();

const linha = page.locator('tr').filter({ hasText: 'MENSALISTA É ESSE TESTE NOVO' });
await linha.locator('input[type="checkbox"]').click({ force: true });
2

The WeWeb Datagrid is built on AG Grid, so there are no tr/td elements at all. Rows are divs with role=“row”, and two things usually break the selectors above:

  1. AG Grid renders a row in several containers (pinned left, center, pinned right). If the selection checkbox column is pinned, the checkbox and the name text sit in different “row” divs, so filtering one row by text and looking for a checkbox inside it finds nothing.
  2. The checkbox is a styled input inside .ag-selection-checkbox (or .ag-checkbox-input-wrapper), and the visible part is the wrapper, not the input.

What works reliably is to find the row index from the text, then click the checkbox in the row with the same row-index:

const nameRow = page.locator('.ag-row', { hasText: 'MENSALISTA É ESSE TESTE NOVO' }).first();
const idx = await nameRow.getAttribute('row-index');
await page.locator(`.ag-row[row-index="${idx}"] .ag-selection-checkbox`).first().click();

// verify
await expect(
  page.locator(`.ag-row[row-index="${idx}"] .ag-selection-checkbox input`).first()
).toBeChecked();

If the row is far down the list, scroll the grid first, since AG Grid virtualises rows and off-screen ones aren’t in the DOM.

3

If Playwright isn’t working properly for you, try using Claude for Chrome; give it all the context regarding what needs to be done, and it will run scripts on your screen to test what you’ve requested. :smiling_face_with_sunglasses: