菜单
WEB UI 自动化测试（Playwright + Pytest + POM）测试报告生成专家。将 ui-test-executor 的 JUnit XML + artifacts、ui-failure-diagnoser 的诊断报告、以及历史趋势数据融合为单文件 HTML 可视化报告，含状态分布图、模块通过率、浏览器矩阵、风险分级、失败详情（含内联截图/录屏/Trace 打开按钮）、根因聚类与优化建议。**核心约束：只读测试结果与诊断输出，永不修改 tests/** 与 pages/**。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
WEB UI 自动化测试（Playwright + Pytest + POM）失败用例智能诊断与全栈自动修复专家。分析 ui-test-executor 输出的执行结果（JUnit XML + sidecar JSON + page-source HTML + console-logs + trace.zip），对失败用例做 6 类分类（ENV/LOCATOR/TIMEOUT/DATA/SCRIPT/BUG）+ 14 种根因定位，自动修复 pages 层 locator 问题、注入 conftest marker、清理测试脏数据、调起 playwright install，并通过 pages.yaml 对比修复定位漂移。**核心约束：永不修改 tests/**/*.py 断言与语义**。
UI自动化测试数据预处理技能。负责将页面URL或自然语言用例描述转换为标准化pages.yaml页面对象定义。支持全站自动爬取（单入口URL发现全站页面）、Playwright动态抓取、CDP连接模式、推断兜底模式。是ui-testcase-generator、ui-testscript-generator等后续技能的标准输入来源。当用户提供页面URL或自然语言描述的测试用例需要生成结构化页面定义文件时触发。
WEB UI 自动化测试全链路统一编排入口。负责把 ui-test-executor（执行）→ ui-failure-diagnoser（诊断修复）→ ui-test-executor（重试）→ ui-report-generator（报告）四个阶段自动串联成闭环，含失败诊断+智能重试+熔断兜底。当用户需要"一键全跑 UI 自动化"、"自动修复失败用例并重试"、"端到端 UI 测试流水线"、"全流程闭环"、"UI 自动化 pipeline"时触发本技能。本技能不替代任何子技能，仅做流程编排与参数透传，三个子技能仍可独立调用。
WEB UI 自动化测试的智能执行调度引擎。负责触发执行 Playwright + Pytest UI 测试，按标签/模块/优先级智能调度，自动检测本地浏览器环境，全程监控执行状态，自动采集截图/录屏/Trace/网络日志，输出标准化报告。当用户需要"跑一下 UI 测试"、"执行 P0 用例"、"跑登录模块测试"、"跨浏览器跑 UI 测试"、"按标签筛选执行"、"用 CI 跑 UI 测试"、"浏览器跑不了"、"需要选浏览器"、"测试失败要截图和 Trace"、"生成测试报告"等场景时应使用本技能。不要使用本技能处理接口测试（用 api-test-executor）或测试脚本编写（用 ui-testscript-generator）。
WEB UI 自动化测试脚本（Playwright + POM + Pytest）的智能标签化管理专家。当用户需要为 UI 测试脚本批量打标签、检测标签冲突、补全缺失标签、生成标签统计报告时使用此技能。支持六维标签体系：优先级(P0-P3)、模块(module:xxx)、场景(scene:xxx)、页面类型(page:xxx)、执行策略(run:xxx)、浏览器/平台(browser:xxx, platform:xxx)。自动解析测试方法名、docstring、page.goto() 路径、Playwright 操作步骤、断言内容，并参照 pages.yaml 推断模块和优先级。即使用户只是说'给 UI 用例打标签'、'按模块跑用例'、'筛选冒烟用例'、'这些 Playwright 脚本要分类'，也应使用此技能。
接口自动化测试失败用例智能诊断与自动修复专家。分析 api-test-executor 输出的执行结果，自动分类失败类型（环境问题/数据问题/脚本问题/产品缺陷），定位脚本层根因并生成修复补丁。当用户提到测试失败、用例报错、断言失败、接口变更导致脚本失败、需要修复测试脚本、分析失败原因、运行修复、修复用例、诊断测试结果时触发。也适用于用户提供了 execution_results.json 或失败日志需要排查的场景。上游承接 api-test-executor 执行结果，下游输出修复后的可执行脚本。
| name | ui-report-generator |
| description | WEB UI 自动化测试（Playwright + Pytest + POM）测试报告生成专家。将 ui-test-executor 的 JUnit XML + artifacts、ui-failure-diagnoser 的诊断报告、以及历史趋势数据融合为单文件 HTML 可视化报告，含状态分布图、模块通过率、浏览器矩阵、风险分级、失败详情（含内联截图/录屏/Trace 打开按钮）、根因聚类与优化建议。**核心约束：只读测试结果与诊断输出，永不修改 tests/** 与 pages/**。 |
| agent_created | true |
唯一要做的事： 把 UI 测试执行结果、诊断结论、历史数据融合成可视化、可决策的单文件 HTML 报告。
覆盖范围：
| 数据源 | 来源 Skill | 关键字段 |
|---|---|---|
| JUnit XML（必需） | ui-test-executor | nodeid / status / duration / message / traceback / browser |
| 失败 artifacts | ui-test-executor conftest | screenshots / page-source / console-logs / video.webm / trace.zip |
| 诊断报告 | ui-failure-diagnoser | 分类 / 根因 / 修复策略 / 验证状态 / 升级信息 |
| 浏览器环境 | ui-test-executor/detect_browsers | 已安装浏览器清单 |
| 历史趋势 | 外部累积 | 多次执行通过率序列 |
硬约束（永不违反）：
tests/**/*.py 任何内容pages/**/*.py 任何内容conftest.py、pytest.ini、配置文件与上下游 Skill 边界：
| Skill | 输入 | 输出 |
|---|---|---|
| ui-test-executor | 标签化脚本 + 执行意图 | JUnit XML + artifacts + JSON |
| ui-failure-diagnoser | JUnit XML + artifacts | ui_repair_report.md + .bak |
| ui-report-generator | JUnit XML + 可选 JSON/MD/artifacts/history | 单文件 HTML 报告 |
应当触发：
不应当触发：
必需：
--junit-xml：JUnit XML（来自 ui-test-executor）可选：
--exec-json：report.json（来自 ui-test-executor/generate_report.py，提供更丰富字段）--diagnose-md：ui_repair_report.md（来自 ui-failure-diagnoser，含根因聚合）--artifacts-dir：失败 artifact 根目录（截图/录屏/trace）--browser-env-json：browser_env.json（来自 detect_browsers.py）--history-json：历史执行累积（多次执行通过率序列）scripts/parsers.py）parse_junit_xml() → UISuiteSummary + list[UITestCase]
<testcase> 提取 nodeid / classname / status / duration / message<system-out>[BROWSER=...] 提取浏览器[chromium-手机] 提取attach_artifacts() → 每个 case 挂上 screenshots/videos/traces/page_source/console_logsparse_diagnose_md() → 解析「## 概览」表 + 「## 失败明细」每条记录
scripts/analyzer.py）scripts/renderer.py）单文件输出：所有 CSS/JS/JSON data 内联；截图 base64 内联；Chart.js 4.4 CDN（离线降级到表格）。
页面分区（对齐 api-report-generator 风格 + UI 增强）：
| 区块 | 内容 | UI 增强 |
|---|---|---|
| 报告头部 | 标题 + 环境 + 时间 + 浏览器清单 | 浏览器清单 |
| 总览大盘 | 6 张 KPI 卡（总数/通过/失败/跳过/通过率/耗时） | — |
| 数据图表 | 状态饼图 + 模块柱图 + 历史折线 | — |
| 浏览器矩阵 | 多浏览器通过率对比 | ✅ UI 特有 |
| 模块统计 | 模块 × 通过率 × 风险等级 | — |
| 诊断根因聚合 | 分类表 + 根因分布表 | ✅ 集成 ui-failure-diagnoser |
| 风险与建议 | 高风险模块表 + 优先级建议清单 | ✅ 含具体修复动作 |
| 失败详情 | 节点 + 分类 + 根因 + 错误 + Traceback | ✅ 内联截图 + 录屏 + Trace 打开命令 |
| 用例明细 | 全量列表 + 筛选 + 分页 | ✅ 浏览器筛选器 |
python3 scripts/generate_report.py \
--junit-xml ./test-results/report.xml \
--artifacts-dir ./test-results/artifacts \
--diagnose-md ./test-results/ui_repair_report.md \
--output ./test-results/ui_test_report.html \
--title "ShopLab UI 测试报告"
输出路径： 用户指定的 --output，默认 ./ui_test_report.html。
Trace 打开按钮： 失败详情区每个 case 显示 📋 打开 Trace 按钮，点击复制 python -m playwright show-trace <path> 到剪贴板，用户粘贴到终端即可。
python3 scripts/generate_report.py \
--junit-xml <JUnit XML 路径> \
[--exec-json <report.json>] \
[--diagnose-md <ui_repair_report.md>] \
[--artifacts-dir <artifacts 根>] \
[--browser-env-json <browser_env.json>] \
[--history-json <history.json>] \
[--output <HTML 输出路径>] \
[--title <报告标题>] \
[--trace-launch-cmd <命令模板>] \
[--no-inline-screenshots]
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
--junit-xml | Path | 必填 | JUnit XML 路径 |
--exec-json | Path | - | ui-test-executor report.json（可选，更丰富字段） |
--diagnose-md | Path | - | ui-failure-diagnoser ui_repair_report.md |
--artifacts-dir | Path | - | artifacts 根目录（截图/录屏/trace） |
--browser-env-json | Path | - | detect_browsers.py 的 JSON |
--history-json | Path | - | 历史执行累积 JSON |
--output | Path | ./ui_test_report.html | HTML 输出路径 |
--title | str | UI 自动化测试报告 | 报告标题 |
--trace-launch-cmd | str | python -m playwright show-trace {trace_path} | Trace 打开命令模板（含 {trace_path} 占位） |
--no-inline-screenshots | flag | false | 不内联截图 base64（生成相对路径 <img>，HTML 更小） |
退出码：0 成功；2 输入错误（JUnit XML 不存在）。
把 5 类输入融合为统一 ReportDocument：
JUnit XML (必需) ──┐
├──► parsers.py ──► analyzer.py ──► renderer.py ──► HTML
exec.json (可选) ──┤
diagnose.md (可选) ──┤
artifacts-dir (可选) ──┤
history.json (可选) ──┘
容错策略： 任一可选输入缺失，对应区块显示「暂无数据」，不影响整体报告生成。
跨浏览器 UI 测试的关键场景。报告会展示：
| 浏览器 | 总数 | 通过 | 失败 | 通过率 |
|---|---|---|---|---|
| chromium | 18 | 15 | 3 | 83.3% |
| firefox | 18 | 17 | 1 | 94.4% |
| webkit | 18 | 12 | 6 | 66.7% |
通过率高低差 >10% 自动触发建议：「webkit 通过率显著偏低，排查浏览器兼容性」。
每个失败 case 显示：
<failure> message + 折叠的 tracebackplaywright show-trace 命令到剪贴板如果提供 --history-json（JSON 数组）：
[
{"timestamp": "2026-06-20", "pass_rate": 92.3},
{"timestamp": "2026-06-21", "pass_rate": 88.5},
{"timestamp": "2026-06-22", "pass_rate": 95.0}
]
报告会在「数据图表」区显示 3 次执行的通过率折线，方便观察 flakiness 和长期趋势。
<style> 块）<script>const PAYLOAD = {...}</script>）cdn.jsdelivr.net）# 跑完测试 + 诊断后
python3 scripts/generate_report.py \
--junit-xml ./test-results/report.xml \
--artifacts-dir ./test-results/artifacts \
--diagnose-md ./test-results/ui_repair_report.md \
--browser-env-json ./test-results/browser_env.json \
--output ./test-results/ui_test_report.html
python3 scripts/generate_report.py \
--junit-xml ./report.xml \
--output ./report.html
报告会工作，但诊断区块、截图内联、Trace 按钮都不可用（对应区块显示「暂无数据」）。
请调用 ui-report-generator：
- junit-xml: ./test-results/report.xml
- artifacts-dir: ./test-results/artifacts
- diagnose-md: ./test-results/ui_repair_report.md
# 把历次报告的通过率累积到 history.json
python3 scripts/generate_report.py \
--junit-xml ./test-results/report.xml \
--history-json ./reports/history.json \
--output ./test-results/ui_test_report.html
<project>/
├── test-results/
│ ├── report.xml # JUnit XML（输入）
│ ├── ui_repair_report.md # 诊断报告（输入）
│ └── ui_test_report.html # ★ 单文件 HTML 报告（输出）
├── reports/
│ └── history.json # 历史累积（输入，可选）
└── artifacts/ # 失败 artifact（输入）
├── screenshots/
├── page-source/
├── console-logs/
└── pytest-raw/<slug>/{trace.zip, video.webm}
xml.etree / json / pathlib，无第三方依赖）未提供 --diagnose-md，或 ui_repair_report.md 不存在。先跑 ui-failure-diagnoser/scripts/diagnose.py 生成诊断报告。
未提供 --artifacts-dir，或 artifacts/screenshots/ 为空。检查 ui-test-executor 的 conftest 是否集成了失败采集 hook。
<system-out> 里没有 [BROWSER=...] 标记。新版 pytest-playwright 默认会参数化为 [chromium-...] 后缀，本技能会兜底从 nodeid 提取。
默认内联截图 base64。使用 --no-inline-screenshots 切换到相对路径（HTML 移动时需带上 artifacts 目录）。
离线环境。本技能已内置降级：Chart.js 加载失败时自动用表格展示。
| 文件 | 用途 | 读取时机 |
|---|---|---|
scripts/generate_report.py | CLI 主入口 | 每次调用 |
scripts/parsers.py | JUnit XML / MD / artifacts 解析 | diagnose 内部 |
scripts/analyzer.py | 聚合 + 风险 + 建议 | diagnose 内部 |
scripts/renderer.py | HTML 模板 + 渲染 | diagnose 内部 |
scripts/trace_launcher.py | Playwright Trace Viewer 快捷打开 | 手动打开 trace 时 |
references/report_template_spec.md | 报告布局规范 | 自定义样式时 |
references/chart_config.md | Chart.js 4.4 配置参考 | 调整图表时 |
evals/core/test_parsers.py | 解析器单元测试 | 重构/扩展时 |
evals/core/test_analyzer.py | 分析器单元测试 | 重构/扩展时 |