@szc-ft/mcp-szcd-client 0.18.0 → 0.19.0

package/standard-skill/local-browser-test/SKILL.md

@@ -0,0 +1,153 @@
+---
+name: local-browser-test
+description: 本地浏览器测试工具，在用户本地 Chrome 中执行自动化测试。支持设计稿还原度对比（像素级评分）、功能验证（点击/输入/导航）、DOM 结构检查、JS 错误检测。通过 puppeteer-core 连接用户真实浏览器，天然继承登录态和微前端环境。
+compatibility:
+  tools:
+    - run_command
+    - read_file
+---
+
+# 本地浏览器测试工具（local-browser-test）
+
+## 触发条件
+
+当用户说出以下关键词时启动浏览器测试：
+- "测试一下"、"帮我验证"、"浏览器测试"
+- "对比设计稿"、"还原度"、"看看效果"
+- "功能测试"、"能不能正常用"
+- "检查页面"、"页面渲染"
+
+## 浏览器模式
+
+支持两种模式，执行器自动检测优先使用 connect：
+
+### connect 模式（推荐）
+连接用户已启动的调试 Chrome，天然继承登录态/微前端环境。
+
+用户一次性配置：
+```bash
+# macOS
+open -a "Google Chrome" --args --remote-debugging-port=9222
+# Linux
+google-chrome --remote-debugging-port=9222
+# Windows
+"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
+```
+
+### launch 模式（回退）
+启动新的 headless Chrome，需要用户提供可直接访问的 URL。
+
+执行器会自动检测 localhost:9222 是否可用，有则 connect，无则 launch。
+
+## 测试计划 Schema
+
+AI 直接构造测试计划 JSON：
+
+```json
+{
+    "planId": "<uuid>",
+    "description": "<测试描述>",
+    "steps": [ ... ],
+    "options": {
+        "viewport": { "width": 1440, "height": 900 },
+        "timeout": 120000,
+        "outputDir": "/tmp/browser-test-<planId>"
+    }
+}
+```
+
+### 支持的步骤类型
+
+| type | 功能 | 参数 | 返回 |
+|------|------|------|------|
+| navigate | 导航到 URL | `url`, `waitUntil` | `{ url, title, loadTime }` |
+| screenshot | 页面截图 | `fullPage`, `clip`, `filename` | `{ filepath, width, height }` |
+| compare | 设计稿对比 | `designImagePath`, `threshold`, `regions[]` | `{ fidelity, diffPixels, diffImagePath, regions[] }` |
+| click | 点击元素 | `selector`, `waitForNavigation` | `{ clicked, tagName }` |
+| type | 输入文本 | `selector`, `text`, `clear` | `{ typed, value }` |
+| waitFor | 等待条件 | `selector` 或 `url`, `timeout` | `{ matched, waited }` |
+| evaluate | 执行 JS | `expression` | `{ result }` |
+| checkElement | 元素断言 | `selector`, `expect: {visible, minCount, maxCount, hasText}` | `{ passed, checks, elementCount }` |
+
+### 场景选择策略
+
+根据上下文自动选择步骤组合：
+
+**场景 A：有设计稿 + 功能验证（最完整）**
+`navigate → waitFor → screenshot → compare → 功能步骤`
+
+**场景 B：无设计稿 + 功能验证**
+`navigate → waitFor → screenshot → evaluate(JS错误检查) → 功能步骤`
+
+**场景 C：仅视觉对比**
+`navigate → waitFor → screenshot → compare`
+
+**场景 D：仅页面检查**
+`navigate → waitFor → screenshot → evaluate(JS错误检查)`
+
+### 构造步骤的指导原则
+
+1. **selector 必须从用户代码中读取，不要猜测**
+   - 读代码中的 `id`、`className`、`data-testid`
+   - szcd 组件的 class 可通过 `get_component_full_profile` 获取
+2. **API 路径从代码中的接口调用读取**
+3. **checkElement 的 expect 从代码逻辑推断**
+   - columns 定义了 N 列 → `expect: { minCount: N }`（检查 th 数量）
+   - dataSource 有数据 → `expect: { minCount: 1 }`（检查行数）
+4. **compare 的 regions 从设计稿分析结果或组件布局推断**
+
+## 执行命令
+
+```bash
+node {client_install_path}/local-browser-executor.js \
+  --plan '<测试计划JSON>' \
+  --output /tmp/browser-test-result.json
+```
+
+也支持从文件读取计划：
+```bash
+node {client_install_path}/local-browser-executor.js \
+  --plan-file /tmp/test-plan.json \
+  --output /tmp/browser-test-result.json
+```
+
+### 可选参数
+
+- `--cdp-url http://localhost:9223`：指定非默认的 CDP 端口
+- `--page-url http://xxx/page`：connect 模式下指定目标页面
+
+## 依赖检查
+
+如果执行报错依赖缺失，引导用户安装：
+```bash
+npm install puppeteer-core pixelmatch pngjs sharp
+```
+
+## 结果解读
+
+### 还原度评分
+- fidelity >= 95%：还原度优秀
+- fidelity 90-95%：还原度良好，有优化空间
+- fidelity < 90%：还原度不足，需要调整
+
+### 功能测试
+- passed = total：全部通过
+- 有失败步骤：根据 `step` + `error` 字段定位代码问题
+
+### 结果文件结构
+```json
+{
+    "planId": "xxx",
+    "mode": "connect",
+    "steps": [
+        { "index": 1, "step": "navigate", "status": "PASS", "duration": 1200, ... },
+        { "index": 2, "step": "screenshot", "status": "PASS", "duration": 500, ... },
+        { "index": 3, "step": "compare", "status": "PASS", "fidelity": 94.7, ... }
+    ],
+    "summary": {
+        "total": 5, "passed": 4, "failed": 1,
+        "fidelity": 94.7
+    },
+    "outputDir": "/tmp/browser-test-xxx"
+}
+```