How to select multiple checkboxes in Dusk test - laravel

Question

I am using VueJS with bootstrap-vue, and using Laravel Dusk, I need to test a table inside a modal that uses a checkbox to select each row. In this particular case, there are multiple rows with checkboxes, and I need to select all of the checkboxes in the form and then submit the form. My test works fine with the modal in every way except checking the checkboxes; no matter what I try, I can't get the check() (or click()) method to check more than the first one. I've tried
->check("input[type=checkbox]")
and using the name
->check("input[name='my-custom-name']")
but I still only get the first item checked. Based on this, I tried something like
$checkboxes = $browser->driver->findElements(WebDriverBy::name('my-custom-name[]'));
for ($i = 0; $i <= count($checkboxes); $i++) {
$checkboxes[0]->click();
}
but even that only checks the first checkbox. What do I need to do to select all of the checkboxes in the table?

Answer 1

The answer was to first, add a custom dusk selector to the checkbox using the row index:
<template #cell(selected)="row">
<b-form-checkbox
v-model="row.item.check"
#input="rowCheckboxClick($event, row.index, row.item)"
plain
:dusk="'my-custom-selector-' + row.index"
>
</b-form-checkbox>
</template>
and second, use the selector within the test.
->whenAvailable(new PursuitModelRestoreDeletedModal(), function(Browser $browser) {
$browser->waitForText('Click on the checkbox in the Select column')
->assertSee('My Modal Title')
->check('#my-custom-selector-0')
->check('#my-custom-selector-1')
->check('#my-custom-selector-2')
->check('#my-custom-selector-3')
->click('#ok-button');
})
Yes, the code could probably be a little cleaner with a loop instead of having each selector listed separately, but this works.