为什么伪造真实的浏览器事件不起作用

Source: Dev.to

问题

我尝试使用 JavaScript 编程触发一个 typeahead 下拉菜单。
虽然派发 input 事件让输入框中出现了值，但 UI 并没有响应：下拉菜单从未打开，组件的状态也没有更新。

为什么事件会被忽略

浏览器通过 Event 接口的只读属性 isTrusted 来防止合成事件。

• isTrusted: true – 由用户代理生成（真实的人类点击或物理按键）。
• isTrusted: false – 通过 EventTarget.dispatchEvent() 派发。

由于 isTrusted 不能手动设置为 true，下拉菜单的安全逻辑会忽略这些“伪造”的事件。

解决方案

与其尝试伪造受信任的事件，不如利用 Vue 的响应式系统：

1. 直接更新数据模型。
2. 根据新的状态以编程方式设置 typeahead 选项。

通过操作组件的状态而不是 DOM 事件，下拉菜单能够如预期工作。

测试替代方案

当自动化测试需要真正的受信任事件时，需要超出标准沙箱的做法：

• Chrome DevTools Protocol (CDP) – 将事件注入浏览器的硬件管道，从而产生 isTrusted: true。
• Playwright、Cypress 或类似的自动化工具 – 正确处理类似用户的交互。

如果无法伪造用户权限，请避免强行操作 DOM，改用这些工具或框架的原生绑定和生命周期方法来实现所需行为。