做过 UI 自动化测试的同学，或多或少都经历过这些痛苦：
- 抓元素抓到怀疑人生。 打开浏览器 DevTools，逐个检查元素属性、复制 XPath / CSS Selector，一个页面几十上百个元素，抓到眼花。
- 定位策略脆弱不堪。 今天能跑通的脚本，前端稍微改一版（元素属性变了、组件替换了），定位就大面积失效，陷入「写脚本 3 天，修脚本 2 周」的死循环。
- 动态元素难以应对。 React / Vue / Angular 构建的单页应用，动态生成、异步加载、Shadow DOM、iframe 嵌套，传统定位方式捉襟见肘。
- 页面信息零散混乱。 页面结构、元素属性、交互链路、状态迁移分散在脑子里和各处文档里，没有统一的标准格式。
- 多人协作各写各的。 每个人抓元素的风格不同、定位策略不同、命名规范不同，脚本质量参差不齐，维护成本极高。
- 认证页面解析困难。 需要登录才能访问的页面，用脚本自动处理登录态非常麻烦。
可以这样讲，UI 自动化是自动化测试中最「脆弱」、最「烧钱」、也最需要 AI 赋能的环节。
那能不能用 Agent Skill 把页面元素解析这一步彻底自动化？
答案是：可以。而且效果比你想象的好得多。
核心思路就一句话，AI 负责解析和提取，人负责校验和决策。
这篇文章就带你完整拆解这个过程。
AI 赋能 UI 自动化测试，全流程长什么样？
在所有自动化测试类型中，UI 自动化是最迫切需要 AI 赋能的。原因有三个：
1. 元素定位是最大瓶颈，AI 最擅长「找」
UI 自动化的核心难点不是编写测试逻辑，而是找到稳定的元素定位策略。传统方式下，测试工程师需要逐个分析 DOM 结构、推导 XPath、处理动态 ID 和异步加载。AI 解析页面结构、推导语义化定位的能力，远比人工逐个检查效率高得多。
2. 页面变更频繁，AI 最擅长「适配」
前端改版是 UI 自动化的头号杀手。元素属性变了、布局重构了、组件替换了，之前的定位策略全部失效。AI 可以基于页面结构变更，自动更新定位策略，大幅降低维护成本。
3. 场景碎片化严重，AI 最擅长「补全」
UI 自动化涉及多浏览器适配、多分辨率兼容、异步加载等待、弹窗处理、iframe 切换等大量碎片化场景。AI 能自动补全这些工程化逻辑，让脚本从「demo 级」进化为「生产级」。
那具体怎么用 AI 赋能？答案是，不要搞「万能 Skill」，要按职责拆成「专业 Skill」。
很多新手容易踩的坑：想做一个「万能 Skill」，输入一个页面 URL，直接输出完美脚本。一个技能包揽页面解析、元素定位、脚本生成、视觉断言、执行维护，会导致逻辑臃肿、维护困难、扩展受限。
正确的做法是按职责拆分，每个 Skill 只做一件事：
| Skill | 核心职责 | 解决什么痛点 |
|---|---|---|
| ui-page-parser | 页面元素结构化解析 | 人工逐个抓取元素慢、定位脆弱、页面信息不标准 |
| ui-testscript-generator | UI 测试脚本批量生成 | 人工编码慢、POM 规范难落地、定位策略不统一 |
| ui-testscript-enhancer | 脚本健壮性增强 | 缺少等待机制、异常处理、弹窗拦截、失败截图 |
| ui-visual-assert | 视觉断言与多浏览器适配 | DOM 断言不够、多浏览器兼容成本高 |
| ui-auto-maintainer（可选） | 智能维护与自愈 | 页面变更导致脚本失效、维护成本高 |
这几个 Skill 形成完整闭环： 解析 → 生成 → 增强 → 适配 → 维护，既能串联使用，也能独立调用。
bash
页面 URL / DOM 结构 / 用例描述
│
▼
ui-page-parser ──→ 标准化页面定义 (pages.yaml)
│
├──→ ui-testscript-generator ──→ POM + 测试脚本 + 测试数据
│ │
│ ▼
│ ui-testscript-enhancer ──→ 健壮性增强（等待+异常+截图）
│ │
│ ▼
│ ui-visual-assert ──→ 视觉断言 + 多浏览器适配
│ │
│ ▼
│ ui-auto-maintainer ──→ 页面变更检测 + 定位自愈
│
└──→ pages.yaml 也可直接用于前端组件文档生成、无障碍审计今天这篇文章聚焦整条链路的第一步，ui-page-parser（页面元素解析器）。后续会依次分享其他几个 Skill，作为一个小系列拆分成多篇内容。
ui-page-parser 技能介绍
为什么这一步最关键？
传统 UI 脚本开发的第一步，就是人工分析页面结构、逐个抓取元素定位。
测试工程师需要打开浏览器 DevTools，逐个检查元素属性、复制 XPath / CSS Selector、分析页面加载时序、梳理交互流程。面对现代前端框架构建的单页应用，元素的动态生成和异步加载让这个过程格外痛苦。
让人工来梳理一个 20 个页面的电商系统，每个页面平均 100 个可交互元素，可能需要 3-5 天，还容易遗漏动态元素、iframe 嵌套、Shadow DOM。
这是整个 UI 自动化流程中最耗体力、最枯燥、也最容易被遗漏的一步，同时也是后续所有步骤的基础。 解析不准，后面生成的脚本、定位策略、断言逻辑全部不可靠。
我的方案
ui-page-parser 是专门用于将各种来源的页面信息统一转换成结构化的页面对象定义的 Skill。
核心能力：
- 自动识别输入源类型，匹配对应解析规则（URL 自动抓取，用例描述自动推断）
- 全站自动遍历：从入口 URL 出发，基于 BFS 爬虫机制自动发现并抓取全站页面
- 认证页面解析：通过 CDP 连接复用登录态，解析需要登录才能访问的页面
- 智能定位策略推导 ：按优先级自动推导最稳定的定位策略（
data-testid> 语义化定位 > CSS > XPath） - 页面元素结构化提取：元素名称、类型、交互方式、等待条件、关联校验
- 交互链路解析：主流程步骤、异常分支、页面状态迁移
- 隐性规则识别：弹窗触发条件、异步加载模式、iframe 嵌套关系
- 自动截图归档：每个页面抓取时自动保存截图，方便核对
- 统计报告生成：解析完成后自动生成 Markdown 格式的统计报告
输入源支持：
- 页面 URL（自动抓取 DOM）
- 页面 HTML/DOM 结构文件
- 前端组件源码（React/Vue/Angular）
- 录屏/操作视频（CV 识别）
- 自然语言用例描述（AI 推断页面结构）
实操演示
将技能安装好，在技能列表中，选择 ui-page-parser 技能。
输入一句指令：
bash
/ui-page-parser 请抓取 http://localhost:3000/ 的全站页面，
需要登录的页面，提醒我登录后继续抓取接下来，Skill 会自动完成四件事：
第一，全站自动遍历。
不需要逐个提供每个页面的 URL。Skill 从一个入口 URL 出发，基于 BFS 爬虫机制，自动发现并抓取全站可访问页面。
第二，认证页面解析。
对于需要登录才能访问的页面，Skill 会自动启动带界面的 Chrome 浏览器，用户手动登录后，通过 CDP 复用已认证会话，继续抓取认证后才能访问的页面。
第三，元素信息提取与截图。
每个页面解析完成后，自动保存页面截图和结构化的元素信息，方便后续核对。
第四，统计报告。
解析完成后，自动生成 Markdown 格式的统计报告，一眼就能看到：
- 抓取了哪些页面（标题、路径、元素数）
- 截图文件名和保存位置
- DOM 数据文件位置
- 哪些页面需要认证
- 参数化 URL 归组情况
最终输出什么？
最终，通过一个入口 URL，Skill 自动爬取全站 21 个页面 （含登录认证页面），所有页面的元素信息统一保存到 pages.yaml 文件中，可直接作为后续自动生成脚本技能 ui-testscript-generator 的输入。
这份 pages.yaml 包含每个页面的：
- 页面基本信息（页面名称、URL 路径、页面标识、优先级）
- 页面元素清单（元素名称、类型、定位策略优先级、交互方式、等待条件）
- 交互链路（主流程步骤、异常分支）
- 页面状态（初始状态、输入状态、提交状态、成功 / 失败状态）
- 页面截图（自动保存，方便与元素信息核对）
以下是一个 pages.yaml 的结构示例：
yaml
页面基本信息:
页面名称: 用户登录页
页面URL: /login
页面标识: LoginPage
优先级: P0
页面元素:
- 元素名称: 用户名输入框
元素类型: input
定位策略:
- priority_1: data-testid="username-input"
- priority_2: getByLabel("用户名")
- priority_3: css="input[name='username']"
交互方式: fill
等待条件: visible
关联校验: 输入后触发格式校验提示
- 元素名称: 登录按钮
元素类型: button
定位策略:
- priority_1: data-testid="login-button"
- priority_2: getByRole("button", {name: "登录"})
交互方式: click
等待条件: enabled
交互链路:
主流程:
- 打开登录页
- 输入用户名
- 输入密码
- 点击登录按钮
- 校验跳转至首页
异常分支:
- 用户名/密码为空 → 校验提示信息
- 用户名/密码错误 → 校验错误弹窗
页面状态:
- 初始状态: 表单为空，登录按钮禁用
- 提交中状态: 按钮 loading，禁用重复提交
- 成功状态: 跳转首页，Token 写入 localStorage
- 失败状态: 错误提示，表单保留已输入内容全流程串联回顾
把上面整个过程用命令行风格串起来，就是这样的：
bash
# 1. 启动解析（一个入口 URL，全站自动遍历）
/ui-page-parser 请抓取 http://localhost:3000/ 的全站页面
# 2. AI 自动完成（无需人工干预）
├─ BFS 爬虫遍历全站 → 发现 21 个页面
├─ 需要认证？→ 启动 Chrome，CDP 复用登录态
├─ 逐页提取元素 → 每个页面生成结构化定义
├─ 自动截图 → 每个页面保存可视化快照
└─ 生成统计报告 → Markdown 格式，一目了然
# 3. 最终产出
├─ pages.yaml ← 标准化页面对象定义
├─ screenshots/ ← 全站页面截图
├─ dom-snapshots/ ← 原始 DOM 数据
└─ parse-report.md ← 解析统计报告
# 4. 下游直接消费（下一篇内容）
pages.yaml → ui-testscript-generator → POM + 测试脚本 + 测试数据AI 负责解析，人负责校验
这里有一个关键问题需要说清楚，AI 解析的结果，并不是直接拿来就用，需要人工校验。
ui-page-parser 能帮你完成的是「解析」这个动作，把数小时甚至数天的体力劳动压缩到几分钟。但以下这些事情，AI 做不了，仍然需要人来把关：
| AI 负责的事 | 人负责的事 |
|---|---|
| 全站页面自动遍历 | 确认遍历范围是否完整（有没有遗漏关键页面） |
| 元素定位策略推导 | 校验定位策略是否合理（跟真实页面核对） |
| 交互链路推断 | 确认交互链路是否符合真实业务流程 |
| 页面状态提取 | 确认状态迁移是否覆盖关键路径 |
| 截图与报告生成 | 根据截图核对元素信息是否准确 |
特别提醒： 在 Skill 调试开发期间，建议打开真实网页，挑几个关键元素，用开发者工具核对生成的
pages.yaml数据与页面实际元素是否一致，确保解析结果的真实性和准确性。
说白了，AI 负责把「从 0 到 80」的体力活干完，人负责「从 80 到 100」的质量把关。 这样既高效，又不会失去对质量的控制。
这套思路，跟我在接口自动化测试那篇分享的理念是一样的，用标准化、模块化的 Agent Skill，把测试工程师从重复的体力劳动中解放出来。
Skill 源码与完整教程
大家可以自己根据本文提供的思路进行开发 skill，如果需要现成的教程和 skill，也可以加入「狂师 . AI 进化社」获取，里面有各类 AI 技术落地保姆级图文教程、视频教程，包括 AI 赋能测试全流程的实战教程（保姆级手把手喂饭教程，跟着步骤操作，零基础也能快速上手，目前含有 30 多个 AI 测试全场景的 Agent Skill）
温馨提醒，「AI 测试」只是 AI 进化社八大技能版块之一。
写在最后
回顾一下整个流程：
痛点： 手动抓元素慢、定位脆弱、页面信息零散、多人协作不规范。
方案： 用 ui-page-parser Skill 自动完成全站页面遍历、元素提取、定位策略推导、截图归档、报告生成。
效果： 传统模式下，人工逐个抓取 20 个页面的元素信息，可能需要 3-5 天，还容易遗漏动态元素和嵌套结构。而 ui-page-parser 只需要一个入口 URL，几分钟就能完成全站遍历、元素提取、定位策略推导、截图归档。
边界： AI 负责解析和提取，人负责校验和决策。
ui-page-parser 是整个 AI 赋能 UI 自动化链路的第一步，也是最基础的一步。一个精准、标准化的页面元素解析结果，是后续页面对象生成、测试脚本批量产出、定位策略优化的核心前提。
目前这套 AI 测试赋能的 Skill 技能组合，「狂师 . AI 进化社」的成员都在使用，很多同学都表示，UI 自动化测试落地效率明显提升，不再被元素定位和脚本维护折磨了。
下一篇，我们聚焦 ui-testscript-generator，聊聊如何基于结构化的页面定义，一次性批量生成 POM 类、测试脚本、定位策略和测试数据，彻底告别逐行手写 UI 测试脚本。