← Back to Discord Forum

Locate and check a input=checkbox inside a table

Hi everyone I'm having a hard time trying to check/click a checkbox, this is inside a dynamic table so when the page load the table is hidden until some parameters are passed, then the table is shown with two columns | checkbox | Some data | I tried with role, label, id, name, css, xpath but I have no luck there are other checkbox in the page and theres no issues with those only with the ones inside the table, it seems like is looking for it because I see the page scrolling up and down but never finds it.

I saw a similar issue to this but was solved on 1.33 and I'm on 1.38

Some code that I use to search await page.locator("[name='student[]']").check() await page.locator('//*[@id="student_183867"]').check()

const checkbox = page.locator('table tbody tr', { has: idLocator }).locator('input[type=checkbox]');
await checkbox.check();```

`await page.getByRole('row', { name: 'userI)' }).locator('#student_183867').check()`

**This is the element:**
```<input type="checkbox" class="custom-control-input single_student_select select_student" data-group="0" data-groupid="" name="student[]" id="student_183867" value="183867">```

Attached image of the table

This thread is trying to answer question "How can I locate and check a checkbox inside a dynamic table on a webpage?"

6 replies

You could also write a locator to get a list of all table rows, then loop through each item of the list and apply further locator operations to find the row you're interested in, and interact with the checkbox

since I filter the content before, I used this: const last = await tableLocator.locator('tr').first().locator(':scope', { hasText: 'userI' }).locator('td.select_student').click() but no luck, tried this on the example from the link and is working


Hello Stein, firstly I would advise you to put everything in 1 locator. This way you can see what you are selecting while your PW browser is open. I have similar tests and if I understand correctly:

First you can assert that the table is empty with something like expect(await page.locator("tbody tr").count()).toBe(0); after input you can add an waitfor the API that is bringing you the data for the table then you can assert the count again expect(await page.locator("tbody tr").count()).toBe(whatever number); then you can start with the checkboxes await page.locator("tbody tr td:first-child").check(); or something like that.

Yes I tried that too I have table A and B but is not working I use the same code to click on a checkbox in table B and is working but not in table A, I was looking and the only difference is after the td theres a div inside and then the input=checkbox

Table A: table#request_students tbody tr td:first-child #student_183867 not working Table B: table#sessions-table tbody tr td:first-child #delete_session_253475 works


I am off in 30 min if you want I can take a look, at your app. will be much faster. Just call and share a screen

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.