在自动化操作如 Google Finance 等现代 Web 应用时，直接赋值 element.value = "xxx" 常无效——因框架（如 React）依赖事件驱动更新状态，需模拟真实用户输入并触发完整事件链。
在自动化操作如 google finance 等现代 web 应用时，直接赋值 `element.value = "xxx"` 常无效——因框架（如 react）依赖事件驱动更新状态，需模拟真实用户输入并触发完整事件链。
现代单页应用（SPA）如 Google Finance 多采用前端框架（React/Vue）构建，其输入控件往往不响应简单的 element.value = ... 赋值，因为视图更新由框架内部状态（state）驱动，而非原生 DOM 属性。即使 DOM 属性被修改，框架监听的 input、change 等事件未被正确触发，UI 也不会同步更新。
✅ 正确做法：模拟真实输入事件链
必须按用户实际操作顺序，依次派发以下事件，并确保 value 设置与事件严格同步：
- keydown → keypress → 更新 el.value → input → change → keyup
- 每步之间建议加入微小延迟（如 await sleep(200)），避免事件被浏览器合并或忽略
- 使用 dispatchEvent() 显式触发，且所有事件需设置 { bubbles: true } 以穿透 Shadow DOM 或事件代理层
以下是经验证的可靠实现：
async function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function sendKeys(el, str) {
let value = '';
const keys = str.split('');
for (const key of keys) {
value += key;
// 1. keydown
el.dispatchEvent(new KeyboardEvent('keydown', {
key, bubbles: true, cancelable: true
}));
await sleep(150);
// 2. keypress（部分框架仍依赖此事件）
el.dispatchEvent(new KeyboardEvent('keypress', {
key, bubbles: true, cancelable: true
}));
await sleep(150);
// 3. 更新 DOM value（关键！必须在 input 事件前）
el.value = value;
// 4. input（核心：通知框架值已变更）
el.dispatchEvent(new Event('input', { bubbles: true }));
await sleep(150);
// 5. change（用于表单提交校验等场景）
el.dispatchEvent(new Event('change', { bubbles: true }));
await sleep(150);
// 6. keyup
el.dispatchEvent(new KeyboardEvent('keyup', {
key, bubbles: true, cancelable: true
}));
await sleep(150);
}
return true;
}
// 针对 Google Finance：存在多个匹配元素（含隐藏/冗余节点），需批量处理
const candidates = document.querySelectorAll("input[class='Ax4B8 ZAGvjd']");
if (candidates.length > 0) {
// 逐个输入（通常仅首个为可见可交互元素）
await Promise.all(
Array.from(candidates).map(el => sendKeys(el, "RELIANCE"))
);
// 输入完成后模拟回车提交（可选）
candidates[0]?.dispatchEvent(
new KeyboardEvent('keydown', {
key: 'Enter', code: 'Enter', keyCode: 13, bubbles: true
})
);
} else {
console.warn('No matching input element found.');
}⚠️ 关键注意事项
- 不要仅用 querySelector：Google Finance 等页面常渲染多个同名 <input>（如搜索框+辅助输入），应优先使用 querySelectorAll 并遍历验证可见性（可通过 el.offsetParent !== null 判断）。
- 避免 disabled 移除即用：即使移除了 disabled 属性，若框架绑定逻辑未重新激活，仍可能无效；事件模拟才是根本解法。
- 警惕防自动化检测：高频/无延迟的 dispatchEvent 可能触发反爬策略，生产环境建议加入随机延迟与鼠标移动模拟。
- 框架差异提示：Vue 项目还需额外触发 el.dispatchEvent(new CustomEvent('update:modelValue', {...}))；React 则更依赖 input + change 事件组合。
总结：DOM 属性赋值只是“表面修改”，而现代前端框架要求你成为“事件导演”——完整复现用户行为，才能真正驱动视图更新。
立即学习“前端免费学习笔记（深入）”；
