企业官网建设流程全解析

从 40 分钟点错 5 次到 2 秒完成:把网页自动化操作提速 100 倍的三个台阶

先说结论

--------

同样是"自动化操作一个网页平台"(填表、传图、发评论、提交表单),

我用截图+点坐标的方式:40 分钟点错 5 次;

换成 API 直连后:单次操作 2 秒,且每步有明确成功/失败反馈。

这篇文章讲这三层方案(坐标点击 → DOM 选择 → API 直连)的适用场景、

实测数据、和选择标准。如果你也在做 RPA / 浏览器自动化 / 平台批处理,

这篇能帮你少走一整条弯路。

第一层:截图 + 看坐标 + 点击(最原始,最不靠谱)

------------------------------------------------

最初的方案是:截屏 → 看图找目标 → 算像素坐标 → xdotool 点击 → 再截图验证。

实测的血泪数据:

操作一个下拉筛选器:点击了 40 分钟,点错 5 次

(点到了错误的筛选项,而且"看起来点上了")

每次操作耗时:30+ 秒(截图→识别→点击→再截图的循环)

文件选择器场景:卡死(要手输路径,富文本编辑器还会吞 Tab 键)

图片粘贴:时灵时不灵(剪贴板格式稍有问题就失败)

为什么这么脆?因为坐标是绝对的:窗口一移动、布局一变、滚动条位置一改,

昨天的坐标今天就点错。而且"点了"和"点对了"无法从动作本身判断,

只能再截图看——这就是为什么 40 分钟里错 5 次都发现不了。

第二层:DOM 选择器(headless 浏览器,布局无关)

------------------------------------------------

换用 Playwright 之后,一切都用"选择器"而不是坐标:

按名称: input[name=username]

按占位符: input[placeholder*="手机"]

按可见文本: text=提交 / button:has-text('登录')

按角色: role=button

关键优势:

- 布局变化、窗口遮挡、分辨率全都不影响(选择器描述的是"元素是什么",不是"在哪")

- headless 运行,不抢用户焦点

- 每步有返回值,失败立即报错(不会"以为点上了")

- **文件上传用 set_input_files(),直接绕过文件选择器 GUI** ——

这一条直接消灭了第一层最头疼的场景

实测:填一个含用户名/密码的表单 + 读回验证,全程 3 秒。

踩坑记录两条:

1. Playwright 的 Firefox 默认走系统代理,国内平台会连不上。

修法:launch 时加 firefox_user_prefs={"network.proxy.type": 0}

2. file:// 页面跨域会话限制多,改用本地 http 服务承载测试页更稳。

第三层:API 直连(根本不开浏览器,2 秒完成)

------------------------------------------------

做到第二层其实已经能用了,但真正质变的是发现:**大多数平台的网页操作,

底层就是几个 HTTP API**。浏览器只是它们的一层很脆的外壳。

方法(以任意平台为例):

1. 打开平台页面,下载它的 JS bundle(在源码里找 /static/js/app.xxx.js 这类入口)

2. 在 JS 里全局搜 url:" 或 "/api/ —— 能拿到完整的接口清单

3. 找到登录 token 的存放位置(通常在 cookie 或 localStorage)

4. 用 curl 模拟请求,逐个验证

实测同一个平台的三类操作:

操作 坐标点击 API 直连

提交表单 3-5 分钟/次 1.5 秒/次

发条带图评论 反复失败 40 分钟 2 秒(传图 1 秒 + 评论 1 秒)

查询状态 要点进多层页面 0.5 秒(GET 一次)

而且每一步的 JSON 响应就是天然的成功/失败证据——不存在"以为点上了"。

图片类操作的 API 姿势(通用):先传图拿 URL,再把 URL 以 <img> 标签

内嵌进富文本内容里提交。比剪贴板粘贴稳定得多。

三层方案怎么选(决策树)

----------------------

1. 先找 API:抓包 / 读 JS bundle / 看手机端接口

有 API → 直接调,不开浏览器(首选,最快最稳)

2. 没有 API → 用 DOM 选择器(headless 浏览器)

90% 的交互都能搞定,文件上传也有标准解法

3. 只有实在没办法(登录框有强校验、必须过真实 UI 的场景)→ 坐标点击

即使这样也建议:鼠标只做粗定位,焦点移动用 Tab 键

(实测:纯坐标比"鼠标+Tab"的误点率高一个数量级)

一句总结

--------

浏览器能看到的东西,先问一句"它背后是不是一个 API";

能走 API 就别碰 UI;必须碰 UI,就用选择器而不是坐标。

坐标是"猜",选择器是"查",API 是"直连"——自动化可靠性的三个层级,

本质上差在【你对目标的理解深度】,而不是工具。

---

*本文为方法论文,所有平台细节已脱敏。文中数据来自本机实测记录。*