Playwright Autopilot

Selenium、Cypress、またはWebDriverIOを使用していますか？ E2Epilot は、Selenium JavaやSeleniumBaseなど、6つのフレームワークに同じAIトリアージエンジンを提供します。 ウェブサイト: e2epilot.com | npm: @e2epilot/cli

Claude Code プラグインで、Playwright E2Eテストを自律的にデバッグおよび修正します。テストを完全なアクションキャプチャ（DOMスナップショット、ネットワークリクエスト、コンソール出力、スクリーンショット）とともに実行し、シニアQAエンジニアのように障害を調査して修正を適用します。

https://github.com/user-attachments/assets/26f734a5-d05e-41c9-bc3f-2b58561c2ce0

クイックスタート

# Add the marketplace
/plugin marketplace add kaizen-yutani/playwright-autopilot

# Install the plugin
/plugin install kaizen-yutani/playwright-autopilot

次に、Claudeに失敗したテストの修正やスイート全体のトリアージを依頼します：

/playwright-autopilot:fix-e2e tests/checkout.spec.ts
/playwright-autopilot:triage-e2e e2e

または、必要なことを説明するだけでも、Claudeが自動的にMCPツールを使用します：

Fix all failing e2e tests in the "e2e" project

Related MCP server: Browser Testing MCP Server

機能

テスト実行中のすべてのブラウザアクションは、以下とともにキャプチャされます：

• 前後DOMスナップショット — 各クリック、入力、ナビゲーション前後のページのAriaツリー

• ネットワークリクエスト — URL、メソッド、ステータス、タイミング、リクエスト/レスポンスボディ

• コンソール出力 — エラー、警告、ログ（それらを生成したアクションと紐付け）

• スクリーンショット — 失敗時点でキャプチャ

テストが失敗した際、Claudeは推測を行いません。実際のページ状態を読み取り、失敗したAPIコールを確認し、アクションのタイムラインを通じて根本原因を追跡します。

仕組み

1. キャプチャフック

軽量なCJSフック（captureHook.cjs）が、NODE_OPTIONS --requireを通じてPlaywrightのテストワーカープロセスに注入されます。BrowserContext._initializeをモンキーパッチし、完全なコンテキストでブラウザアクションをキャプチャするインストゥルメンテーションリスナーを追加します。Playwrightのソースコードを変更する必要はなく、あらゆるPlaywrightインストールで動作します。

2. MCPツール

このプラグインは、Model Context Protocol を介して37個のツールを公開し、Claudeが必要に応じて呼び出します。これはトークン効率を考慮して設計されており、トレース全体をコンテキストにダンプするのではなく、Claudeが必要なものだけを取得します：

テスト実行とデバッグ:

インタラクティブなブラウザ探索:

browser_*ツールは実際のChromeインスタンスを起動し、Claudeがアプリケーションをインタラクティブに探索できるようにします。ページ遷移、要素クリック、フォーム入力、ARIAスナップショットを通じたページ状態の観察が可能です。各インタラクションは、タイミング、ネットワークリクエスト、DOM変更、更新されたスナップショットを返します。テストを書く前のアプリ理解、UI問題の視覚的なデバッグ、修正の検証に使用してください。

3. フローメモリ

テストの修正（または検証）後、プラグインは確認済みのアプリケーションフロー（ハッピーパスを構成するユーザーインタラクションのシーケンス）を保存します。これらのフローは.e2e-flows.jsonに永続化され、セッションをまたいで蓄積されます。

次にそのテストが壊れたとき、Claudeは意図されたユーザー体験をすでに把握しており、何が変更されたのかを即座に特定します。エージェントは時間とともに賢くなります。

4. 不安定性（Flaky）の検出

不安定なテストを特定するための2つの補完的なモードがあります：

retries: N — テストをN+1回、別々のPlaywrightプロセスで実行します。各実行には完全なアクションキャプチャを伴うrunIdが付与されます。FLAKY、CONSISTENT PASS、またはCONSISTENT FAILの判定を返します。2〜3回の再試行によるデバッグに最適です。

e2e_run_test(location: "tests/checkout.spec.ts:15", retries: 2)

repeatEach: N — ネイティブのPlaywright --repeat-eachを使用します。すべての反復を1つのプロセスで実行します。不安定性を確認するための高速なストレステストです（確信を得るには30〜100回を使用してください）。

