Playwright 实战：Vue 单页应用里那些「点不动」的按钮

做浏览器自动化时，最容易卡住的往往不是登录和抓包，而是「元素看得见、坐标也对，click() 就是不触发任何请求」。这篇记录几个实际踩到的坑和排查思路。

一、click() 无效：框架的事件委托

现象：Playwright 的 element.click() 返回成功，但网络面板里一个请求都没有。

原因是单页应用普遍做了事件委托，监听器挂在外层容器上，而部分组件库只在特定的合成事件路径下才派发。此时用合成事件往往能绕过：dispatchEvent 一个 cancelable 的 MouseEvent。

排查方法：先抓包确认「零请求」，再对比人工点击时的请求，就能快速定位是点击没送达，还是后端接口本身有问题。

二、表单值填了但框架看不到

直接给 input.value 赋值不会触发 Vue/React 的数据绑定，提交时框架读到的仍是空值。

正确做法是用 Playwright 的 fill()，它会把完整的输入事件序列派发出去。如果必须用 JS 赋值，需要同时派发 input 和 change 事件。

三、TinyMCE 富文本编辑器

这类编辑器的真实内容在一个 iframe 里，且自带模板。定位方式是先用 frame_locator 定位 iframe，点击让它获得焦点，再用键盘输入，这样编辑器的内部模型才会同步。

四、SPA 的登录态握手

很多站点的会话凭据不是登录接口直接返回的，而是登录成功后由前端再发一次握手请求种下的。如果一登录就立刻调用业务接口，很可能拿到未登录错误。稳妥的做法是轮询等待关键 Cookie 出现，而不是固定 sleep。

五、必填项藏在看不见的地方

提交按钮置灰时，不要只看显式标了星号的字段。把页面滚到底，往往还有「我已阅读并同意」这类声明勾选框，它们的 input 通常被隐藏，要点外层容器才生效。

小结

自动化调试的核心是「先确认请求有没有发出」：零请求说明问题在前端交互层，有请求说明要去比对参数和鉴权。把这两类问题分开，排查会快很多。