如何在 Dusk 测试中 select 多个复选框

Question

我正在将 VueJS 与 bootstrap-vue, and using Laravel Dusk 一起使用，我需要在使用复选框 select 每行的模态中测试 table。在这种特殊情况下，有多行带有复选框，我需要 select 表单中的所有复选框，然后提交表单。除了选中复选框外，我的测试在所有方面都可以很好地使用模态；无论我尝试什么，我都无法使用 check()（或 click()）方法来检查比第一个更多的方法。我试过了

->check("input[type=checkbox]")

并使用 name

->check("input[name='my-custom-name']")

但我仍然只检查了第一项。基于 this，我尝试了

$checkboxes = $browser->driver->findElements(WebDriverBy::name('my-custom-name[]'));
for ($i = 0; $i <= count($checkboxes); $i++) {
    $checkboxes[0]->click();
}

但即便如此，也只会选中第一个复选框。 select table 中的所有复选框我需要做什么？

Answer 1

答案是首先，使用行索引将自定义 dusk 选择器添加到复选框：

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

其次，在测试中使用选择器。

->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');
     })

是的，如果使用循环而不是单独列出每个选择器，代码可能会更简洁一些，但这行得通。

如何在 Dusk 测试中 select 多个复选框

How to select multiple checkboxes in Dusk test

laravel

testing

checkbox

automated-tests

laravel-dusk