e2e_run_test(location: "tests/checkout.spec.ts:15", repeatEach: 40)

5. 証拠バンドル

e2e_get_evidence_bundleは、すべての失敗証拠（エラー、再現手順、アクションタイムライン、失敗したネットワークリクエストとボディ、コンソールエラー、DOMスナップショット、スクリーンショット）を1つのレスポンスにパッケージ化します。6つ以上のツールを個別に呼び出す必要がなくなります。

outputFile: trueを渡すと、Jira添付用のMarkdownファイルがtest-reports/に書き出されます。

6. HTMLレポート

バッチ実行（locationなし）は、自動的に自己完結型のHTMLレポートを生成します：

• ステータスバッジ付きの合格/不合格の要約

• テストごとの折りたたみ可能なセクション

• アクションタイムライン、失敗したネットワークリクエスト、コンソールエラー

• 失敗時点のDOMスナップショット

• インラインBase64画像としてのスクリーンショット

レポートはtest-reports/report-<runId>.htmlに書き出されます。任意の実行に対して手動でe2e_generate_reportを呼び出すことも可能です。

7. スイートトリアージと健全性追跡

スイート全体を実行し、すべての失敗を分類して、管理用レポートを作成します：

/playwright-autopilot:triage-e2e e2e

Claudeは各失敗を既知の問題、アプリのバグ、テストの更新、不安定、または新規の失敗に分類します。既存のチケットについてはJiraと照合し、アプリのバグについては証拠バンドル付きで新規チケットを作成し、トレンド追跡のためにトリアージ実行を保存します。

e2e_get_statsは、スイートの健全性ダッシュボードを提供します。合格率の傾向、スコア順の不安定なテスト、失敗カテゴリの内訳、新規の失敗など、テストを実行することなくローカル履歴からすべて確認できます。

9. カバレッジ分析

e2e_suggest_testsはプロジェクト全体をスキャンし、カバレッジのギャップを見つけます：

1. 未テストのページオブジェクトメソッド — スペックから呼び出されていない.page.ts / .service.ts内のメソッド

2. 不足しているフローバリエーション — 前提条件（例：「ドラフトが存在しない」）を持つフローで、継続バリエーションが欠けているもの

3. 未カバーのフローステップ — 確認済みフローにリストされているが、どのスペックでも実行されていないアクション

10. アーキテクチャの認識

修正を書く前に、プラグインはプロジェクト内のページオブジェクト、サービス層、テストフィクスチャをスキャンします。既存のパターンに従います：

• 生のPlaywright呼び出しを書く代わりに、ページオブジェクトモデルのメソッドを使用

• ビジネス/サービス層の分離を尊重

• getByRole()、getByTestId()、Webファーストのアサーションを使用

• 最小限の差分を生成（通常は1〜2行の追加）

デバッグの哲学

このプラグインは厳格な診断手法に従います：

セレクタではなく、ユーザーフローで考える。 コードに触れる前に、意図されたユーザー体験をマッピングします。ステップが欠けている場合（ドロップダウンが選択されていない、必須フィールドが入力されていないなど）、既存のページオブジェクトメソッドを見つけて呼び出しを追加します。

4つの根本原因カテゴリ：

1. テストステップの欠落 — アプリが必要とするUIインタラクションをテストがスキップしている

2. テストコードのバグ — 間違ったセレクタ、古いアサーション、悪いテストデータ

3. アプリケーションのバグ — アプリ自体が壊れている（回避策ではなく報告を行う）

4. 汚れた状態 — 前回のテスト実行の残骸が干渉している

ハックは行わない。 プラグインは、失敗したテストを回避するためにpage.evaluate()、page.route()、page.addInitScript()、またはJavaScriptの注入を決して使用しません。修正にそれらが必要な場合、それは間違った問題を解決しようとしています。

設定

マルチプロジェクト設定

PlaywrightプロジェクトがClaude Codeの実行ディレクトリとは異なる場所にある場合は、.mcp.jsonでPW_PROJECT_DIR環境変数を設定してください：

{
  "mcpServers": {
    "playwright-autopilot": {
      "command": "node",
      "args": ["path/to/plugin/server/mcp-server.js"],
      "env": {
        "PW_PROJECT_DIR": "/path/to/your/playwright/project"
      }
    }
  }
}

要件

• Claude Code CLI

• Playwright テストプロジェクト

• Node.js 20以上

ライセンス

MIT