⚡

预览测试Skill preview-testing

这个技能用于Vercel预览部署的全面端到端和安全测试，结合Playwright自动化与Claude-in-Chrome MCP进行交互式调试，包括冒烟测试、视觉回归、安全测试（如OWASP LLM01、配额绕过、Stripe Webhook）、GDPR区域检查和npm审计，确保应用质量和安全合规。关键词：Vercel预览部署、E2E测试、安全测试、Playwright自动化、Claude-in-Chrome MCP、CI/CD、DevOps、测试自动化。

测试 0 次安装 0 次浏览 更新于 3/18/2026

name: 预览测试 description: Vercel预览部署的全面端到端和安全测试。结合Playwright自动化与Claude-in-Chrome MCP进行交互式调试。在PR创建、合并前或手动输入/preview-test时激活。

预览测试

Vercel预览部署的全面端到端和安全测试

触发条件

此技能在以下情况激活：

  • /preview-test - 手动调用
  • PR针对main或develop分支创建后
  • 合并前用于生产批准

功能

功能 时长 描述
冒烟测试 <2分钟 关键用户流程（登录、上传、分析）
视觉回归测试 <3分钟 截图对比，1%容差
安全测试 <5分钟 OWASP LLM01、配额绕过、Stripe Webhook
DSGVO区域检查 <30秒 验证法兰克福（fra1）区域
npm审计 <1分钟 依赖漏洞扫描

用法

# 标准：冒烟 + 视觉 + 安全
/preview-test

# 仅安全测试
/preview-test --security

# 使用AI探索性测试（可选）
/preview-test --ai

安全测试（OWASP LLM Top 10 2025）

提示注入（LLM01） - 关键

  • 直接注入（越狱、DAN、角色操纵）
  • 系统提示提取预防
  • 通过伪造历史的上下文劫持
  • 通过文件上传的间接注入
  • 多语言绕过尝试

文件： tests/security/prompt-injection.spec.ts

配额绕过 - 关键（成本风险）

  • API认证绕过
  • 邮箱欺骗预防
  • 演示模式滥用
  • 配额检查中的竞态条件
  • 测试用户邮箱发现

文件： tests/security/quota-bypass.spec.ts

Stripe Webhook安全（PCI-DSS）

  • 签名验证
  • 重放攻击预防
  • 负载操纵检测
  • 订阅欺诈预防

文件： tests/security/stripe-webhook.spec.ts

工作流

1. 预部署门禁（quality-gate.yml）
   └── TypeScript检查
   └── 单元测试
   └── 构建验证

2. 预览部署
   └── 生成Vercel预览URL
   └── 等待30秒预热

3. 冒烟测试（Playwright，<2分钟）
   └── 主页加载
   └── 登录流程工作
   └── 关键路径：上传 → 分析

4. 视觉回归测试（Playwright，<3分钟）
   └── 与基线截图对比
   └── 移动端 + 桌面端断点

5. 安全测试（Playwright，<5分钟）[关键]
   └── 配额绕过测试
   └── 提示注入测试
   └── Stripe Webhook安全

6. GDPR区域检查
   └── 验证fra1（法兰克福）区域

7. 批准门禁
   └── 所有测试通过 → PR评论“准备合并”
   └── 安全失败 → 阻止合并

Claude-in-Chrome MCP集成

除了自动化的Playwright测试，还通过MCP提供交互式浏览器工具。这些工具适用于：

  • 视觉调试 在开发期间
  • 临时测试 无需测试脚本
  • GIF录制 用于PR文档
  • 实时控制台/网络检查

何时使用哪种工具？

情况 工具 原因
自动化CI/CD测试 Playwright npm run test:e2e 快速、无头、可重现
视觉检查 Claude-in-Chrome read_page 可访问性树、结构化
为PR截图 Claude-in-Chrome computer 本地保存、真实Chrome
记录用户流程 Claude-in-Chrome gif_creator 动画GIF
调试控制台错误 Claude-in-Chrome read_console_messages 实时JS错误
检查API调用 Claude-in-Chrome read_network_requests XHR/Fetch调试

交互式预览测试（Claude-in-Chrome）

// 1. 初始化浏览器标签上下文
mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true })

// 2. 为预览创建新标签
mcp__claude-in-chrome__tabs_create_mcp()

// 3. 导航到预览URL
mcp__claude-in-chrome__navigate({
  url: "https://your-app-xyz.vercel.app",
  tabId: <id>
})

// 4. 可访问性快照（比截图更适合结构）
mcp__claude-in-chrome__read_page({ tabId: <id> })

