Laravel Dusk测试ElementUI选择组件问题求助

我之前用Vue+ElementUI开发项目时，也踩过这个一模一样的坑！ElementUI的el-select组件为了实现自定义样式，确实没有渲染原生的<select>标签，而是用只读<input>+底部弹出层的组合，所以Dusk自带的select()方法完全派不上用场。不过咱们可以模拟用户真实的操作流程来完成测试，下面是具体的实现方法：

核心思路：复刻用户操作流程 #

用户用el-select时，是先点击输入框展开选项，再点击目标选项，咱们在测试里就照着这个步骤来：

1. 触发下拉框展开 #

先找到el-select对应的输入框元素（通常是带.el-select__input类的只读input，或者外层的.el-select容器），调用Dusk的click()方法触发展开：

// 示例：通过组件的id定位，点击输入框展开下拉
$browser->click('#user-role-select .el-select__input');

2. 等待弹出层加载完成 #

因为下拉选项是动态渲染的，必须等它出现在页面上再进行下一步，用waitFor()方法等待弹出层容器（类名.el-select-dropdown）：

$browser->waitFor('.el-select-dropdown');

如果你的选项是异步加载的（比如从后端接口获取），可以用waitUntil()等待选项元素出现：

$browser->waitUntil(function ($browser) {
    // 等待至少有一个选项渲染完成
    return $browser->elements('.el-select-dropdown__item')->count() > 0;
});

3. 点击目标选项 #

找到弹出层里的目标选项（类名.el-select-dropdown__item），可以通过文本内容或者data-value属性定位并点击：

// 方式一：通过选项文本匹配
$browser->click('.el-select-dropdown__item', '管理员');

// 方式二：通过选项的data-value属性定位（更精准）
$browser->click('[data-value="admin"]');

完整测试代码示例 #

public function testUserRoleSelection()
{
    $this->browse(function ($browser) {
        // 访问目标页面
        $browser->visit('/user/create');
        
        // 展开角色选择下拉框
        $browser->click('#user-role-select .el-select__input');
        
        // 等待下拉选项加载
        $browser->waitFor('.el-select-dropdown');
        
        // 选择"管理员"角色
        $browser->click('.el-select-dropdown__item', '管理员');
        
        // 验证选择是否生效（比如检查input的显示文本）
        $browser->assertSeeIn('#user-role-select .el-select__input', '管理员');
    });
}

额外技巧：直接操作Vue实例（可选） #

如果你的测试场景不需要严格模拟用户行为，也可以直接通过Dusk的script()方法操作Vue组件的实例，直接设置选中值：

// 通过组件的DOM元素获取Vue实例，设置value
$browser->script('document.querySelector("#user-role-select").__vue__.value = "admin";');

这种方式更高效，但缺点是跳过了用户交互流程，适合一些复杂场景下的快速测试。

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