我把Playwright封装成了Skill，结果一句话跑完整个回归：附安装步骤+踩坑实录

本文来源： 未署名（公众号：未署名）
原文链接： https://mp.weixin.qq.com/s/Y7o8kz-UHHapsc_VBtEXdg
发布时间： 2026-10-12 16:45

作者： 未署名　　发布时间： 2026-10-12 16:45

上周面试了一个五年经验的测试，我问她：“你上一份工作，UI自动化是怎么做的？”

她说：“用Playwright写脚本，Page Object模式，CI里跑。”

我问：“一个中等复杂度的回归场景，从写脚本到跑通，要多久？”

她说：“半天吧，如果定位器不挂的话。”

我说：“那如果你告诉AI‘帮我测一下登录加购结算’，两分半钟跑完，你信吗？”

她愣了一下，说：“不可能吧。”

我也没想到。但试完之后，我信了。

一、你不是不会用Playwright，你是每次都在重复机械流程

又到回归测试周。

打开终端，敲一遍 playwright-cli open，等页面加载；再敲 playwright-cli snapshot，等快照生成；然后瞪大眼睛从快照里找元素Ref编号，再敲 playwright-cli click [ref]、playwright-cli fill [ref]……一个用例跑完，手指已经麻了。

更崩溃的是，这样的用例有几十个。每个都要重复一遍：敲命令→找Ref→敲命令→找Ref。

你告诉自己“这是最后一次手敲了”，但下一个回归周，历史重演。

你不是不会用Playwright，你是每次都在重复“选命令→找参数→执行→验证”这套机械流程。CLI命令会敲，但回归一多就散架。

更烦的是，这套流程无法沉淀。今天跑通了，明天还要重新跑。新人来了，你得从头教一遍。规范写在聊天记录里，下一轮就丢了。

问题出在哪？

你缺的不是命令，是一份操作手册。

二、Skill是什么？给AI配一个“专科医生”

Skill就像给AI配了一个专科医生。

你挂“眼科”，它就知道该查视力、测眼压、看眼底。你挂“骨科”，它就知道该拍片、触诊、看关节活动度。

你告诉Codex“帮我测一下登录加购结算”，它就知道该用 open 打开页面、snapshot 获取元素Ref、fill 填表、click 点击。

安装步骤（一条命令）：

playwright-cli install --skills

这条命令会把 SKILL.md 及参考文档复制到Skill目录——比如项目下的 .agents/skills/playwright-cli/，或者全局的 ~/.agents/skills/playwright-cli/。

确认加载： 重启Codex，在「插件 → 技能」中确认 playwright-cli 已加载。

避坑提示： Skill文件不在扫描路径时，Codex不会自动匹配。看到任务完全不走CLI，先检查目录是不是 .agents/skills/playwright-cli/，必要时手动拷贝后再重启。

关键点：无需MCP服务器配置。 AI通过Shell执行 playwright-cli 即可操控浏览器。相比MCP需要配置服务器、注册工具，Skill方案轻量得多。

三、实战：一句话跑完登录加购结算

我用的测试目标：Sauce Demo（标准电商测试网站）。

任务描述（一段话）：

“用有头模式打开Sauce Demo，用标准用户登录，把折后实付最低的商品加入购物车，进入购物车结算，填写姓名First、姓氏Last、邮编12345，确认订单，截图保存成功页。”

输入之后，我盯着屏幕看Codex的执行过程：

第1步：打开首页并登录

AI调用 open 打开Sauce Demo首页，自动 snapshot 生成首页快照。从快照里读取用户名输入框（Ref: e23）、密码输入框（Ref: e45）、登录按钮（Ref: e67）的编号，依次执行 fill 和 click。登录成功后，自动 snapshot 生成商品列表页快照。

第2步：识别并添加最便宜的商品

AI从商品列表快照里读取所有商品的价格，逐一对比后，识别出折后实付最低的是“Sauce Labs Onesie”（折后$7.99）。找到该商品对应的“Add to cart”按钮Ref，执行 click。自动 snapshot 确认添加成功。

第3步：进入购物车

