Claude Code Skills でテストを自動化する方法

UIをリファクタリングするたびに壊れてしまう脆いテストスイートや、ローカルではパスするのにCIで失敗する不安定なE2Eテストにうんざりしているなら、Claude Code Skillsがより良い解決策を提供します。これらのAIパワードワークフローは、テストを作成するだけでなく、実行し、失敗をデバッグし、壊れたセレクターを更新し、アプリの進化に合わせて継続的に適応します。

💡

テストが開発を遅らせていませんか？Claude CodeをApidogと組み合わせることで、AIを活用したフロントエンドテストとビジュアルAPIデバッグによるフルスタック自動化を実現できます。両方無料で試せます：claude.aiとapidog.com。AIでより速く構築しましょう。

Webアプリのテストには、単体テスト、結合テスト、コンポーネントテスト、E2Eフロー、API契約など、さまざまなテストをやりくりする必要があります。Claude Code Skillsはこれらすべてを自動化します。ユーザーが何をするかを記述するだけで、Claudeは包括的なテストスイートを生成し、実行し、失敗を修正し、結果を報告します。脆いスクリプトも、手作業でのメンテナンスも不要です。ただ動作するテストがあるだけです。

Claude Code Skillsがテストに強力である理由:

自律実行: コマンドを再入力することなく、テストの作成、実行、デバッグ、修正を行います
フレームワークにとらわれない: Jest、Vitest、Playwright、Cypress、Puppeteerとシームレスに連携します
インテリジェントなデバッグ: テストの失敗を分析し、根本原因を提案し、修正を適用します
UI認識: DOMの変更を検出し、壊れたロケーターを更新し、セレクターの脆弱性を防ぎます
フルスタック: 単体テスト、モック、E2Eフロー、API検証を1つのセッションで処理します

スケーラブルなテストのためにClaude Code Skillsをどのように活用できるか見ていきましょう。

テストのためのClaude Code Skillsを理解する

テストスキルとは？

Claude Code Skillsは、Claude Codeのテスト機能を拡張する、カスタム可能で再利用可能なAIワークフローです。これらを次のようなインテリジェントなテストランナーだと考えてください。

複雑な複数ステップのテストシナリオを自律的に実行する
リトライロジックやタイムアウトに関して文脈に応じた決定を下す
ファイルにアクセスし、コマンドを実行し、テスト出力を分析するなど
テストセッション間で状態を維持する
既存のテストフレームワークやCI/CDツールと統合する

厳格なロジックに従う従来のテストスクリプトとは異なり、スキルはClaudeの推論を活用してエッジケースを処理し、改善を提案し、変化する状況に適応します。

スキルの仕組み

スキルはいくつかの主要なメカニズムを通じて機能します。

1. ユーザーが呼び出し可能なコマンド

# スラッシュコマンドでスキルを実行する
/run-unit-tests --coverage
/run-e2e-tests --env production
/fix-flaky-tests --retry 3

2. 許可されたツール

スキルは使用できるツールを指定します。

Bash: テストコマンドを実行する
Read, Write, Edit: テストファイルを管理する
Glob, Grep: テストパターンを検索する
WebFetch: テストデータを取得する
Task: 複雑なテストシナリオのためにサブエージェントを生成する

3. ライフサイクルフック

スキルは特定の時点でアクションをトリガーできます。

SessionStart: スキル開始時
PreToolUse: テスト実行前
PostToolUse: テスト完了後
Stop: スキル終了時

4. プランニングファイル

スキルは、テストの進行状況、失敗、改善を追跡するためにMarkdownファイルを使用して状態を維持します。

スキルがWebテストに優れている理由

従来のテストスクリプトは、予期せぬ状況に直面すると簡単に壊れてしまいます。スキルはテストにインテリジェンスをもたらします。

文脈理解: テスト出力を読み取り、失敗を理解し、修正を提案できます
適応的な動作: さまざまなフレームワーク、ブラウザ、環境に適応します
自己文書化: 自然言語の指示によりテストワークフローが透過的になります
エラー回復: 不安定さを診断し、堅牢なパターンを提案できます
継続的改善: デプロイパターンに基づいてテストカバレッジを向上させます

