从点一下到跑起来:录制插件如何生成 Playwright / Selenium 脚本

写自动化脚本这件事，很多人的第一反应是：写代码不难，难的是定位元素。手动打开开发者工具、复制选择器、再填进脚本，一个简单的登录流程可能要折腾十分钟；页面一改版，选择器失效，又得从头再来。

这篇文章不讲抽象概念，讲一个具体的解法：一款 Chrome 扩展，把你在页面上的点击、输入、选择、滚动、跳转全部录下来，逐条确认后，直接导出成 Playwright、Selenium、Puppeteer 能跑的脚本。它叫 FlowRec。

真正消耗时间的，是把“我想点哪里”翻译成“脚本能定位哪里”。一个按钮可能有十种写法：id、class、data 属性、文本、路径……写错一种，回放就失败。

FlowRec 的做法是：点击元素时自动生成四类候选选择器（CSS、XPath、ID、文本），并且逐个做唯一性校验——页面上只能匹配到一个元素才算合格；不唯一就回退 XPath，并提示人工确认。等于把“复制选择器”升级成“批量生成 + 自动校验”。

FlowRec 的工作方式可以概括成一个四步闭环：

第一步，开始录制。页面右下角出现录制徽章，之后你对页面的点击、输入、下拉选择、按键、滚动、跳转都会被自动捕获，不需要手动拾取。

第二步，智能定位。每个操作自动带上选择器与完整元数据：标签、属性、可见文本、位置坐标，以及所在的 iframe 与 Shadow DOM 路径。

第三步，逐条确认。每一步弹出确认面板，选择器可以当场编辑，并实时显示匹配数量（唯一 / 多个 / 无匹配）；参数值也可以改。确认或跳过后再继续录下一步。

第四步，导出脚本。JSON、Playwright（JS 与 TS）、Puppeteer、Selenium（Python）、纯文本选择器，任选一种；只有标记为“已确认”的步骤才会进入导出结果。

开发过程中遇到的几个问题，恰好也是这类工具最容易翻车的地方：

坑一：输入完马上点发送，页面跳转，输入步骤丢了。输入靠防抖合并成一条，页面卸载时定时器跟着销毁，步骤从未落盘。解法是监听页面卸载，跳转前把未完成的输入强制提交；逐条确认模式下则降级为待确认、不丢失。

坑二：逐条确认时按 Enter，页面也跟着触发提交。Enter 是页面按钮的默认触发键，直接和确认冲突。最终确认键定为 F8——单键、输入法不拦截、页面不占用；Enter 事件在窗口捕获阶段被彻底阻断，页面完全收不到按键。

坑三：点插件自己的“停止”按钮，结果被录成一条点击步骤。解法是插件自身 UI 一律过滤：点击徽章、提示条、面板都不会进入步骤列表。

选择器是否自动校验唯一性，而不是只给一个字符串。

输入和跳转是否会丢步骤，尤其是“输入后立刻跳转”这种高频场景。

逐条确认是否真的不干扰页面：快捷键、事件阻断、确认后的回放。

导出是否覆盖主流框架，并且只导出你确认过的步骤。

把操作录成脚本，本质上是把试错成本从每次手写，转移到一次录制。工具能做的，是让这个过程每一步都可确认、可纠错、不丢数据。如果你的日常里有重复的网页操作，值得找一个这样的录制器试一试。