Menu
基于 Chrome DevTools MCP 的零脚本 UI 自动化测试 Skill：输入 URL 自动遍历页面并沉淀/复用 Playbook，执行 E2E 并输出标准化报告（MCP 优先，支持 CDP Proxy 降级）。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
| name | ui-testing |
| description | 基于 Chrome DevTools MCP 的零脚本 UI 自动化测试 Skill：输入 URL 自动遍历页面并沉淀/复用 Playbook，执行 E2E 并输出标准化报告（MCP 优先，支持 CDP Proxy 降级）。 |
| version | 1.0.0 |
| triggers | + ui 自动化测试 + UI 测试 + E2E 测试 + Playbook + 测试报告 + 页面遍历 + 更新用例 + 查询 Playbook + 查询报错 + 导出测试报告 |
面向 Web 站点的 UI 自动化测试 Skill。基于 Chrome DevTools MCP 直连浏览器会话，无需编写测试脚本：接收单个待测 URL 后，按“先广后深”的方式遍历站点页面，梳理端到端测试用例并沉淀为站点专属 Playbook；在已有 Playbook 的情况下，直接复用用例执行测试，记录关键步骤、截图、报错统计，并输出标准化测试报告。
当用户有以下需求时使用本 Skill：
典型触发语：
以下场景不要使用本 Skill：
本 Skill 优先通过 chrome-devtools-mcp 提供的 MCP 工具直接操作浏览器。
当 Agent 无法使用 MCP 工具（如 MCP 未接入、工具调用失败、或 Agent 不支持 MCP）时，允许降级到内置的 Node.js CDP Proxy（ scripts/cdp-proxy.mjs ）来完成同等的基础浏览器操作能力（navigate/eval/click/screenshot/snapshot 等）。
约束：
cdp-proxy.mjs 作为兜底代理（常驻服务形态）chrome-devtools-mcp 已作为 MCP Server 注册到 Agent 的 MCP 配置中chrome-devtools-mcp 必须在 Agent（如 Trae、OpenClaw、Claude Code、Cursor 等）的 MCP 配置中注册，否则 Agent 无法调用浏览器操作工具。
在配置文件的 mcpServers 中添加：
{
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:${PORT}"]
}
}
其中 --browser-url 的端口号需要与 Chrome 实际的 remote debugging 端口一致。
执行测试前，按以下顺序验证：
--remote-debugging-port 参数curl -sS "http://127.0.0.1:${PORT}/json/version" 返回版本信息list_pages 能返回当前标签页列表一条命令完成 Chrome 的启动：
node ./scripts/chrome-devtools-mcp.mjs
脚本会自动：
01. 优先复用：扫描 9222..PORT_SCAN_END 范围内已运行的 Chrome DevTools 端口，若存在则直接复用
02. 否则新启动：选择空闲端口并启动带远程调试端口的 Chrome
03. 等待 Chrome 就绪并自检
也可通过环境变量指定固定端口：
PORT=9222 node ./scripts/chrome-devtools-mcp.mjs
# 以脚本输出的端口为准；若需固定端口可在启动时指定 PORT
curl -sS "http://127.0.0.1:${PORT}/json/version"
curl -sS "http://127.0.0.1:${PORT}/json/list"
优先使用 MCP 工具直接操作浏览器，可用工具包括：
navigate_page — 页面导航take_snapshot — 获取页面 a11y 树快照（优先于截图，用于定位元素）take_screenshot — 截图保存到指定路径click — 点击元素（通过 uid 定位）fill — 填充表单输入框type_text — 键盘输入文字evaluate_script — 执行 JavaScript（处理复杂交互）handle_dialog — 处理 alert/confirm 弹窗wait_for — 等待页面文本出现list_pages / select_page / close_page — 多标签页管理与清理当 MCP 工具不可用时，使用 CDP Proxy 模式（见下文）作为降级兜底。
执行任何测试前，先做“驱动探活”，选择 MCP 或 CDP 两种驱动之一。后续所有浏览器操作都必须走同一套“统一接口”，只切换底层驱动实现。
list_pages。GET /health 或 GET /list_pages 探活；成功则使用 CDP Driver。Playwright、Puppeteer 或任何独立 testing browser 作为兜底。以下“统一接口”在 Skill 内部语义保持一致；实现层根据驱动不同映射到 MCP 工具调用或 CDP Proxy HTTP 调用：
| 统一接口 | MCP Driver | CDP Driver（HTTP） |
|---|---|---|
| 列表页 | list_pages() | GET http://127.0.0.1:${PROXY_PORT}/list_pages |
| 选页 | select_page(pageId/targetId) | POST /select_page |
| 新建页 | new_page(url) | POST /new_page |
| 关页 | close_page(pageId) | POST /close_page |
| 导航 | navigate_page({type:'url', url}) | POST /navigate_page |
| 执行脚本 | evaluate_script({function, args}) | POST /evaluate_script |
| 快照 | take_snapshot({verbose}) | POST /take_snapshot |
| 点击 | click({uid}) | POST /click （支持 uid 或 selector ） |
| 截图 | take_screenshot({fullPage,filePath,uid?,selector?}) | POST /take_screenshot （支持 uid 或 selector 元素截图） |
启动命令（示例）：
CHROME_PORT=${PORT} PROXY_PORT=8888 node ./scripts/cdp-proxy.mjs
说明：
CHROME_PORT：Chrome remote debugging 端口（由 chrome-devtools-mcp.mjs 输出）PROXY_PORT：CDP Proxy HTTP 监听端口（默认 8888）当 Agent 在 CDP Driver 模式下，因执行复杂流程需要临时生成辅助执行脚本（例如 run_test.mjs ）时，按以下规则处理：
{SKILL_ROOT}/playbooks/{domain}/{YYYYMMDDHHmm}/ 下report.md、results.json、截图文件（*.png）、临时执行脚本（如 run_test.mjs ）以及其他明确对用户有价值的日志或附件url: string
http:// 或 https:// URL。updateCase: boolean = false
true：重新遍历页面、重建并覆盖对应 Playbook。false：优先读取现有 Playbook；若不存在则自动创建。command: string
queryPlaybookexportReportstopTestqueryErrorseditCasedeleteCaseinstruction: string
先判断本次请求属于哪一类：
如果用户意图不明确，先用一句话澄清最小必要信息。
对输入 URL 执行以下检查：
http:// 或 https:// 协议；若校验失败，返回清晰提示，例如：
http://域名[:端口][/路径] 或 https://域名[:端口][/路径]”基准目录：所有 Playbook、运行目录（截图/报告）都必须存放在 Skill 安装目录下的 playbooks/ 中，即 {SKILL_ROOT}/playbooks/。禁止在项目根目录或其他位置创建 playbooks/ 目录。
按"站点域名 + path"分层管理 Playbook：
{SKILL_ROOT}/playbooks/www.example.com/{domain}.md{SKILL_ROOT}/playbooks/www.demo.com/www.demo.com.md{SKILL_ROOT}/playbooks/www.example.com/path1.mdpath 文件名规则：
// 转为 _遍历时必须遵循以下规则：
<a> 链接mailto:javascript:基于遍历结果，梳理端到端测试用例。要求：
每个用例必须包含：
用例 ID 规则：
example_com_001example_com_path1_001Playbook 使用 Markdown 保存，内容至少包括：
若是更新用例：
若当前请求需要执行测试，则：
浏览器页面的默认策略是“优先复用，新增必回收”。执行测试时必须按以下顺序处理：
list_pages，记录当前已存在的页面列表，作为本轮测试前的基线。select_page 后 navigate_page 到目标 URL；不要为站内跳转频繁调用 new_page。new_page 或跟随站点打开新页。list_pages，识别新增页面，select_page 到该页面完成检查、截图或断言。close_page 关闭；关闭后切回主工作页或原来源页继续执行。list_pages，关闭所有“本轮新增且不在基线中的页面”；若只能保留最后一个页面，则优先保留原基线页面。补充约束：
close_page(pageId) 完成关闭。POST /close_page 完成关闭。现代 Web 应用大量使用 Vue、React、Angular 等 SPA 框架，其表单通过双向绑定（如 Vue 的 v-model）管理状态。直接操作 DOM 或键盘输入可能无法触发框架的响应式系统。
标准操作流程：
evaluate_script 执行 scripts/detect.mjs 中 detectFramework 的函数体，识别页面使用的 SPA 框架evaluate_script 执行 scripts/detect.mjs 中 detectComponentLib 的函数体，识别页面使用的 UI 组件库evaluate_script 执行 scripts/detect.mjs 中 detectPagePattern 的函数体，识别页面结构模式knowledge/component-lib.md，查找与当前组件库匹配的交互策略，优先使用高置信度方案fill 或 click + type_text 填充表单take_snapshot 检查页面是否发生预期变化evaluate_script 执行对应的探测函数通用探测脚本： scripts/detect.mjs （ES Module），包含以下导出函数：
| 函数 | 用途 |
|---|---|
detectFramework | 识别 SPA 框架类型（Vue2/Vue3/React/Angular/jQuery） |
detectFormElements | 收集页面所有表单元素的类型、选择器、当前值、可选项 |
findVue2FormComponent | Vue 2 专用：递归查找持有表单数据的组件路径及方法列表 |
detectComponentLib | 识别 UI 组件库（Arco Design/Ant Design/Element UI/Element Plus/MUI/Chakra UI/Bootstrap/Tailwind） |
detectPagePattern | 识别页面结构模式（crud-list/wizard-form/list-detail/tabbed-detail/dashboard 等） |
注意： evaluate_script 的 function 参数要求是可直接执行的函数声明（如 () => { ... } ）。 detect.mjs 中是 export function ... ，因此注入时需要做一次轻量转换：
// 伪代码：读取 detect.mjs 后，取出 export function detectFramework() {...}
// 将其转换为 () => { ... } 再传给 evaluate_script
(() => {
// paste detectFramework 的函数体到这里
})()
框架实例操作原则：
Vue 2：通过 rootEl.__vue__ 获取实例 → 递归 $children 找到表单组件 → 直接设置 comp.form.xxx → 调用 comp.onSubmit()
Vue 3：通过 rootEl.__vue_app__ 获取实例
React：查找 _reactRootContainer 或 React fiber tree
通用回退：按以下优先级尝试输入方法
01. document.execCommand('insertText', false, value) — 对 React + Arco Design / Ant Design 等组件库最可靠，能正确触发 React 内部状态更新
02. Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set + dispatchEvent(new Event('input', {bubbles: true})) — 仅在 execCommand 不可用时使用，对部分 React 组件可能无法触发状态更新
03. 框架实例直接操作 — 作为最后手段
重要： execCommand('insertText') 的前提是输入框已获得焦点且选中了已有文本（ el.focus(); el.select() ），否则会在光标位置插入而非替换。
每个站点首次探测后，应将框架类型、组件路径、表单字段映射等信息沉淀到对应 Playbook 的「站点技术特征」章节中，供后续用例复用。
下拉框（select）的显示文本和实际 value 经常不同（如显示"一天"但 value 是 day ）。用错误的 value 提交会导致 API 错误。
标准流程：首次操作新页面的表单前，通过 evaluate_script 执行 scripts/detect.mjs 中 detectFormElements 的函数体，一次性收集所有表单元素的 option 值映射，并将映射结果沉淀到 Playbook 的「站点技术特征」章节。
SPA 应用的页面跳转不一定改变 window.location.href （Vue Router 的 hash mode 或部分 history mode 只更新视图不刷新 URL）。判断操作是否成功应优先检查：
take_snapshot 获取最新 a11y 树）document.body.innerText 中是否包含预期文本SPA 直接 URL 导航风险：部分 SPA 应用（尤其是有路由守卫或权限校验的应用）在通过 navigate_page 直接访问深层 URL 时，可能跳转到引导页、登录页或首页。此时应改为从列表页通过 UI 点击进入详情页，而非直接导航。判断方法：导航后检查 document.body.innerText 是否包含目标页面特征文本，若不包含则说明发生了重定向。
基于 React 的组件库（Arco Design、Ant Design 等）封装了原生 HTML 元素，其事件系统使用 React 合成事件（SyntheticEvent）。直接调用 DOM 的 .click() 方法可能无法触发 React 合成事件，导致状态不更新。
判断条件：页面使用 React + 组件库，且 .click() 操作后组件状态未变化（如 Select 选项未选中、Drawer 确认按钮无响应）。
处理策略：
优先使用 MCP click(uid) + take_snapshot：通过 take_snapshot 获取 a11y 树中的 uid，再用 click(uid) 点击。MCP 的 click 实现会正确触发 React 合成事件。
MCP 不可用时使用 dispatchEvent：通过 evaluate_script 模拟完整的鼠标事件序列：
el.dispatchEvent(new MouseEvent("mousedown", {
bubbles: true
}));
el.dispatchEvent(new MouseEvent("mouseup", {
bubbles: true
}));
el.dispatchEvent(new MouseEvent("click", {
bubbles: true
}));
多选 Select 选项：组件库多选 Select 的选项点击后不会关闭下拉框，需逐个选择后点击其他区域关闭下拉框，再检查选中状态（通过标签元素确认，如 .arco-tag、.ant-select-selection-item 等）。
Switch/Toggle 操作：组件库的 Switch 组件点击后可能触发 Popconfirm 确认弹窗（如"确定关闭此开关吗？"），必须处理确认弹窗后才算操作完成。
Drawer/Modal 确认按钮：若 evaluate_script 中 .click() 不响应，改用 take_snapshot 获取按钮 uid 后用 MCP click(uid) 点击，或使用 dispatchEvent 方式。
部分表单会预勾选某些选项（如通知渠道、集成方式等），但对应的依赖字段（如地址、Token 等）为空，导致表单提交时验证失败。
判断条件：表单提交后出现"不能为空"或"不符合输入规则"等验证错误，且报错字段并非主动填写的字段。
处理策略：
.arco-form-message、.ant-form-item-explain-error 等），若有则定位到对应表单项。以下为已知但尚未遇到的场景占位。当 Agent 在测试中首次遇到并找到有效方案时，按 §13.3 规则将方案回写到此处，替换对应占位：
take_snapshot 可能无法直接获取内部元素执行过程中必须记录：
以下场景应优先截图：
强制截图检查点（每个用例必须遵守）：
对每个 E2E 用例，以下步骤必须截图，缺少任何一张截图视为用例执行不完整：
| 检查点 | 时机 | 截图内容 | 文件命名规范 |
|---|---|---|---|
| CP1-初始状态 | 用例开始，操作前 | 目标字段/元素的当前值 | {case_id}_before_{action}.png |
| CP2-操作过程 | 执行核心操作时（填写表单、点击按钮等） | 操作界面（表单填写状态、弹窗内容） | {case_id}_doing_{action}.png |
| CP3-操作结果 | 提交后，验证时 | 目标字段/元素的实际显示值 | {case_id}_after_{action}.png |
| CP4-恢复结果 | 恢复原始状态后 | 目标字段/元素恢复后的值 | {case_id}_restored_{action}.png |
| CP5-失败证据 | 仅当验证不通过时 | 不一致的实际值 | {case_id}_bug_{description}.png |
默认使用 fullPage 整页截图，确保页面完整内容可见。截图调用示例：
take_screenshot(fullPage=true, filePath="截图路径")
当页面过长（如无限滚动页面）时，可改为对关键区域元素截图：
take_screenshot(uid="目标元素uid", filePath="截图路径")
禁止只截取 viewport 可视区域（不带 fullPage 且不指定 uid），因为这往往只截到导航栏，遗漏核心内容。
截图前必须做“页面稳定等待”，避免拿到 loading / skeleton 画面。优先级如下：
wait_for 等到关键文本出现（例如备案页等“ICP备案查询”）。evaluate_script 判断 document.readyState === 'complete'，必要时再加一小段延迟让渲染稳定。CDP Driver 说明：
cdp-proxy 的 /take_screenshot 已做 best-effort 的页面稳定等待（readyState / 常见 loading mask / 图片完成），但对无限加载/重定向页仍可能超时；遇到这类页面依然建议使用“等业务文本”的方式兜底。对报错进行分类与汇总，至少包括：
每条报错至少记录：
测试完成或被手动终止后，生成标准化 Markdown 报告。报告至少包含：
chrome-devtools-mcp 还是 cdp-proxy）MCP list_pages 失败 -> CDP /health 成功 -> 锁定 CDP Driver）报告命名建议（所有路径均相对于 {SKILL_ROOT}/playbooks/ ，即 Skill 安装目录下的 playbooks/ ）：
{SKILL_ROOT}/playbooks/{domain}/{YYYYMMDDHHmm}/
{SKILL_ROOT}/playbooks/{domain}/{YYYYMMDDHHmm}/report.md{SKILL_ROOT}/playbooks/{domain}/{YYYYMMDDHHmm}/{case_id}_{step}.png{SKILL_ROOT}/playbooks/{domain}/{domain}.md默认返回简洁版结果，重点包含：
每次测试结束后，Agent 必须执行一轮「经验回写」检查。目标是让 Skill 在反复使用中自动积累能力，而不只是完成当次测试。
回写分九层，由近到远依次检查：
触发条件：每次测试必执行。
回写内容：
判断标准：对比测试前后 Playbook 的「站点技术特征」章节，若有字段为空或与本次探测结果不一致，则更新。
触发条件（扩展为以下任一）：
detectFramework 返回 framework: 'unknown' 但 Agent 通过其他手段识别出了框架类型detectComponentLib 返回 library: 'unknown' 但 Agent 通过其他手段识别出了组件库detectPagePattern 返回 primaryPattern: 'unknown' 但 Agent 识别出了页面模式回写内容：
detectFramework 函数中追加新框架的探测逻辑detectComponentLib 的 checks 数组中追加新组件库探测规则detectPagePattern 中追加新页面模式识别规则findXxxFormComponent 导出函数回写规则：
detectFramework 的 [EXTEND: new framework] 标记处detectComponentLib 的 checks 数组末尾 [EXTEND: new component lib] 标记处[EXTEND: new finder] 标记处，以 export function 导出detect.mjs 当前内容，避免覆盖已有逻辑触发条件：当测试过程中遇到 SKILL.md 现有策略未覆盖的场景，且 Agent 找到了有效的解决方案时。
典型场景：
回写内容：
回写规则：
创建时间、置信度: low、成功应用次数: 0当新站点的技术栈与某个已测站点有交集时，Agent 应主动读取已有 Playbook 的「站点技术特征」作为参考，跳过重复的试错过程。
查找策略（按优先级）：
knowledge/component-lib.md 中与当前站点组件库一致的条目，直接复用交互策略playbooks/ 下所有站点目录的 Playbook，筛选「框架信息」+「组件库」与当前站点一致的条目触发条件（以下任一）：
detectComponentLib 识别出组件库但 knowledge/component-lib.md 中无对应章节回写内容：
knowledge/component-lib.md 对应组件库章节下追加新的知识条目回写规则：
knowledge/component-lib.md，确认当前确实没有覆盖该交互模式low，成功应用次数为 0触发条件：每次测试结束后，若有失败用例则必须执行。
执行步骤：
element-not-found：元素选择器失效（DOM 结构变化）interaction-failed：交互操作未触发预期效果（组件库事件问题）state-mismatch：操作成功但状态未如预期变化（业务逻辑/时序问题）timeout：等待超时（页面加载慢、API 延迟）dependency-blocked：前置依赖未满足（如删除保护未关闭、联系人未创建）navigation-failed：页面跳转异常（SPA 路由守卫、重定向）unknown：无法归因knowledge/component-lib.md 和 SKILL.md §8.x 中是否已有对应的解决方案knowledge/component-lib.md恢复方案格式：
#### {失败模式名称}
- **触发条件**：...
- **现象**：...
- **根因**：...
- **恢复步骤**：
01. ...
- **预防措施**：...
- **来源用例**：{case_id}
- **首次发现**：YYYY-MM-DD
目标：确保知识库中的知识是可信的、最新的，避免过时或冲突的知识积累。
置信度升级规则：
| 当前置信度 | 升级条件 | 升级后置信度 |
|---|---|---|
| low | 在 1 个以上新站点成功应用 | medium |
| medium | 在 3 个以上站点成功应用，或连续 5 次成功 | high |
| high | 连续 10 次成功且无失败 | high（维持） |
置信度降级规则：
| 当前置信度 | 降级条件 | 降级后置信度 |
|---|---|---|
| high | 连续 2 次应用失败 | medium |
| medium | 连续 2 次应用失败 | low |
| low | 连续 3 次应用失败 | deprecated |
废弃规则：
deprecated 的知识条目保留 30 天后删除knowledge/evolution-log.md 中记录废弃原因deprecated 条目在 30 天内被重新验证成功，恢复为 low 置信度冲突检测：
knowledge/evolution-log.md 中记录冲突，并将两者降级为 medium 待进一步验证每次测试后的元数据更新：
成功应用次数 += 1，最后验证时间 = 当前日期目标：追踪测试质量随时间的变化，检测回归和 flaky 用例。
趋势记录：
每次测试完成后，在 Playbook 的「测试历史」章节追加一条记录：
### 测试历史
| 测试时间 | 驱动 | 用例总数 | 成功 | 失败 | 跳过 | 通过率 | 报告路径 |
|---------|------|---------|------|------|------|-------|---------|
| 2026-04-15 19:00 | MCP | 40 | 29 | 6 | 5 | 82.9% | playbooks/.../report.md |
回归检测：
当本轮通过率低于上一轮时，Agent 必须：
knowledge/evolution-log.md 中记录Flaky 用例检测：
当同一用例在最近 3 次测试中出现"成功→失败→成功"或"失败→成功→失败"的交替模式时，标记为 flaky，并在 Playbook 中标注：
* flaky 标记：是
* flaky 原因：（如"API 超时偶发"、"元素加载时序不稳定"）
* 建议处理：增加等待时间 / 增加重试 / 降级为 P2
所有进化变更必须记录到 knowledge/evolution-log.md ，用于追踪知识增长、验证进化效果。
日志条目格式：
### {序号}. {变更标题}
- **时间**：YYYY-MM-DD HH:mm
- **层级**：playbook / script / strategy / knowledge / evolution-engine
- **变更类型**：新增 / 更新 / 废弃 / 验证
- **变更内容**：简要描述
- **触发来源**：哪个站点/用例触发了本次进化
- **效果验证**：进化后是否经过验证，验证结果
进化引擎自检：
每累计 10 次测试后，Agent 应执行一次进化引擎自检：
deprecated 条目需要清理low 置信度条目可以升级knowledge/evolution-log.md示例：
处理规则：
示例：
www.example.com 站点 path1 的 Playbook”返回内容至少包括：
示例：
处理规则：
示例：
返回内容至少包括：
示例：
返回内容至少包括：
示例：
处理规则：
示例：
返回内容至少包括：
示例：
返回内容至少包括：
在长流程任务中，持续向用户反馈阶段状态，优先使用以下表达：
最终回复尽量使用以下结构：
# 站点Playbook（www.example.com/path1）
## 基本信息
- 测试URL：https://www.example.com/path1
- 站点根文件夹：www.example.com
- Playbook文件名：path1.md
- 创建时间：2024-10-01 10:00:00
- 更新时间：2024-10-01 10:30:00
- 用例总数：20
## 用例总览
| 用例ID | 功能模块 | 优先级 | 用例名称 | 类型 |
|--------|---------|--------|---------|------|
| 001 | 实例管理 | P0 | 实例创建-更新-删除完整流程测试 | E2E |
| 002 | 实例管理 | P0 | 实例详情-自动续费开关完整流程测试 | E2E |
| 003 | 实例管理 | P1 | 实例详情-标签管理完整流程测试 | E2E |
| 010 | 配置管理 | P0 | 配置项完整生命周期测试 | E2E |
| 020 | 页面导航 | P2 | 左侧导航栏完整性验证测试 | 展示 |
## 用例详情
### 实例管理
#### example_com_path1_001（P0）
- 用例名称：实例创建-更新-删除完整流程测试
- 前置条件：已进入目标页面，已登录测试账号
- 执行步骤：
01. 点击【创建实例】按钮
02. 输入实例名称并确认
- 预期结果：
01. 弹出创建表单
02. 实例创建成功
#### example_com_path1_002（P0）
- 用例名称：实例详情-自动续费开关完整流程测试
- 前置条件：已进入实例详情页
- 执行步骤：
01. 关闭自动续费开关，确认操作
02. 验证自动续费状态变为"未开启"
03. 重新开启自动续费开关，确认操作
04. 验证自动续费状态恢复为"已开启"
- 预期结果：
01. 自动续费关闭成功
02. 自动续费重新开启成功
### 配置管理
#### example_com_path1_010（P0）
- 用例名称：配置项完整生命周期测试
- ...
### 页面导航
#### example_com_path1_020（P2）
- 用例名称：左侧导航栏完整性验证测试
- ...
## 站点技术特征
### 框架信息
- 框架：Vue 2 / Vue 3 / React / Angular / 无框架
- 根元素：#app
- 实例获取方式：document.getElementById('app').__vue__
### 组件库信息
- 组件库：Arco Design / Ant Design / Element UI / 无
- 组件库前缀：arco / ant / el
- 版本：...
### 页面模式
- 主要模式：crud-list / wizard-form / list-detail / tabbed-detail / dashboard / ...
- 模式特征：...
### 表单组件路径
（记录持有表单数据的组件在组件树中的路径）
### 表单字段值映射
（记录 select 等元素的显示文本与实际 value 的对应关系）
### 表单交互方式
（记录 MCP fill/type_text 是否有效，若无效则记录通过框架实例操作的代码模式）
### SPA 路由特征
（记录页面跳转行为：URL 是否变化、如何判断操作成功等）
### 已知问题与恢复方案
（记录测试中遇到的失败模式及其恢复方案，格式参见 §13.6）
### 测试历史
| 测试时间 | 驱动 | 用例总数 | 成功 | 失败 | 跳过 | 通过率 | 报告路径 |
|---------|------|---------|------|------|------|-------|---------|
| ... | ... | ... | ... | ... | ... | ... | ... |
# 站点UI自动化测试报告（example.com）
## 一、测试概况
- 测试站点：https://www.example.com
- 驱动：MCP（`chrome-devtools-mcp`） / CDP（`cdp-proxy`）
- 测试时间：2024-10-01 10:30:00 - 2024-10-01 11:30:00
- 执行用例总数：20
- 成功用例数：18
- 失败用例数：2
- 报错总数：3
- 测试通过率：90%
## 二、用例执行详情
| 用例ID | 用例名称 | 执行状态 | 执行时间 | 备注 |
| ------ | -------- | -------- | -------- | ---- |
| example_com_001 | 实例创建-更新-删除完整流程测试 | 成功 | 25秒 | 无 |
## 三、报错统计
- 元素操作报错：2次
- 页面加载报错：1次
## 四、测试结论
核心功能测试通过，存在少量次要问题，建议修复后回归。
统一使用：
时间戳 | 日志类型 | 日志内容
日志类型包括：
当且仅当满足以下条件时，可视为任务完成：
MCP Driver 或 CDP Driver 中的一种，且未触发 Forbidden Paths；遇到以下情况时，必须明确反馈并尽量保留中间产物：
Playwright、Puppeteer、Agent testing browser 或其他第三套浏览器驱动；反馈时说明：
用户：
用 ui-testing 测试 https://www.example.com/path1，更新用例
期望行为：
path1 范围内页面；www.example.com/path1.md；用户：
用 ui-testing 测试 https://www.demo.com，不更新用例
期望行为：
www.demo.com/www.demo.com.md；用户：
查询
www.example.com站点path1的 Playbook
期望行为：
www.example.com/path1.md；用户：
查询本次测试的报错明细
期望行为：
Based on SOC occupation classification
