使用 Claude Code 自动化页面 E2E 测试

为什么需要页面测试自动化？

Web 开发者在页面开发完成后，花多少时间进行质量验证？跨浏览器测试、链接检查、无障碍验证、SEO 检查、图片优化…手动验证所有这些项目，每页需要超过30分钟。

更大的问题是一致性。在繁忙的日程中，某些项目可能会被遗漏，或者不同负责人的验证标准可能不同。

为了解决这个问题，我使用 Claude Code 和 Playwright 构建了页面 E2E 测试自动化系统。

系统概述

# 通过单一命令自动验证8个质量项目
/test-page https://jangwook.net/en/

这一个命令会自动测试以下项目：

架构

graph TB
    subgraph CC["Claude Code"]
        CMD["test-page 命令"]
        AGT["page-tester 代理"]
        SKL["page-test 技能"]
    end

    subgraph TO["Test Orchestrator"]
        PLAN["测试计划制定"]
        EXEC["并行执行"]
        COLLECT["结果收集"]
    end

    subgraph TM["Test Modules"]
        BROWSER["浏览器测试"]
        LINK["链接验证"]
        A11Y["无障碍"]
        IMG["图片优化"]
        SEO["SEO 验证"]
        MOBILE["移动端响应式"]
    end

    subgraph Tools
        PW["Playwright"]
        CDT["Chrome DevTools MCP"]
        AXE["Axe-core"]
    end

    CMD --> AGT --> SKL
    SKL --> PLAN --> EXEC
    EXEC --> BROWSER & LINK & A11Y & IMG & SEO & MOBILE
    BROWSER --> PW
    A11Y --> AXE
    SEO --> CDT

    COLLECT --> RPT["报告生成"]

核心组件有三个：

1. Commands（/test-page）：用户界面
2. Agents（page-tester）：测试编排
3. Skills（page-test）：可重用的测试逻辑

实现方法

1. 定义斜杠命令

创建 .claude/commands/test-page.md 文件：

# 页面测试命令

自动验证网页质量。

## 使用方法

```bash
/test-page <url> [options]
```

## 验证项目

1. **跨浏览器兼容性** (P0)
2. **链接完整性** (P0)
3. **无障碍** (P0)
4. **移动端响应式** (P0)
5. **图片优化** (P1)
6. **SEO 验证** (P1)
...

2. 代理实现

page-tester 代理执行以下工作流程：

sequenceDiagram
    participant User as 用户
    participant Command as test-page
    participant Agent as page-tester
    participant PW as Playwright
    participant CDT as Chrome DevTools

    User->>Command: /test-page URL
    Command->>Agent: 测试请求

    Agent->>PW: 启动浏览器
    PW-->>Agent: 页面加载完成

    par 并行测试
        Agent->>PW: 链接验证
        Agent->>CDT: 性能测量
        Agent->>PW: 无障碍检查
    end

    Agent-->>User: 结果报告

# Page Tester 代理

用于全面测试网页质量的专业代理。

## 角色

- 页面加载和渲染验证
- 跨浏览器兼容性测试
- 无障碍 (a11y) 检查
- SEO 优化状态确认
- 性能指标收集

## 使用工具

- **Playwright**: 浏览器自动化和截图
- **Chrome DevTools MCP**: 性能分析和网络监控
- **Axe-core**: 无障碍检查

## 工作流程

1. 接收目标 URL
2. 启动浏览器实例
3. 并行执行各测试模块
4. 收集和分析结果
5. 生成 Markdown 报告

## 输出格式

测试结果以以下格式的 Markdown 报告生成：
- 总分和等级
- 各类别详细结果
- 发现的问题和改进建议
- 截图附件

3. MCP 工具集成

结合 Chrome DevTools MCP 和 Playwright 构建强大的测试环境：

// 使用 Chrome DevTools MCP 进行性能分析
const performanceResults = await mcp_chrome_devtools_performance_start_trace({
  reload: true,
  autoStop: true
});

// 使用 Playwright 进行截图和无障碍分析
const snapshot = await mcp_chrome_devtools_take_snapshot();
const screenshot = await mcp_chrome_devtools_take_screenshot({
  fullPage: true
});

实际测试结果

以下是 https://jangwook.net/en/ 页面的实际测试结果：

综合评价：有条件通过（75/100分）

发现的主要问题

1. 图片优化问题

hero-image.webp: 600×600px → 382×192px（约可减少75%）

解决方案：

<img
  srcset="hero-400w.webp 400w, hero-800w.webp 800w"
  sizes="(max-width: 768px) 100vw, 400px"
  src="hero-400w.webp"
  alt="..."
  loading="lazy">

2. 触摸目标尺寸未达标

WCAG 推荐的最小尺寸为 44×44px。当前导航链接高度为 36px，不足。

/* 解决方案 */
a, button {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px;
}

关键洞察

构建这个自动化系统获得的洞察：

1. 应用 80/20 法则

不要试图完美实现所有测试。仅6个 P0 项目就能发现 80% 的质量问题。

2. AI 分析的价值

真正的自动化不仅是说”图片太大”，而是建议”如何修复”。这是 Claude 分析能力发挥作用的地方。

3. 渐进式改进

不需要一开始就创建完美的系统：

第1周：基础框架 + 3个 P0 测试
第2周：完成 P0 + 控制台报告器
第3周：P1 测试 + HTML 报告
第4周：AI 分析 + 改进建议

4. 成果的可用性

生成的 Markdown 报告可以：

• 作为团队审查材料使用
• 自动归档到 Notion
• 通过 Slack 通知共享
• 集成到 CI/CD 流水线

可扩展性

该系统可以向多个方向扩展：

graph LR
    subgraph Current["当前实现"]
        CORE["页面测试核心"]
    end

    subgraph Extension["扩展选项"]
        VRT["视觉回归测试"]
        CICD["CI/CD 集成"]
        MULTI["多语言验证"]
        PERF["性能追踪"]
    end

    CORE --> VRT
    CORE --> CICD
    CORE --> MULTI
    CORE --> PERF

• 视觉回归测试：通过截图比较检测 UI 变化
• CI/CD 集成：每个 PR 自动执行测试
• 多语言内容验证：检查翻译遗漏、语言一致性
• 时间序列性能追踪：Core Web Vitals 历史监控

结论

使用 Claude Code 进行页面 E2E 测试自动化，提供的价值超越了简单的时间节省：

1. 一致的质量标准应用
2. 即时反馈实现快速改进
3. 基于 AI 的洞察做出更好的决策
4. 文档化的质量历史积累

在下一个项目中尝试应用这个系统。虽然初始设置需要时间，但从长远来看，可以同时提高团队生产力和网站质量。

参考资料

• Playwright 官方文档
• WCAG 2.1 指南
• Core Web Vitals
• Axe-core 无障碍测试