Claude Codeでページ E2E テストを自動化する

なぜページテスト自動化が必要か？

Webパブリッシャーがページ開発後、品質検証にどれだけの時間を費やしていますか？クロスブラウザテスト、リンク確認、アクセシビリティ検証、SEOチェック、画像最適化…すべての項目を手動で確認するには、ページあたり30分以上かかります。

より大きな問題は一貫性です。忙しいスケジュールの中で特定の項目を見落としたり、担当者によって検証基準が異なることがあります。

この問題を解決するために、Claude CodeとPlaywrightを活用したページE2Eテスト自動化システムを構築しました。

システム概要

# 単一コマンドで8つの品質項目を自動検証
/test-page https://jangwook.net/en/

このコマンド1つで以下の項目が自動的にテストされます：

アーキテクチャ

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["レポート生成"]

コア構成要素は3つです：

1. Commands（/test-page）：ユーザーインターフェース
2. Agents（page-tester）：テストオーケストレーション
3. Skills（page-test）：再利用可能なテストロジック

実装方法

1. スラッシュコマンド定義

.claude/commands/test-page.mdファイルを作成します：

# ページテストコマンド

Webページの品質を自動で検証します。

## 使用方法

```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 エージェント

Webページの品質を総合的にテストする専門エージェントです。

## 役割

- ページの読み込みとレンダリング検証
- クロスブラウザ互換性テスト
- アクセシビリティ（a11y）検査
- SEO最適化状態確認
- パフォーマンスメトリクス収集

## 使用ツール

- **Playwright**: ブラウザ自動化とスクリーンショット
- **Chrome DevTools MCP**: パフォーマンス分析とネットワーク監視
- **Axe-core**: アクセシビリティ検査

## ワークフロー

1. 対象URL受信
2. ブラウザインスタンス起動
3. 各テストモジュールを並列実行
4. 結果収集と分析
5. マークダウンレポート生成

## 出力形式

テスト結果は以下の形式のマークダウンレポートで生成されます：
- 総合スコアと等級
- カテゴリ別詳細結果
- 発見された問題と改善提案
- スクリーンショット添付

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の法則を適用

すべてのテストを完璧に実装しようとしないでください。P0項目6つだけで80%の品質問題を発見できます。

2. AI分析の価値

単に「画像が大きい」ではなく、「どう修正すべきか」まで提案することが真の自動化です。ここでClaudeの分析能力が輝きます。

3. 段階的な改善

最初から完璧なシステムを作る必要はありません：

Week 1: 基本フレームワーク + P0テスト3つ
Week 2: P0完成 + コンソールレポーター
Week 3: P1テスト + HTMLレポート
Week 4: AI分析 + 改善提案

4. 成果物の活用性

生成されたマークダウンレポートは：

• チームレビュー資料として活用
• 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. 文書化された品質履歴の蓄積

次のプロジェクトでこのシステムを適用してみてください。初期設定に時間がかかりますが、長期的にはチームの生産性とWebサイトの品質の両方を向上させることができます。

参考資料

• Playwright公式ドキュメント
• WCAG 2.1ガイドライン
• Core Web Vitals
• Axe-core アクセシビリティテスト