Laravel Dusk 动态遍历并选择下拉框所有选项的正确实践

本文详解如何在 Lara vel Dusk 中可靠地动态选择 元素的所有可选项，避免直接操作 DOM 元素导致的不稳定问题，并提供安全、可维护的实现方案。

在 Lara vel Dusk 测试中，处理下拉框选择是个常见任务。但如果你试图通过 $browser->elements() 获取所有 标签并挨个执行 click()，很可能会掉进坑里。这种做法不仅不推荐，而且失败率相当高。

问题出在哪里？关键在于，Dusk 的 click() 方法是为按钮、链接这类交互式元素设计的。而 标签本身在现代浏览器中往往不可直接点击，特别是当它们被 Shadow DOM 或者像 Select2 这样的 UI 组件封装之后。更重要的是，直接对 调用 click() 会绕过表单控件的原生事件机制，导致关键的 change 或 input 事件无法触发。结果就是，页面状态可能没有同步更新，后续的断言自然会失败。

那么，正确的做法是什么？答案是充分利用 Dusk 内置的 ->select() 方法。这个方法模拟了真实用户的操作流程：它会先聚焦到

元素，然后选择指定的值，并确保所有相关的事件都被正确触发。这样一来，无论是 Vue、React 还是其他前端框架，都能正常响应这次选择操作。

推荐实现方式（稳定 & 可维护）

如果下拉框的选项值是已知的——比如可以从数据库或配置文件中预先加载——那么直接遍历这些值是最清晰的做法。

// 示例：从数据库动态获取所有有效选项值
$values = DB::table('variants')->pluck('id')->toArray();
foreach ($values as $value) {
    $browser
        ->select('#js-select-variant-7', (string) $value) // 注意：value 值需为字符串类型
        ->pause(5000); // 暂停便于观察（生产测试建议用 waitUntil 或 assert 而非固定 pause）
}

注意事项

• ->select() 的第二个参数必须严格匹配 中的 value 属性值，而不是选项的显示文本，并且类型必须是字符串。
• 尽量避免使用 sleep()，它会阻塞主线程且不够可靠。优先考虑 ->waitUntil()、->assertSee() 或 ->whenA vailable() 这类异步等待方法。
• 如果需要在每次选择后验证页面的响应，可以在循环内加入断言：

  ->select('#js-select-variant-7', $value)
  ->waitForText('Loaded variant #' . $value)
  ->assertSee('Variant ID: ' . $value);

• 对于那些没有明确 value 属性的 （仅靠文本内容区分），最佳实践是先去规范化 HTML 结构，确保每个选项都显式声明了 value。这既是语义化的要求，也能让自动化测试更稳定。

进阶：动态读取所有 option 的 value（仅当无法预知时）

在某些场景下，选项值无法提前获知，例如它们依赖前端 Ja vaScript 动态渲染。这时，可以借助 Dusk 的 ->script() 方法安全地提取所有值。

$values = $browser->script("return Array.from(document.querySelectorAll('#js-select-variant-7 option')).map(o => o.value);");
foreach ($values as $value) {
    if ($value) { // 过滤空值（如 placeholder 选项）
        $browser->select('#js-select-variant-7', $value)->pause(3000);
    }
}

总结一下核心原则：在 Lara vel Dusk 测试中，应始终优先使用框架封装好的语义化方法，如 select()、type()、check()，而不是去直接操作底层 DOM。这样做不仅能大幅提升测试的稳定性，还能让测试行为更贴近真实用户，从而真正发挥出浏览器自动化测试的价值。