菜单
基于 Chrome DevTools MCP 的零脚本 UI 自动化测试 Skill：输入 URL 自动遍历页面并沉淀/复用 Playbook，执行 E2E 并输出标准化报告（MCP 优先，支持 CDP Proxy 降级）。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| 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；用户：
查询本次测试的报错明细
期望行为：