网页自动化踩过的 5 个坑：从登录到发布，我用 Playwright 跑通了一条流水线

这两天我在做一件很朴素的事：让一台服务器每天自动完成一次网页操作——登录、点签到、发一篇文章。听起来简单，实际做下来踩了五个坑，每一个都不是「查文档就能解决」的那种。

记录下来，给同样在用 Playwright 做页面自动化的人省点时间。

坑一：编辑器在 iframe 里，而且改 DOM 没用

第一版我是这么填正文的：

page.evaluate("text => { document.querySelector('[contenteditable]').innerText = text }", body)

页面上字数统计确实变了，看起来成功了。但一点发布，提示「正文内容不能为空」。

原因：现代编辑器（CodeMirror 6、Monaco 这类）把内容存在自己的数据模型里，DOM 只是渲染结果。你改 DOM，模型没变，提交时读的是模型。

正确做法是模拟真实输入：

editor = page.frame_locator("iframe[src*='editor']")
editor.locator(".cm-content").click()
page.keyboard.insert_text(body)

而且编辑器往往嵌在 iframe 里，必须先定位到 frame。判断方法很简单：page.frames 里多出来的那个带编辑器地址的，就是它。

坑二：自定义勾选框，click() 点不动

很多站点的复选框是假的：真实 <input type=checkbox> 被隐藏，外面套一层 span 或 div 用 CSS 画出来。

你 querySelector('input[type=checkbox]').click()，事件触发在隐藏元素上，框架的状态没更新，提交时依然判定「未勾选」。

解法：点可见的那层。

page.get_by_text("我同意", exact=False).click()

或者找到包裹它的 label 点击。判断依据：点完之后，如果按钮从灰色变亮，说明真的勾上了；按钮没变，就是没勾上。

坑三：JS 点击 vs 原生点击

我一开始图省事，用 JS 强制点击：

page.evaluate("() => document.querySelector('#submit-btn').click()")

有的按钮吃这一套，有的不吃。不吃的那种，页面上什么反应都没有，你以为是网络问题，反复重试，其实按钮压根没被按下。

判断方法：点击后立刻看页面状态有没有变化（比如按钮变成「处理中」、出现 loading）。如果毫无变化，八成是没点中。

可靠做法：优先用 Playwright 原生点击，它走的是真实鼠标事件；

page.get_by_text("登录/注册", exact=True).last.click(timeout=8000)

原生点击失败（元素在视口外、被遮挡）时，再用 JS 兜底。顺序不能反。

坑四：会话过期，验证码发了但没用

这个坑最隐蔽。

流程是：打开登录页 → 点「获取验证码」→ 用户收到短信 → 填入 → 提交。

测的时候，我第一次发码成功了，填入后登录也成功了。第二次隔了一会儿发码，用户收到了短信，填进去却提示「会话已过期，请重新发送验证码」。

原因：登录页在浏览器里停留太久，服务端那边的登录会话失效了。这时候再点「获取验证码」，生成的验证码绑在一个已经死掉的会话上，看着发出去了，实际无效。

解法：每次发码前重新加载页面。

def goto_login(page):
    page.goto(LOGIN_URL)
    page.wait_for_timeout(6000)
    # 重新切 tab、填账号
    ...

def send_code(page):
    goto_login(page)          # 先重建会话
    page.get_by_text("获取验证码").click()

多花几秒加载，但保证每次的验证码都有效。

坑五：风控把自动化浏览器当成异常设备

同一套代码，本地跑得好好的，换到服务器上登录直接报错：

系统异常，检测到您的设备不安全，请更换设备登录
(errorCode=408)

第一反应是 IP 问题——云服务器 IP 被标记了。于是我把它搬到家庭宽带的机器上，结果一模一样。

所以不是 IP，是浏览器指纹：navigator.webdriver、缺少插件列表、CDP 连接特征、Canvas 渲染差异。风控识别的是「这是一个自动化浏览器」，跟你在哪运行关系不大。

处理思路，按代价从低到高：

1. 接受它：改用「人工过一次验证码/扫码」的混合模式，之后靠会话维持，不反复登录
2. 降低自动化特征：关掉 AutomationControlled 标志、用持久化的 user-data-dir、避免每次全新 context
3. 不要硬刚：伪造指纹属于对抗风控，短期可能有效，长期不稳定，而且账号风险自负

我最后选了第 1 条：登录这一步交给人工，其余全自动。稳定，也不折腾。

最后一点体会

网页自动化的难点，从来不是「怎么点按钮」，而是怎么判断自己真的点到了。

所以每一段关键操作后面，我都会加一个校验：字数变了吗？按钮变色了吗？URL 跳转了吗？页面出现预期文案了吗？

没有校验的自动化，失败时你只会看到「没成功」，然后一遍遍重试，浪费大量时间。

把这五个坑记住，能省掉你一半的调试时间。