🛠️ 開発・MCP コミュニティ

browser-e2e-tester

ブラウザ上でエンドツーエンドテストを実行し、機能の検証、ユーザーフローの確認、機能の完成度テストなどを行うことで、Webアプリケーションの品質を保証するSkill。

📜 元の英語説明(参考)

Browser-based E2E testing for feature verification. Use when running end-to-end tests, validating features in browser, verifying user flows, or testing feature completion.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o browser-e2e-tester.zip https://jpskill.com/download/9388.zip && unzip -o browser-e2e-tester.zip && rm browser-e2e-tester.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9388.zip -OutFile "$d\browser-e2e-tester.zip"; Expand-Archive "$d\browser-e2e-tester.zip" -DestinationPath $d -Force; ri "$d\browser-e2e-tester.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して browser-e2e-tester.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → browser-e2e-tester フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Browser E2E Tester

機能の実装が受け入れ基準を満たしているか検証するために、ブラウザベースのエンドツーエンドテストを実行します。

クイックスタート

機能テストの実行

from scripts.e2e_tester import E2ETester

tester = E2ETester(project_dir)
result = await tester.test_feature("auth-001")

if result.passed:
    print(f"Feature verified: {result.feature_id}")
else:
    print(f"Failed: {result.failures}")

すべてのテストの実行

results = await tester.test_all_features()
print(f"Passed: {results.passed}/{results.total}")

E2E テストのワークフロー

┌─────────────────────────────────────────────────────────────┐
│                    E2E TEST WORKFLOW                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1. SETUP                                                   │
│     ├─ 機能の受け入れ基準をロードします                    │
│     ├─ テストサーバーを起動します (必要な場合)                       │
│     ├─ ブラウザの自動化を初期化します                       │
│     └─ テストのタイムアウトを設定します                                    │
│                                                             │
│  2. EXECUTE                                                 │
│     ├─ 機能のエントリーポイントに移動します                     │
│     ├─ テストステップを実行します                                  │
│     ├─ 失敗時にスクリーンショットをキャプチャします                      │
│     └─ テストアーティファクトを記録します                               │
│                                                             │
│  3. VERIFY                                                  │
│     ├─ 期待される結果を確認します                             │
│     ├─ UI の状態を検証します                                   │
│     ├─ API のレスポンスを検証します                                │
│     └─ データの永続性をアサートします                             │
│                                                             │
│  4. REPORT                                                  │
│     ├─ テストレポートを生成します                               │
│     ├─ 機能の状態を更新します                               │
│     └─ 失敗したアーティファクトを保存します                             │
│                                                             │
└─────────────────────────────────────────────────────────────┘

テスト結果の構造

@dataclass
class TestResult:
    feature_id: str
    passed: bool
    duration_ms: int
    steps_executed: int
    steps_passed: int
    failures: list[str]
    screenshots: list[Path]
    artifacts: dict

サポートされているテストフレームワーク

Framework	Integration	Use Case
Playwright	Native	最新のウェブアプリ
Puppeteer	Adapter	Chrome に特化
Selenium	Adapter	レガシーブラウザ
Cypress	CLI	コンポーネントテスト

機能の受け入れ形式

{
  "feature_id": "auth-001",
  "acceptance_criteria": [
    {
      "step": "ログインページに移動",
      "action": "goto",
      "target": "/login"
    },
    {
      "step": "認証情報を入力",
      "action": "fill",
      "target": "#email",
      "value": "test@example.com"
    },
    {
      "step": "フォームを送信",
      "action": "click",
      "target": "button[type=submit]"
    },
    {
      "step": "リダイレクトを検証",
      "action": "assert_url",
      "expected": "/dashboard"
    }
  ]
}

統合ポイント

coding-agent: 実装後にテストをトリガーします
progress-tracker: テストメトリクスを報告します
error-recoverer: テストの失敗を処理します
checkpoint-manager: 失敗時に状態を復元します

参考文献

references/E2E-PATTERNS.md - テストパターン
references/BROWSER-AUTOMATION.md - 自動化ガイド

スクリプト

scripts/e2e_tester.py - コアテスター
scripts/browser_controller.py - ブラウザの自動化
scripts/test_reporter.py - レポートの生成
scripts/acceptance_parser.py - 基準パーサー

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Browser E2E Tester

Runs browser-based end-to-end tests to verify feature implementation meets acceptance criteria.

Quick Start

Run Feature Tests

from scripts.e2e_tester import E2ETester

tester = E2ETester(project_dir)
result = await tester.test_feature("auth-001")

if result.passed:
    print(f"Feature verified: {result.feature_id}")
else:
    print(f"Failed: {result.failures}")

Run All Tests

results = await tester.test_all_features()
print(f"Passed: {results.passed}/{results.total}")

E2E Testing Workflow

┌─────────────────────────────────────────────────────────────┐
│                    E2E TEST WORKFLOW                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1. SETUP                                                   │
│     ├─ Load feature acceptance criteria                    │
│     ├─ Start test server (if needed)                       │
│     ├─ Initialize browser automation                       │
│     └─ Set test timeout                                    │
│                                                             │
│  2. EXECUTE                                                 │
│     ├─ Navigate to feature entry point                     │
│     ├─ Execute test steps                                  │
│     ├─ Capture screenshots on failure                      │
│     └─ Record test artifacts                               │
│                                                             │
│  3. VERIFY                                                  │
│     ├─ Check expected outcomes                             │
│     ├─ Validate UI state                                   │
│     ├─ Verify API responses                                │
│     └─ Assert data persistence                             │
│                                                             │
│  4. REPORT                                                  │
│     ├─ Generate test report                                │
│     ├─ Update feature status                               │
│     └─ Store failure artifacts                             │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Test Result Structure

@dataclass
class TestResult:
    feature_id: str
    passed: bool
    duration_ms: int
    steps_executed: int
    steps_passed: int
    failures: list[str]
    screenshots: list[Path]
    artifacts: dict

Supported Test Frameworks

Framework	Integration	Use Case
Playwright	Native	Modern web apps
Puppeteer	Adapter	Chrome-focused
Selenium	Adapter	Legacy browsers
Cypress	CLI	Component tests

Feature Acceptance Format

{
  "feature_id": "auth-001",
  "acceptance_criteria": [
    {
      "step": "Navigate to login page",
      "action": "goto",
      "target": "/login"
    },
    {
      "step": "Enter credentials",
      "action": "fill",
      "target": "#email",
      "value": "test@example.com"
    },
    {
      "step": "Submit form",
      "action": "click",
      "target": "button[type=submit]"
    },
    {
      "step": "Verify redirect",
      "action": "assert_url",
      "expected": "/dashboard"
    }
  ]
}

Integration Points

coding-agent: Triggers tests after implementation
progress-tracker: Reports test metrics
error-recoverer: Handles test failures
checkpoint-manager: Restores state on failure

References

references/E2E-PATTERNS.md - Test patterns
references/BROWSER-AUTOMATION.md - Automation guide

Scripts

scripts/e2e_tester.py - Core tester
scripts/browser_controller.py - Browser automation
scripts/test_reporter.py - Report generation
scripts/acceptance_parser.py - Criteria parser