如何用JavaScript触发输入框事件？Selenium ShadowRoot下拉输入问题

针对你遇到的ShadowRoot内输入框设置value后页面不识别的问题，除了input和change事件，还可以尝试以下几种事件触发方式，结合组件的交互逻辑（点击弹出下拉）来模拟真实用户操作：

1. 先模拟点击展开下拉，再触发完整事件序列 #

这类自定义组件通常依赖点击事件初始化下拉状态，先触发点击再设置值，能让组件正确感知状态变化：

// 1. 点击输入框，展开下拉菜单
const inputEl = document.querySelector("element").shadowRoot.querySelector("input");
inputEl.dispatchEvent(new Event('click', { bubbles: true }));

// 2. 设置输入框值
inputEl.value = "1 year";

// 3. 触发完整的焦点+输入+变更事件
inputEl.dispatchEvent(new Event('focus', { bubbles: true }));
inputEl.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
inputEl.dispatchEvent(new Event('change', { bubbles: true }));
inputEl.dispatchEvent(new Event('blur', { bubbles: true }));

2. 模拟输入法完成事件（compositionend） #

部分组件会监听输入法完成事件来确认输入内容，尤其是处理带空格或特殊格式的文本时：

const inputEl = document.querySelector("element").shadowRoot.querySelector("input");
inputEl.value = "1 year";

inputEl.dispatchEvent(new Event('input', { bubbles: true }));
inputEl.dispatchEvent(new Event('compositionend', { bubbles: true }));
inputEl.dispatchEvent(new Event('change', { bubbles: true }));

3. 直接触发下拉项的选择事件 #

如果组件是通过选择<li>项来同步输入框值，直接触发下拉项的click事件会更可靠：

// 找到ShadowRoot内的目标下拉项
const dropdownItem = document.querySelector("element").shadowRoot.querySelector("ul li:contains('1 year')");
// 触发下拉项的点击事件
dropdownItem.dispatchEvent(new Event('click', { bubbles: true }));

// 可选：同步触发输入框的change事件
const inputEl = document.querySelector("element").shadowRoot.querySelector("input");
inputEl.dispatchEvent(new Event('change', { bubbles: true }));

4. 使用InputEvent替代普通Event #

部分现代组件会监听更具体的InputEvent而非通用Event，带上data参数更贴近真实输入行为：

const inputEl = document.querySelector("element").shadowRoot.querySelector("input");
inputEl.value = "1 year";

inputEl.dispatchEvent(new InputEvent('input', {
  bubbles: true,
  cancelable: true,
  data: "1 year"
}));
inputEl.dispatchEvent(new Event('change', { bubbles: true }));

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