Laravel Dusk 为远程拉取数据的Select2设置测试选中值

• 此前调用的type('@item-type-id-select','Figures')直接作用在被Select2隐藏的原生<select>元素上，既不会触发Select2组件自身的交互逻辑，也没法唤起它的远程AJAX请求流程
• 远程分页返回的选项是异步加载插入DOM的，直接对原生隐藏select赋值的操作，根本不会被Select2组件识别同步，自然无法达成选中效果

按照Select2组件的实际交互流程模拟用户操作即可，不需要直接操作原生select元素：

1. 唤起Select2组件，触发远程AJAX请求
   直接点击Select2渲染出来的选择触发区（也就是用户实际能看到的选择框部分），对应DOM选择器一般为.select2-selection。如果页面存在多个Select2组件，可以先通过原生select的选择器@item-type-id-select锚定所属的容器范围，避免点错其他组件：

   $browser->click('@item-type-id-select')
       ->parent() // 跳转到原select的父级容器范围，缩小定位选择器的匹配范围
       ->find('.select2-selection')
       ->click();
   

2. 等待组件初始化完成，输入搜索内容匹配目标选项
   唤起下拉框后，Select2会自动加载搜索输入框，等这个输入框渲染完成后，输入目标选项的文本Figures，触发远程接口的搜索请求：

   $browser->waitFor('.select2-search__field')
       ->type('.select2-search__field', 'Figures');
   

3. 等待异步返回的目标选项渲染完成
   因为远程接口是异步响应的，需要主动等待目标选项文本出现在Select2的下拉结果区域里，这里可以根据接口响应速度调整等待超时时长：

   // 最长等待10秒，直到结果区域出现Figures文本
   $browser->waitForTextIn('.select2-results', 'Figures', 10);
   

4. 点击目标选项完成选中
   等目标选项渲染在DOM中后，直接点击对应选项元素，Select2会自动把匹配的选项值同步到原生隐藏select上，完成选中状态设置：

   $browser->click('.select2-results__option:contains("Figures")');
   

5. 校验最终选中效果
   不要去校验原生select的内容，直接校验Select2渲染的选中展示文本，匹配用户实际看到的页面效果即可：

   $browser->assertSeeIn('.select2-selection__rendered', 'Figures');
   

• 不要尝试直接对原生<select>元素调用select()、type()这类操作方法，Select2的组件状态完全由自身渲染的DOM维护，直接操作原生元素不会触发组件的状态同步
• 如果目标选项不在第一页分页返回的结果中，可以在下拉结果容器.select2-results__options上模拟滚动操作，触发分页加载直到目标选项出现在DOM中再执行点击
• 全局定位Select2相关元素时一定要缩小匹配范围，避免因为页面存在多个同结构的Select2组件，导致操作错位到其他元素上

内容的提问来源于stack exchange，提问作者Thomas