# How to select the table checkbox with Playwright

**URL:** <https://community.weweb.io/t/how-to-select-the-table-checkbox-with-playwright/21169>\
**Category:** Ask us anything\
**Created:** [May 5, 2026, 6:47pm UTC](https://community.weweb.io/t/how-to-select-the-table-checkbox-with-playwright/21169 "2026-05-05T18:47:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pedro\_vitor](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pedro\_vitor](https://community.weweb.io/u/pedro_vitor)\
**Post date:** [May 5, 2026, 6:47pm UTC](https://community.weweb.io/t/how-to-select-the-table-checkbox-with-playwright/21169/1 "2026-05-05T18:47:30Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/3X/1/e/1e2102fc16da9835b1963d60a33bece67c44257b.png)

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

```

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

```

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

```

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

```

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

```

---

<div class="post-metadata">

**Author:** ![stackshortlist](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/stackshortlist/32/16835_2.png) [@stackshortlist](https://community.weweb.io/u/stackshortlist)\
**Post date:** [October 16, 2026, 2:42pm UTC](https://community.weweb.io/t/how-to-select-the-table-checkbox-with-playwright/21169/2 "2026-10-16T14:42:12Z")

</div>

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`:

```js
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.

---

<div class="post-metadata">

**Author:** ![Habiddiaz](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/habiddiaz/32/16834_2.png) [@Habiddiaz](https://community.weweb.io/u/Habiddiaz)\
**Post date:** [October 16, 2026, 4:54pm UTC](https://community.weweb.io/t/how-to-select-the-table-checkbox-with-playwright/21169/3 "2026-10-16T16:54:32Z")

</div>

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. 😎