时间戳

首页 > 解决方案 > 如何在 Dusk 测试中选择多个复选框

laravel - 如何在 Dusk 测试中选择多个复选框

问题描述

我正在使用带有bootstrap-vue 的VueJS ，并使用Laravel Dusk，我需要在模式中测试一个表格，该表格使用复选框来选择每一行。在这种特殊情况下，有多行带有复选框，我需要选择表单中的所有复选框，然后提交表单。除了选中复选框之外，我的测试在各个方面都可以很好地使用模态；无论我尝试什么，我都无法使用check()(or click()) 方法来检查比第一个更多的方法。我试过了

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

并使用name

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

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

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

但即使这样也只检查第一个复选框。我需要做什么才能选中表格中的所有复选框？

标签： laraveltestingcheckboxautomated-testslaravel-dusk

解决方案

答案是首先，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');
     })

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

推荐阅读