如何在Laravel Dusk测试中选择vue-multiselect组件的选项？

我之前在项目里也碰到过这个问题——vue-multiselect作为自定义组件，Dusk默认的表单操作方法确实没法直接适配，不过试了几个方法都挺靠谱的，分享给你：

方法一：模拟用户点击操作（最接近真实场景） #

vue-multiselect的交互逻辑是先触发下拉展开，再选择选项，我们可以用Dusk的click和waitFor来模拟这个流程：

1. 首先点击组件的输入区域或触发按钮展开下拉列表：

   // 点击输入框触发下拉（大部分场景适用）
   $browser->click('.vue-multiselect__input');
   // 如果组件是带下拉箭头的，也可以点击箭头按钮
   // $browser->click('.vue-multiselect__toggle');
   

2. 等待选项列表渲染完成，再点击目标选项：

   // 等待下拉内容容器出现
   $browser->waitFor('.vue-multiselect__content')
           // 通过选项文本定位并点击，替换成你的目标选项文本
           ->click('.vue-multiselect__option:contains("你的选项文本")');
   

如果选项文本有重复，或者不好用文本定位，可以通过选项的属性来精准匹配：

// 比如选项有value属性，直接用属性选择器
$browser->click('.vue-multiselect__option[value="目标选项的值"]');

方法二：直接操作Vue实例（适合复杂场景） #

如果你的组件是异步加载选项，或者点击操作容易出问题，可以直接通过Dusk的script方法操作vue-multiselect的Vue实例，直接设置选中值：

// 针对单选组件，替换成你的目标选项值
$browser->script('document.querySelector(".vue-multiselect").__vue__.$emit("input", "目标选项值");');

// 如果是多选组件，传入数组即可
$browser->script('document.querySelector(".vue-multiselect").__vue__.$emit("input", ["选项值1", "选项值2"]);');

注意事项 #

• 如果组件是异步加载选项的，一定要用waitFor确保选项元素已经渲染完成，避免测试超时：

  $browser->waitFor('.vue-multiselect__option');
  

• 如果你的项目给vue-multiselect加了自定义类名，记得把示例中的.vue-multiselect替换成你实际的类名。

内容的提问来源于stack exchange，提问作者Luiz Manoel Figueiredo