// 5. 查找交互元素
mcp__claude-in-chrome__find({
  query: "登录按钮",
  tabId: <id>
})

// 6. 点击元素
mcp__claude-in-chrome__computer({
  action: "left_click",
  ref: "ref_123",  // 来自查找结果
  tabId: <id>
})

// 7. 保存截图
mcp__claude-in-chrome__computer({
  action: "screenshot",
  tabId: <id>
})

GIF录制用于PR文档

// 1. 开始录制
mcp__claude-in-chrome__gif_creator({
  action: "start_recording",
  tabId: <id>
})

// 2. 第一帧截图
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: <id> })

// 3. 执行用户流程（登录、上传等）
mcp__claude-in-chrome__computer({
  action: "left_click",
  coordinate: [x, y],
  tabId: <id>
})

// 4. 等待页面转换
mcp__claude-in-chrome__browser_wait_for({
  text: "欢迎",
  tabId: <id>
})

// 5. 最后一帧截图
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: <id> })

// 6. 停止录制
mcp__claude-in-chrome__gif_creator({
  action: "stop_recording",
  tabId: <id>
})

// 7. 导出GIF
mcp__claude-in-chrome__gif_creator({
  action: "export",
  tabId: <id>,
  filename: "login-flow-preview.gif",
  download: true,
  options: { quality: 15 }  // 1-30，越低文件越小
})

调试：控制台与网络

// 检查控制台中的JavaScript错误
mcp__claude-in-chrome__read_console_messages({
  tabId: <id>,
  onlyErrors: true,
  pattern: "error|exception"
})

// 检查API请求
mcp__claude-in-chrome__read_network_requests({
  tabId: <id>,
  urlPattern: "/api/"  // 仅后端调用
})

示例：完整的交互式预览测试

用户："测试预览 https://your-app-abc123.vercel.app"

Claude执行：
1. tabs_context_mcp → 获取标签ID
2. tabs_create_mcp → 创建新标签
3. navigate → 打开预览URL
4. read_page → 检查可访问性快照
5. find → 搜索“登录按钮”
6. computer(screenshot) → 基线截图
7. computer(left_click) → 点击登录按钮
8. read_console_messages → 检查JS错误
9. 报告："登陆页面正确，无控制台错误"

本地执行

# 所有预览测试（针对本地开发服务器）
npm run test:e2e

# 仅安全测试
npx playwright test tests/security/ --project=chromium

# 针对Vercel预览URL
BASE_URL=https://preview-xxx.vercel.app npx playwright test tests/security/

CI/CD集成

工作流在.github/workflows/preview-test.yml中定义，并在针对main或develop的PR上自动运行。

PR评论（自动）

每次运行后，创建带有测试结果的评论：

## 预览部署测试结果

| 测试套件             | 状态     |
| -------------------- | -------- |
| 冒烟测试            | ✅ 成功 |
| 视觉回归测试        | ✅ 成功 |
| 安全测试（OWASP）   | ✅ 成功 |
| GDPR区域（fra1）    | ✅ 成功 |
| npm审计             | ⚠️ 失败 |

阻止逻辑

  • 冒烟测试：必须通过
  • 安全测试：必须通过（关键）
  • 视觉回归测试：失败时警告，不阻止
  • npm审计：失败时警告，不阻止

GDPR合规

  • 欧盟数据驻留：所有测试验证法兰克福（fra1）区域
  • 无真实用户数据：合成测试数据（faker.js）
  • 截图在欧盟：Playwright报告存储在GitHub Actions（欧盟区域）
  • 审计追踪：安全测试报告保留30天

预期输出

运行/preview-test后：

预览测试完成

结果：
✅ 冒烟测试：8/8 通过
✅ 视觉回归测试：0 差异
✅ 安全测试：45/45 通过
  - 提示注入：15 个测试
  - 配额绕过：18 个测试
  - Stripe Webhook：12 个测试
✅ GDPR区域：fra1 已验证
⚠️ npm审计：2 个中度漏洞

推荐：准备合并到main

故障排除

安全测试被跳过

测试使用test.skip(!isVercelDeployment, ...)，仅针对生产类Vercel预览运行。本地由于某些测试（如速率限制）需要真实的无服务器环境，它们被跳过。

解决方案：

# 针对Vercel预览测试
BASE_URL=https://your-preview-url.vercel.app npx playwright test tests/security/

视觉回归基线缺失

首次运行时，创建基线截图。更改被标记为差异。

解决方案：

# 更新基线
npx playwright test tests/e2e/visual-regression.spec.ts --update-snapshots

来源