AI从页面快照里识别出购物车图标的Ref，执行 click。进入购物车页面后，自动 snapshot，确认商品在列表中。识别“Checkout”按钮Ref，执行 click。

第4步：填写结算信息

AI在结算信息页面自动 snapshot，从快照里读取FirstName、LastName、ZipCode输入框的Ref，依次执行 fill 填入“First”、“Last”、“12345”。识别“Continue”按钮Ref，执行 click。

第5步：最终确认

AI在概览页面自动 snapshot，展示商品、总价、运费等信息。识别“Finish”按钮Ref，执行 click。在最终成功页面自动 snapshot 截图留痕。

全程耗时：约2分30秒。我没有敲任何一行CLI命令。

四、踩坑实录：3个让我差点放弃的瞬间

好话说了不少，但实测过程并不是一帆风顺。以下是我遇到的3个真实翻车时刻，以及我是怎么解决的。

坑1：AI第一次把“最便宜”理解错了

我第一次输入时，描述是“把最便宜的那件商品加入购物车”。Sauce Demo首页有个商品打了折扣标签，AI读取价格时把原价和折后价都识别了，最后取了原价最低的，而不是折后实付最低的。

解决方式： 我把描述改成“把折后实付金额最低的那件商品加入购物车”。重新执行后，AI正确识别了折扣价，选了折后$7.99的商品。

经验： 业务规则越精确，AI的执行越准确。别指望AI自动懂“最便宜”指的是折后价还是原价。

坑2：AI在结算页面填错了邮编格式

Sauce Demo的邮编要求是5位数字。我第一次描述时只说“填写邮编12345”，AI正常执行。但后来同事测试时填了“12345-6789”（带横杠），AI照填了，结果页面校验不通过，流程卡住了。

解决方式： 在Skill的配置里，给邮编输入框加了 format: “5-digits” 的约束提示。之后AI如果遇到非5位数字的邮编输入，会主动提示格式错误。

经验： 对于有格式要求的字段，最好在Skill或提示词里明确格式规则。

坑3：页面加载慢时，AI过早执行 snapshot

有两次执行时，结算概览页面的商品明细加载慢了2秒多，AI按照Skill默认的等待时间（2秒）执行 snapshot，结果快照里“Finish”按钮还没渲染出来，AI找不到Ref，流程中断。

解决方式： 我在Skill的配置文件中把 default_timeout 从2秒调整到5秒。之后执行稳定了。

经验： 测试环境的响应速度直接影响AI执行的稳定性。在Skill里设置合理的超时时间，比每次手动加 --wait 要省心。

五、从“跑一遍”到“可复用资产”

跑通一次不算什么。跑通之后能沉淀成什么，才重要。

Codex + Skill的妙处在于：执行过程中自动识别了页面元素和操作路径，执行完成后可以自动提炼成PO分层脚本。

页面层： 登录页、商品列表、购物车、结算页的定位和操作。改UI时只改这一层。

用例层： 登录→加购→结算的业务路径。对应一条可回归的测试场景。

下次回归，直接跑脚本，不用再让AI重新“理解”一遍。

Prompt只能解决一次问题，而Skill可以永久复用解决方案。

把沉淀的PO脚本和Skill放在一起管理，形成团队自己的测试资产库。新人来了不用从头教，Skill就是最好的“老员工”。

六、选型建议：MCP探索，还是CLI+Skill回归

两套能力可以共存，但测试项目里要先定默认路径，避免同一条用例今天走MCP、明天走CLI，证据格式对不上。

场景	更合适的方案	原因
短期探索未知页	Playwright MCP	完整可访问性控制、控制台、网络状态一次返回，适合探索路径
长流程/夜间回归	CLI + Skill	状态落盘、按需读取、Token更省，也方便录制成脚本
要入库的UI用例	CLI + Skill	探索结束后整理.spec.ts或PO模式Python，页面层和用例层分开

Token消耗差异也很关键： Playwright团队的基准测试显示，使用MCP进行典型浏览器自动化任务消耗的token数量约为114,000个，而使用CLI则约为27,000个token，大致减少了4倍。对于长流程回归，这个差距非常可观。