💬

自然言語で書いたE2EテストをGitHub Actionsで実行する Claude Code Action × Playwright MCP

に公開
GitHub Actions
E2E テスト
Playwright
Claude Code
tech

はじめに

9割ぐらいAIで書いています
この記事では、Claude Code Actionを使ってGitHub Actions上でPlaywrightによる自動E2Eテストを実行する仕組みを構築した実験について紹介します。自然言語の指示だけでブラウザテストを自動実行する、従来とは全く異なるアプローチを試してみました。

実装したリポジトリ： https://github.com/IconOfCos/playwright-claude-code-action。

Claude Code Actionワークフローの詳細設計

基本構成と特徴

name: Claude Code Action Playwright Test
on:
  workflow_dispatch:  # 手動実行のみ（コスト・時間を考慮）

jobs:
  run-e2e-tests:
    runs-on: ubuntu-latest
    timeout-minutes: 10

1. 環境セットアップフェーズ

steps:
  - name: Checkout
    uses: actions/checkout@v4
  
  - name: Install dependencies
    run: npm ci
  
  - name: Install Playwright Browsers
    run: npx playwright install --with-deps
  
  - name: run todo app
    run: npm run serve &
  
  - name: Wait for server to be ready
    run: |
      timeout 30 bash -c 'until curl -f http://localhost:3000; do sleep 1; done'

ポイント：

  • Playwrightブラウザの事前インストールが必要
  • アプリケーションをバックグラウンドで起動（&）
  • サーバー起動待ちの確実な実装（curl + timeout）

2. テスト指示の動的生成

  - name: Create prompt
    run: |
      mkdir -p /tmp/claude-prompts
      for file in test-instructions/*.md; do
        cat "$file"
        echo ""
      done > /tmp/claude-prompts/prompt.txt

仕組み：

  • 複数のMarkdownファイルを単一プロンプトに結合
  • モジュール化されたテストケースの管理
  • プロンプトファイルの動的生成により柔軟性を確保

3. Claude Code Action実行設定

  - name: Run Claude Code for Playwright Test
    id: exec-tests
    uses: anthropics/claude-code-base-action@beta
    with:
      prompt_file: /tmp/claude-prompts/prompt.txt
      system_prompt: "localhostのサーバーは起動済みです"
      allowed_tools: "Bash,Bash,mcp__playwright__browser_close,mcp__playwright__browser_resize,mcp__playwright__browser_console_messages,mcp__playwright__browser_handle_dialog,mcp__playwright__browser_file_upload,mcp__playwright__browser_install,mcp__playwright__browser_press_key,mcp__playwright__browser_navigate,mcp__playwright__browser_navigate_back,mcp__playwright__browser_navigate_forward,mcp__playwright__browser_network_requests,mcp__playwright__browser_pdf_save,mcp__playwright__browser_take_screenshot,mcp__playwright__browser_snapshot,mcp__playwright__browser_click,mcp__playwright__browser_drag,mcp__playwright__browser_hover,mcp__playwright__browser_type,mcp__playwright__browser_select_option,mcp__playwright__browser_tab_list,mcp__playwright__browser_tab_new,mcp__playwright__browser_tab_select,mcp__playwright__browser_tab_close,mcp__playwright__browser_generate_playwright_test,mcp__playwright__browser_wait_for"
      mcp_config: .mcp.json
      timeout_minutes: "5"
      anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}

重要な設定項目：

allowed_tools

  • Bash: システムコマンド実行権限
  • mcp__playwright__: Playwright MCPツールへのアクセス

system_prompt

  • 実行環境の前提条件を明示
  • AIの判断を補助する重要な情報

mcp_config

  • MCP設定ファイルの指定
  • Playwrightとの連携設定を定義

timeout_minutes

  • AIの実行時間制限
  • コスト管理と無限ループ防止

4. 結果出力とアーティファクト保存

  - name: Upload Result
    if: steps.exec-tests.outputs.conclusion == 'success'
    uses: actions/upload-artifact@v4
    with:
      name: test-result.md
      path: ./test-result.md
      retention-days: 7

特徴：

  • テスト成功時のみアーティファクト保存
  • 7日間の保持期間設定
  • ダウンロード可能な形式での結果提供

Claude Code Actionの設定詳細

MCPの設定ファイル (.mcp.json)

Claude Code ActionがPlaywrightと連携するためのMCP設定：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--headless",
        "--no-sandbox"
      ]
    }
  }
}

実行フローの最適化

  1. 並列処理の回避: Playwright操作は逐次実行
  2. タイムアウト設定: 各段階での適切な時間制限
  3. エラーハンドリング: 失敗時の情報保存とデバッグ支援

Claude Code Actionの運用上の考慮点

コスト管理

API利用料金：

  • Claude Sonnet 4の従量課金
  • 実測値：1回の実行で約0.6ドル（約90円）
  • 6つのテストケース実行での実コスト
  • 頻繁な実行には不向き（月100回実行で9,000円）

実行時間：

  • 従来のPlaywrightテスト: 数秒～数分
  • Claude Code Action: 数分～十数分
  • AIの思考時間が大部分を占める

適切な実行タイミング

推奨される使用場面：

  • リリース前の最終確認: 手動でのworkflow_dispatch実行（月数回程度）
  • 週次/月次の定期検証: スケジュール実行でのリグレッション確認
  • 重要機能のPR検証: 特定ブランチでの受け入れテスト（重要機能のみ）
  • デモ前の動作確認: ステークホルダー向け準備

コスト的に避けるべき場面：

  • 毎回のコミット実行: 日50回で4,500円/月
  • 開発中の頻繁な確認: 1日10回で900円/日
  • 単純なテストの代替: ROIが見合わない

GitHub Actions特有の制約

実行時間制限：

  • GitHub Actionsの最大実行時間（6時間）内で完了する必要
  • timeout_minutes設定による適切な制限

並行実行制限：

  • 同時実行数の制限を考慮した運用
  • 複数PRでの同時実行時の影響

ログとデバッグ：

  • AIの思考プロセスがログに記録される
  • 失敗時のデバッグ情報が豊富

まとめ

Claude Code ActionをGitHub Actions上で活用することで、従来のE2Eテストとは全く異なる「AIによる自然言語テスト実行」を実現できました。

Claude Code Actionの価値

技術的な特徴：

  • MCP対応による外部ツールとの直接連携
  • GitHub Actions環境での安全な実行
  • 自然言語指示の柔軟な解釈と実行

運用上の利点：

  • テストコードの保守コスト削減
  • 非エンジニアによるテストケース作成
  • 要求仕様とテストの乖離防止

現実的な運用戦略

Claude Code Actionは従来のCIテストの代替ではなく、補完的なツールとして位置づけるのが現実的です：

  • 高頻度: 従来の高速テスト（単体テスト、統合テスト）
  • 重要タイミング: Claude Code Actionによる包括的な検証
  • 手動テスト: 完全に自動化困難な部分

GitHub Actions統合の意義

GitHub Actionsとの統合により：

  • 一元的な品質管理: テスト結果の集約と可視化
  • チーム全体での活用: 開発チーム外のメンバーも実行可能
  • 継続的改善: テストケースの蓄積と改善

この実験は、AI時代のソフトウェアテストの新しい可能性を示すものです。技術の成熟とコスト削減が進めば、より多くの現場で活用される日が来るでしょう。

参考リンク

Discussion