Laravel Dusk测试点击单选按钮不触发x-on:change、x-model问题

• Laravel Dusk 内置的radio()、check()、click()方法直接操作单选按钮input元素时，仅会修改元素的checked属性实现视觉选中效果，不会主动触发原生的change事件。你代码中绑定的Alpine.js x-on:change事件、Livewire wire:model绑定均依赖原生change事件触发执行，因此会出现视觉选中但功能未触发的问题。
• 部分场景下如果前端对原生单选按钮做了样式美化（比如将原生input设为透明度0、仅展示自定义样式的label），ChromeDriver直接操作隐藏的input元素时也可能出现事件冒泡异常，无法被上层框架监听到。

推荐两种可行方案，优先选第二种，更贴合真实用户操作逻辑：

方案1：手动触发change事件 #

在调用radio方法选中选项后，主动执行JS触发原生change事件，注意开启事件冒泡保证上层框架可以监听到：

{
    // $result取值为fail或pass
    $resultUcfirst = ucfirst($result);
    $duskSelector = '@qc-result-' . $result;
    $browser->radio($duskSelector, $resultUcfirst)
            ->script("document.querySelector('#qc-result-{$result}').dispatchEvent(new Event('change', { bubbles: true }));");
}

方案2：点击对应label触发选中（更推荐） #

普通用户操作时不会直接点击极小的原生单选框，而是点击关联的label文本实现选中，点击label会自动触发对应input的change事件，不存在事件触发异常问题：

{
    // $result取值为fail或pass
    $inputId = 'qc-result-' . $result;
    $browser->click("label[for='{$inputId}']");
}

这个方案不需要额外手动触发事件，执行后Alpine和Livewire的绑定逻辑都会正常运行。

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