之前分享过关于midscene.js实现UI自动化的实现方案，但是实践下来发现，效果并不是很好，主要是因为midscene.js需要通过截图、视觉识别元素，再去执行操作，可能一个用例跑下来，几分钟过去了。因此，我这边研究了另外一套更高效的方案：基于Playwright CLI + 无障碍树，构建配套skill系列实现UI自动化，今天通过一个实战案例带大家学习下～
一、核心概念了解
什么是playwright？
Playwright 是微软开发的 Web 自动化与端到端（E2E）测试框架，用于自动控制浏览器、模拟用户操作、验证页面功能，本质：通过 浏览器原生协议（DevTools） 直接驱动浏览器。可以理解成，它可以通过编写代码，实现浏览器操作。
Playwright CLI 是什么？
之前的文章中，我们还分享过playwright MCP实现UI自动化，MCP本身也是一种扩展AI能力边界的方式，但是
MCP会把完整工具 Schema（函数名、参数、类型、描述、枚举...）全部塞进上下文，导致token爆炸，因此在AI Agent中，大家越来越推崇CLI的方式。
playwright-cli 是在命令行里驱动浏览器的工具，底层用的是 Playwright 那套浏览器自动化能力。
典型用法是：先 open 打开页面，再 snapshot 抓一份无障碍树 式的页面快照；快照里每个可交互节点会带上类似 e15、e3 的 ref ，后续用 click e15、fill e3 "文本" 这类命令去点选、填表。
什么是无障碍树？
我们可以在网站中，按下F12，点击Elements，就会看到 DOM ：一堆 div、span、嵌套很深的节点。
而无障碍树 是浏览器在 DOM 之上整理的另一棵「给辅助技术用」的树 ，读屏软件、系统无障碍接口都靠它：每个节点通常带有 role （按钮、链接、文本框等）、可访问名称 （屏幕朗读读出来的那段字）、以及 state（是否禁用、是否勾选等）。
如下：它会将关键元素抓取下来，之后使用ref去做表示，如下面用户名输入框的表示为e105
playwright-cli核心能力一览
二、实战案例
今天我们先通过一个登录的案例带大家快速上手基于playwright-cli的UI 自动化测试实战。后续会以实际项目中稍复杂的业务作为第二个案例进行讲解。以及分享该方案的整体实现原理。
1、环境准备
- 实战项目准备
- nodejs安装（安装playwright-cli 的前置）
- playwright-cli 安装
2、skill 下载与安装
在playwright-cli的基础上，我这边生成了配套实现 UI 自动化的 skill，主要是3个主 skill，以及一个辅助 skill。
以上Skills 包都更新在 Raina 的 AI&测试实战圈了，圈内还有更多AI测试落地案例以及 Raina积累的学习笔记等干货，学习过程中有问题也可以在里面提问沟通。感兴趣的可以加入了解哦～
导入 Raina提供的 skill 包合集到 AI 工具里面（cursor或claude code等都支持的）
3、页面探索&测试用例编写
使用时，首先需要提供项目页面地址，并配套上传该页面的需求文档或详细测试用例。
输入信息越完整、越详细，大模型生成的 UI 自动化用例 就越精准、覆盖越全面。
如果没有需求文档或用例，仅提供页面地址也可直接生成，但生成的用例可能不够精准、覆盖偏少，需要人工复核与调整。
输入：我这里以上传页面url作为案例，大家在使用时，尽量提供更多的上下文，如：需求文档、功能测试用例等
发送之后，AI 自动执行操作
会调用 playwright cli，使用有头的模式，打开浏览器和界面
AI会进行无障碍快照采集
采集结果如下：AI会对每一个发生变化的页面，进行快照采集，以便于定位元素，而且这里不是通过视觉识别的，而是对DOM进行解析，一次生成，后续可以进行复用
在收集完 AI 用例之后，会生成一个 json 文件，我们将其作为 ui 自动化用例
部分截图如下：
4、excel 可视化（可选）
这个步骤是非必要的，主要是用于生成excel 用例，便于可视化阅读，可以用来检查或评审等，
但是对于 AI 来说 JSON格式是更加合适的，相对结构化、可扩展
输入： /json-testcase-to-excel-zh + ui 自动化用例的 json 文件
输出：测试用例
我们可以拿着这个用例做评审，确认一下 让 AI 执行的步骤，是否 OK
5、执行用例
输入： /playwright-cli-execute-stop-zh + json 用例文件
AI 操作：
在执行成功，或者执行中断的时候，会进行记录的输入
这里还可以看到，AI自己识别了网站的验证码图片，并自动输入进行验证
这个是skill 中添加的能力，当然，如果遇到复杂的 AI 没法解答的，那么它就会暂停下来，让你进行解答
总结
本次用例中，AI对界面进行了快照处理，并且识别出相关的元素，且能够在用例不足时，自己探寻页面元素，以补充用例，且执行速度十分快速，还能够识别基础的验证图片等，并且进行输入操作。还能够进行脚本自愈，对于识别错误的元素，则会重新进行脚本快照生成，然后重新修改元素并重新执行。