主要なテスト機能

1. 動的なテスト生成

プロンプト: 「ユーザーのチェックアウトフロー（商品の追加、割引適用、支払い、注文確認）のE2Eテストを作成してください。」

Claudeは以下を生成します。

// 現実的なアサーションを含む完全なPlaywright仕様
// クロスブラウザテストのセットアップ
// 失敗時のスクリーンショットキャプチャ
// パフォーマンスアサーション

本番環境ですぐに使えるコードをスキャフォールディングするわけではありません。

2. 実行とイテレーション

# Claude Codeセッションで
> チェックアウトテストを実行し、失敗を修正する

# Claudeの動作:
npm test -- checkout.spec.js
# 支払いステップでテストが失敗
# Claudeが失敗を分析
# モックエンドポイントを更新
# 明示的な待機を追加
# テストを再実行
# すべて成功 ✓

3. フレームワークインテリジェンス

React + Jestの場合？ ClaudeはfireEvent、waitFor、スクリーンクエリを使用したReact Testing Libraryのテストを生成します。

Vue + Vitestの場合？ mount、ライフサイクルフック、Vue固有のパターンを使用します。

Playwrightの場合？ 堅牢なセレクターを使用してクロスブラウザの仕様を生成します。

Claudeはプロジェクトが使用するあらゆるフレームワークに適応します。

4. セレクターの堅牢性

HTMLをリファクタリングする際、Claudeは以下を認識します。

// ❌ 脆い
getByXPath("//button[2]/span[1]")

// ✓ 堅牢
getByRole('button', { name: /checkout/i })
getByTestId('checkout-button')

堅牢なパターンを自動的に提案し、適用します。

5. モックとAPI統合

Claudeは以下をシームレスに組み合わせます。

分離された単体/統合テストのための**フロントエンドモック** (MSW)
契約検証のための**APIテスト** (Apidog)
ステージングE2Eテストのための**実際のバックエンド**

単一のプロンプト: 「ログインフローをテストしてください。認証APIをモックしてください。レスポンスがOpenAPIスキーマと一致するか検証してください。」

テストスキルの構成

ディレクトリ構造

テストスキルは、.claude/skills/内に次のレイアウトで配置されます。

.claude/
├── skills/
│   ├── unit-tests/
│   │   ├── SKILL.md              # スキルマニフェスト
│   │   ├── planning.md           # テストの進捗追跡
│   │   └── patterns/             # テストパターン
│   ├── e2e-tests/
│   │   ├── SKILL.md
│   │   └── scenarios/            # E2Eシナリオ
│   └── api-tests/
│       └── SKILL.md
└── skills.md                     # すべてのスキルのインデックス

SKILL.mdマニフェスト

すべてのスキルはYAMLフロントマターで始まり、その後にMarkdownの指示が続きます。

---
name: e2e-testing
version: "1.0.0"
description: ウェブアプリケーションのE2Eテスト
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - Grep
  - Glob
hooks:
  SessionStart:
    - matcher: command
      command: "echo '[E2E Tests] ブラウザ自動化テストを開始します...'"
  Stop:
    - matcher: command
      command: "echo '[E2E Tests] テストスイートが完了しました。上記の結果を確認してください。'"
---

# E2Eテストスキル

Playwrightを使用したウェブアプリケーションの包括的なエンドツーエンドテスト。

## 使用方法

