How to select multiple checkboxes in Dusk test

I am using VueJS with bootstrap-vue, and using 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?

wonder95

5 years ago

Level 5

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.

Please or to participate in this conversation.