为什么单击单选按钮时 Laravel Dusk 测试不会触发 x-on:change() 或 x-model

Question

我有一个表单，里面有两个单选按钮，它们都有 x-models 和 x-on:change 功能。当 运行 一个 dusk 测试时，单选按钮看起来已被选中，但单击按钮时应该出现的基本功能没有出现。

我在 Dusk 测试中尝试了 click()、radio() 和 check()。

单选按钮：

                             <ul>
                                <li>
                                    <input wire:model.defer="qcResult"
                                           x-model="qcResult"
                                           x-on:change="toggleQcReasonSection()"
                                           dusk="qc-result-pass"
                                           id="qc-result-pass"
                                           type="radio"
                                           name="qc-result"
                                           value="Pass"
                                    >
                                    <label for="qc-result-pass"
                                           class="text-green-500 font-bold"
                                    >
                                        Pass
                                    </label>
                                </li>
                                <li>
                                    <input wire:model.defer="qcResult"
                                           x-model="qcResult"
                                           x-on:change="toggleQcReasonSection()"
                                           dusk="qc-result-fail"
                                           id="qc-result-fail"
                                           type="radio"
                                           name="qc-result"
                                           value="Fail"
                                    >
                                    <label for="qc-result-fail"
                                           class="text-red-500 font-bold"
                                    >
                                        Fail
                                    </label>
                                </li>
                            </ul>

    {
        // $result would be either fail or pass.
        $browser->radio('@qc-result-' .  $result, ucfirst($result));
    }

Answer 1

事实证明，页面中间的 x 数据是问题所在。最后将 x 数据移动到页面上的第一个 div 并修复了它。真正令人恼火的是，一切在本地和我们的测试服务器上都运行良好，当我们部署到 prod 时，它的行为与在测试中一样，就像 Alpine 甚至没有加载一样。一旦我们将 x 数据移动到页面顶部，它就像变魔术一样工作。