I'm new to playwright and not sure how to approach this issue. I have a table with data, and the first column of each row has a checkbox. I want to be able to select the correct row to click the checkbox. What I'm not sure about is how to get the row.

My table:

|    |  ID   |  Name        | Phone
| [] | 3745  | Frank Smith  | 485-555-9394
| [] | 9394  | Joe Johnson  | 384-555-2332


  <tr role="row" class="odd">
    <td><input type="checkbox" name="personid"></td>
    <td>Frank Smith</td>
  <tr role="row" class="even">
    <td><input type="checkbox" name="personid"></td>
    <td>Joe Johnson</td>

Now, I want to select the checkbox associated with user ID 9394.

My original solution is (in nodejs):

page.locator('table tbody tr': {hasText: '9394'}.locator('td').nth(0).locator('input').check();

However, as you can see in the above example, it will select the row with the phone number that ends in 9394 or it will give me an error because it returned multiple rows.

My other thought is to do something like:

page.locator('table tbody tr td:nth(1)', {hasText: '9394'}). ???

I'm just not sure how to get back to the previous td input in the row to click the checkbox.

1 Answer 1


I received the answer on SO: https://stackoverflow.com/questions/67113379/does-javas-stream-filter-create-a-new-list-or-point-to-the-original-list

From corschdi:

Instead of using hasText, you can also define a sub-locator that the elements have to contain and reference it using has.

Assuming the id is always in the second column, you can use the following code:

const idLocator = page.locator('td:nth-child(2)', { hasText: '9394' });
const checkbox = page.locator('table tbody tr', { has: idLocator }).locator('input[type=checkbox]');
await checkbox.check();

My only addition is that the "sub-locator" (idLocator in the example above) must be a partial locator and not a full locator. For example:

const table = page.locator('table');
const rows = table.locator('tr');
const idLocator = rows.locator('td', {hasText: '9394'});
const checkbox = table.locator('tr', {has: idLocator});

checkbox would attempt to locate on table >> tr >> table >> tr >> td :has-text('9394'), which is obviously wrong.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.