```bash
/e2e-tests                    # すべてのE2Eテストを実行する
/e2e-tests --headed          # ブラウザを表示して実行する
/e2e-tests --project chrome  # 特定のブラウザで実行する
/e2e-tests --grep login      # 特定のテストを実行する

このスキルの機能

テスト実行

Playwrightを初期化する
ブラウザを起動する (Chrome、Firefox、Safari)
テスト仕様を実行する
失敗時にスクリーンショットをキャプチャする
HTMLレポートを生成する

失敗分析

エラーメッセージを解析する
セレクターの問題を特定する
タイムアウトの問題を検出する
不安定なテストの修正を提案する

レポート生成

テスト結果を要約する
失敗したシナリオをリストする
修復手順を提供する
test-reports/{timestamp}.mdに保存する

Claudeへの指示

呼び出された場合:

playwright.config.jsとテスト仕様を確認する
フィルターのためにコマンドライン引数を解析する
適切なオプションでPlaywrightを実行する
テスト実行をリアルタイムで監視する
発生した失敗を分析する
修正を提案する (例: セレクターの更新、待機の追加)
修正を適用して失敗したテストを再実行する
包括的なレポートを生成する
ステータスコードで終了する (0 = 成功、1 = 失敗)

初めてのテストスキルを構築する

実用的なスキル、つまり一般的なブラウザ自動化シナリオを処理するE2Eテストランナーを構築しましょう。

ステップ1: スキルディレクトリを作成する

mkdir -p .claude/skills/e2e-testing

ステップ2: スキルマニフェストを記述する

.claude/skills/e2e-testing/SKILL.mdを作成します。

---
name: e2e-testing
version: "1.0.0"
description: E2Eブラウザ自動化テスト
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - Grep
  - Glob
hooks:
  SessionStart:
    - matcher: command
      command: "echo '[E2E] Playwrightテストを初期化しています...'"
  Stop:
    - matcher: command
      command: "echo '[E2E] テスト実行が完了しました'"
---

# E2Eテストスキル

ウェブアプリケーションのブラウザ自動化テスト。

## テストパターン

このスキルは以下のテストパターンをサポートします。

**ナビゲーションテスト**
* ページの読み込みとリダイレクトの検証
* ページタイトルとURLの確認
* パンくずリストの検証

**フォームインタラクションテスト**
* 入力フィールドの入力
* フォームの送信
* エラーメッセージの検証
* フィールド検証の確認

**ユーザーフローテスト**
* ユーザーのジャーニーを完了する (ログイン → ダッシュボード → ログアウト)
* 複数ステップのワークフロー
* 状態の永続性

**クロスブラウザテスト**
* Chrome、Firefox、Safari
* レスポンシブデザイン
* モバイルビューポート

## エラー処理ルール

テスト失敗時:

1. セレクターの問題かを確認 → セレクターを更新
2. タイミングの問題かを確認 → 明示的な待機を追加
3. モックの問題かを確認 → MSWハンドラーを検証
4. 環境の問題かを確認 → 環境変数をチェック
5. 未解決の場合 → 詳細なエラーをログに記録して停止

## 指示

呼び出された場合:

1. **設定を検出する**
   * `playwright.config.js`を確認する
   * テストディレクトリ構造を特定する
   * コマンドライン引数を解析する

2. **環境を準備する**
   * 必要に応じてブラウザバイナリをインストールする
   * 環境変数を読み込む
   * モックを使用している場合はMSWを初期化する

3. **テストを実行する**
   * Playwrightテストコマンドを実行する
   * 出力をターミナルにストリームする
   * リアルタイムで失敗を監視する

4. **失敗を分析する**
   * テスト出力とエラーログを読み取る
   * 失敗の種類を特定する (セレクター、タイムアウト、アサーション)
   * 特定の修正を提案する

5. **修正を適用する**
   * 壊れたセレクターを更新する
   * 必要に応じて暗黙的な待機を追加する
   * モックレスポンスを変更する
   * 失敗したテストを再実行する

6. **レポートを生成する**
   * テスト総数、成功、失敗を要約する
   * すべての失敗と修復をリストする
   * HTMLレポートを作成する
   * ターミナルに表示する

7. **適切なステータスで終了する**
   * すべて成功した場合は0で終了
   * 失敗があった場合は1で終了

ステップ3: スキルを登録する

.claude/skills.mdに追加します。

# 利用可能なテストスキル

## E2Eテスト

### /e2e-tests
ウェブアプリケーションのブラウザ自動化テスト。
- **バージョン**: 1.0.0
- **使用方法**: `/e2e-tests [--headed] [--project browser]`
- **使用タイミング**: デプロイ前、UI変更後
- **実行時間**: テスト数に応じて5〜15分

ステップ4: スキルをテストする

# Claude Codeで
/e2e-tests --headed

ClaudeがE2Eテストを実行し、ブラウザを管理し、失敗を分析します。

高度なテストパターン

パターン1: マルチフレームワークテスト

Claude Codeは、フレームワークに基づいてテスト生成を適応させます。

## 自動検出とフレームワーク固有のテスト

`package.json`に以下が含まれている場合:
- **React + Jest** → `fireEvent`、`waitFor`、スクリーンクエリを使用したReact Testing Library
- **Vue + Vitest** → `mount`、ライフサイクルフック、ストア購読を使用したVue Test Utils
- **Playwright** → 堅牢なセレクターを使用したクロスブラウザE2E
- **Cypress** → `cy.*` APIを使用したコマンドベースの自動化

Claudeはフレームワークを自動的に検出し、適切なテストを生成します。

例: 同じプロンプトで異なる出力:

# プロンプト: 「ログインフォームをテストしてください」

# Reactの出力:
# 使用: fireEvent.change(), screen.getByLabelText(), waitFor()

# Vueの出力:
# 使用: mount(), wrapper.vm, store.commit()

# Playwrightの出力:
# 使用: page.getByLabel(), page.getByRole(), page.waitForURL()

パターン2: 不安定なテストのためのスマートリトライロジック

Claude Codeは、不安定なテストをインテリジェントに診断し、修正します。

## インテリジェントな不安定性処理

テストが断続的に失敗した場合:

1. **失敗を分析** → エラーログを読み取る
2. **根本原因を診断**:
   - セレクターベースの場合 → 堅牢なセレクターに更新
   - タイミングベースの場合 → 明示的な待機を追加
   - 非同期ベースの場合 → タイムアウトを増やす
   - モックベースの場合 → モックレスポンスを検証
3. **修正を適用** → テストコードを変更
4. **再実行** → テストを3回実行
5. **検証** → 修正が不安定性を解決したことを確認
6. **報告** → 将来の参照のためにパターンを文書化

出力例:

❌ テスト失敗: "element not found: #payment-button"
📊 分析: セレクターが特定しすぎている (リファクタリングでIDが変更された)
🔧 修正: #payment-button → button[name="pay-now"] に変更
✅ 再実行: 3回中3回パス
✓ 不安定性解消

CI/CDによる自動化

E2Eテストパイプライン

GitHub Actionsで包括的なE2Eテストを設定します。

# .github/workflows/e2e-tests.yml
name: E2Eテスト

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]
  schedule:
    - cron: '0 2 * * *'  # 夜間テスト

jobs:
  e2e:
    name: E2Eテスト - ${{ matrix.browser }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: 依存関係をインストール
        run: npm ci
      
      - name: Playwrightブラウザをインストール
        run: npx playwright install --with-deps ${{ matrix.browser }}
      
      - name: アプリケーションをビルド
        run: npm run build
      
      - name: E2Eテストを実行
        run: npx playwright test --project=${{ matrix.browser }}
      
      - name: テストレポートをアップロード
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report-${{ matrix.browser }}
          path: playwright-report/
          retention-days: 30
      
      - name: テスト結果を公開
        if: always()
        uses: EnricoMi/publish-unit-test-result-action@v2
        with:
          files: 'test-results/*.xml'
          check_name: E2Eテスト (${{ matrix.browser }})

Pre-Commitテストフック

壊れたテストがリポジトリに入るのを防ぎます。

# .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "プリコミットの単体テストを実行中..."
npm test -- --bail --findRelatedTests

if [ $? -ne 0 ]; then
  echo "❌ テストが失敗しました。コミットはブロックされました。"
  exit 1
fi

echo "✓ すべてのテストがパスしました"

Pre-Push検証

リモートにプッシュする前に検証します。

# .git/hooks/pre-push
#!/bin/bash

BRANCH=$(git rev-parse --abbrev-ref HEAD)

if [ "$BRANCH" = "main" ]; then
  echo "mainにプッシュする前にフルテストスイートを実行中..."
  npm test -- --coverage
  npx playwright test
elif [ "$BRANCH" = "develop" ]; then
  echo "developにプッシュする前にE2Eテストを実行中..."
  npx playwright test
fi

if [ $? -ne 0 ]; then
  echo "❌ 検証が失敗しました。プッシュはブロックされました。"
  exit 1
fi

echo "✓ すべての検証がパスしました"

Apidogとの組み合わせ

💡 プロのヒント: Claude Codeがフロントエンドテストを処理する一方、ApidogはAPIテストを処理します。これらを組み合わせることで、エンドツーエンドの信頼性が確保されます。

Claudeへのプロンプト: 「E2Eテストを実行する前に、ApidogですべてのAPIがパスすることを確認してください。APIテストが失敗した場合は、E2Eをスキップし、どのエンドポイントが壊れているかを報告してください。」

// e2e/pre-test-checks.js
import { execSync } from 'child_process';

async function runPreTestChecks() {
  console.log('🔍 APIを検証中...');
  
  try {
    // まずApidog CLIテストを実行
    execSync('apidog run --collection ./tests/api-collection.json --env ci', {
      stdio: 'inherit'
    });
    console.log('✓ APIテストがパスしました - E2Eに進みます');
  } catch (error) {
    console.error('✗ APIテストが失敗しました - E2Eをスキップします');
    process.exit(1);
  }

  console.log('🎭 E2Eテストを実行中...');
  execSync('npx playwright test', { stdio: 'inherit' });
}

runPreTestChecks();

これにより、セーフティゲートが作成されます。APIが壊れている場合、E2Eテストは自動的にスキップされます。

ベストプラクティスとトラブルシューティング

セレクターの堅牢性

問題: DOMがわずかに変更されたため、テストはローカルではパスするがCIでは失敗する。

解決策: 堅牢なセレクターを使用する。

// ❌ 脆い
const button = page.locator('button:nth-child(3)');

// ✓ 堅牢
const button = page.getByRole('button', { name: /submit/i });
const button = page.getByTestId('submit-button');

非同期の競合状態

問題: テストがボタンをクリックしたが、ページがまだ読み込まれていない。

解決策: 明示的な待機を使用する。

// ❌ 競合しやすい
await page.click('#submit');
await expect(page).toHaveURL(/dashboard/);

// ✓ 安全
await page.click('#submit');
await page.waitForURL(/dashboard/);

環境変数

問題: APIキーが利用できないためテストが失敗する。

解決策: .env.testを使用する。

// tests/setup.js
import dotenv from 'dotenv';
dotenv.config({ path: '.env.test' });

結論

Claude Code Skillsは、テストを単なる雑用から超能力へと変革します。ユーザーのジャーニーを記述するだけで、Claudeは包括的なテストスイートを生成し、実行し、失敗をデバッグし、問題を自律的に修正します。

APIテスト用のApidogと組み合わせることで、フルスタックのカバレッジを実現します。

レイヤー	ツール	カバレッジ
フロントエンド	Claude Code	ユーザーインタラクション、コンポーネント、UI
API	Apidog	スキーマ検証、契約、レスポンス
統合	両方	フロントエンドとAPIの整合性、モック同期

今すぐ始めましょう:

Claude Codeをインストール: npm install -g @anthropic-ai/claude-code
プロジェクトに移動: cd your-app
起動: claude

4. テストしたい内容を記述: 「チェックアウトフローのE2Eテストを作成してください」

5. Claudeが生成、実行、反復するのを見守る

AIを活用したテスト生成とインテリジェントなデバッグの組み合わせにより、不安定なテストが減り、CIパイプラインが高速化され、すべてのデプロイメントで自信が持てるようになります。脆いテストスクリプトのメンテナンスをやめ、Claude Code Skillsに重労働を任せて、あなたは機能の構築に集中しましょう。

不安定なテストをなくす準備はできましたか？Claude Codeをインストールし、APIテストのためにApidogを無料で試してください。より賢くコードを書き、より速くテストし、自信を持ってデプロイしましょう。

ボタン