Playwright的fill()不触发Vue/React更新，因仅设value不派发input事件；应改用evaluate()手动赋值并dispatchEvent，同时处理disabled/readonly属性及防bot字段，并等待JS框架就绪后再操作。
fill() 不触发 Vue/React 数据更新？因为没发 input 事件
Playwright 的 fill() 方法本质是清空 + 输入文本，但它只操作 DOM 的 value 属性，不触发浏览器原生的 input、change 等事件。而 Vue、React 等框架依赖这些事件来同步 state —— 所以你看到输入框有值，但提交时字段仍是空或旧值。
- 别用
page.fill()直接填受控组件（尤其是带 v-model 或 useState 的表单） - 改用
page.evaluate()手动赋值并派发事件：page.evaluate(() => { const el = document.querySelector('input[name="username"]'); el.value = 'admin'; el.dispatchEvent(new Event('input', { bubbles: true })); }); - 如果字段被设为
readonly或disabled，先在evaluate()里清除：el.readOnly = false; el.disabled = false;
为什么 wait_for_selector() 等到了元素，fill() 还失败？
很多动态表单 DOM 节点早就存在了，但 JS 尚未完成初始化：input 可能被 Vue 挂载前设为 disabled，或者 React 表单还没挂载监听器。此时 wait_for_selector() 成功，但 fill() 会因元素不可交互而超时或静默失败。
- 优先用
page.wait_for_function()等 JS 就绪信号，比如：page.wait_for_function("() => window.__VUE_DEVTOOLS_GLOBAL_HOOK__ !== undefined")（Vue 场景）或page.wait_for_function("() => typeof window.React !== 'undefined'") - 配合更严格的选择器，过滤掉无效状态：
"input[name='email']:enabled:not([readonly])" - 避免用
page.wait_for_timeout(1000)硬等 —— 渲染时机不稳定，正式代码里必须替换成可验证的状态信号
防 bot 字段或隐藏 token 导致填完也提交失败？
有些登录页会插入隐藏字段（如 <input type="hidden" name="token" value="xxx">），其值由 JS 动态生成，且有时效性。只填 visible 字段，后端校验 token 失败，整个请求就 400 或 403。
- 不要跳过这些字段 —— 用
page.eval_on_selector()或page.evaluate()提取它们的当前值：page.eval_on_selector("input[name='token']", "el => el.value") - 若 token 来自 JS 函数（如
window.genToken()），直接调用：page.evaluate("() => window.genToken()") - 注意时间戳类字段（如
ts），可能需同步获取：page.evaluate("() => Date.now()")
点击按钮没反应？可能根本没触发绑定逻辑
page.click() 成功返回，但网络面板无请求、后端无日志，常见原因是按钮绑定了 event.preventDefault()，或 JS 要求前置 focus、校验通过、甚至鼠标移动轨迹。
立即学习“Python免费学习笔记（深入）”；
- 点击前加
page.locator("button#login").focus()，再click() - 检查按钮是否含
data-loading类或禁用状态，用page.wait_for_function()等它变为可点击：page.wait_for_function("() => !document.querySelector('button#login').hasAttribute('disabled')") - 极端情况（如 Cloudflare 防护页）需模拟真实鼠标移动：
page.mouse.move(x, y); await page.mouse.down(); await page.mouse.up();
