Claude CodeがアプリをコードしたあとにE2Eテストを実行するには？
Zheshi Du
命令は1つだけです。TestSpriteが接続されていれば、それが答えのすべてです。
"Help me test this project with TestSprite."
アプリケーションを変更したClaude Codeセッションの後、Claude Codeターミナル内でその命令を実行すると、完全なE2Eテストパイプラインが起動します。エージェントが実行中のアプリケーションにアクセスし、ナビゲートし、フローを実行して、同じターミナルウィンドウに結果を返します。IDEを離れる必要はありません。テストランナーを設定する必要もありません。カバーする内容を決める必要もありません。
より詳しい答えは、このアプローチが信頼に値するE2E結果を生み出す理由と、命令から結果が返るまでの数分間に何が起きているかです。
Claude Codeが実際に導入する変更
Claude Codeのセッションは広範囲に及ぶ傾向があります。1回のセッションで、チェックアウトコンポーネント、それが呼び出す割引ロジック、注文を処理するAPIエンドポイント、送信後にUIを更新するstate管理に触れることがあります。各部分は個別に見ると正しく見えます。セッションは個々の層ですべて動作するコードを生成します。
Claude Codeセッションの後に発生するE2E失敗は、統合ポイントに潜んでいます。変更されたファイル内ではなく、それらのファイルとアプリケーションの他の部分との相互作用にあります。3つ先の画面にあるコンポーネントへの状態更新が正しく伝播しなくなった。消費側のコンポーネントが想定しない形式でAPIレスポンスが変更された。ステップ2とステップ4では個別に動作していたが、その遷移で壊れたユーザーフロー。
これらはdiffには現れません。個々の関数をチェックするテストを実行しても検出できません。変更が反映された後に、実際にエンドツーエンドの完全なユーザーフローを実行することだけが、それらを発見できます。
Claude CodeセッションのためのE2Eテストのセットアップ
まだTestSpriteをClaude Codeに接続していない場合、セットアップには約2分かかります。
TestSpriteアカウントを作成し、アカウント設定からAPIキーを生成します。Node.jsがインストールされていることを確認してください（ターミナルでnode --version）。次に、Manage MCP Servers → View raw configから、Claude CodeのMCP設定に以下を追加します。
保存し、設定画面からサーバーを起動して、ツールが読み込まれることを確認します。セットアップはこれで完了です。
TestSpriteがすでに接続されている場合は、先にスキップしてください。
E2Eパイプラインをトリガーした際に起きること
Claude Codeセッション後、ターミナルからTestSpriteをトリガーします。
"Help me test this project with TestSprite."
他の検証ツールはコードを読んで推測します。TestSpriteはアプリを開いて実際に使用します。
並列探索エージェントの集団が実行中のアプリケーションにアクセスします。Claude Codeが変更したファイルではありません。ステージングまたはプレビューURLのライブプロダクトです。エージェントは実際のユーザーと同じようにナビゲートします。
UIフローをクリックスルーします。実際の入力値でフォームに記入します。エントリーから完了まで複数ステップのジャーニーをたどり、ステップをまたいでセッション状態を引き継ぎます。最近変更されたファイルに触れたフローだけでなく、製品全体の画面を探索します。
この最後の部分が重要です。Claude Codeがチェックアウトコンポーネントを変更していたとしても、エージェントは注文履歴ページ、アカウント設定、ダッシュボードもナビゲートします。Claude Codeセッションによって導入されたE2E失敗は、共有されたstateや共通のAPIエンドポイントが複数の箇所に影響する形で挙動を変えたことで、セッションで直接変更されていないフローに現れることが多いからです。
PRDが存在する場合、エージェントは記載された製品の意図に沿って探索を進めます。存在しない場合、MCPサーバーがコードベースから意図を推測します。いずれにせよ、エージェントが実行するフローは、新しい実装がたまたま生成するものではなく、製品が本来すべき動作に基づいています。
Claude Codeで結果を確認する
E2Eランが完了すると、結果がClaude Codeターミナルに返ってきます。
パスしたフローは、エージェントが検証した製品の挙動が正しく動作していることを確認します。失敗したフローは、どのアクションが実行されたか、期待される製品の結果は何か、実際に何が起きたかという構造化された失敗の説明を生成します。
失敗の説明は、Claude Codeのコーディングエージェントが直接対処できるようフォーマットされています。開発者がテストレポートをコード変更に翻訳する必要はありません。コーディングエージェントが何が壊れたかの説明を受け取り、同じセッション内で修正案を提案できます。
これがクローズドループです。Claude Codeがアプリを変更します。TestSpriteがアプリをテストします。Claude Codeが壊れた部分を修正します。すべて1つのIDEセッション内で完結します。
Auto-Heal Rerunは、Claude Codeセッションがテストを製品の挙動とは無関係な理由で失敗させる構造的なUI変更を行った場合に対処します。コンポーネント名の変更、要素の位置変更、レイアウトのリファクタリングに対してテストが適応します。ユーザーが実際に経験するような形で製品の挙動が変化した、本物のE2E失敗は明確に浮かび上がります。
同じ実行でのバックエンドE2Eカバレッジ
同じ命令でバックエンドAPIフローもカバーします。
TestSprite の Backend Testing 2.0 は、Claude Code セッションの変更が反映された後に実際にエンドポイントを呼び出し、レスポンスを観測します。実際のステータスコード、実際のフィールド名、実際のレスポンス形式を確認します。アサーションは、新しいコードが API の返すべき内容として記述した内容ではなく、観測された実際の動作に基づいています。
複数ステップのバックエンドフローにおいて、実際のレスポンスから取得した動的な変数は後続のステップに自動的に引き渡されます。CRUD ライフサイクルテストでは、作成レスポンスから実際の ID を取得し、読み取り・更新・削除の各ステップに渡します。シーケンス全体がエンドツーエンドで実行されます。
Claude Code セッションがバックエンド API を変更してコントラクト違反を引き起こした場合、次の E2E 実行時に新しいレスポンスと以前に確立されたベースラインが比較され、差異が具体的な問題として報告されます。
シナリオ：セッション終了後、プッシュ前
開発者が通知設定ページを再構築した Claude Code セッションを終了しました。このセッションでは、設定フォーム、設定を保存する API 呼び出し、保存された設定がアプリケーション内の他の箇所でどのように使用されるかが対象でした。8 つのファイルが変更されました。
プッシュする前に、開発者は Claude Code のターミナルに一つのインストラクションを入力します。
探索エージェントは、アカウントを管理する実際のユーザーが行うように通知設定ページをナビゲートします。通知の設定を変更して保存し、アカウント概要ページに移動して設定が反映されているかを確認します。
設定ページでは設定が正しく更新されています。アカウント概要には古い設定が表示されたままです。API 呼び出し自体は設定を正しく保存しています。Claude Code セッションが設定の永続化ロジックを再構成した際に更新が止まったキャッシュをアカウント概要が参照していることが判明しました。
失敗の詳細が Claude Code ターミナルに返されます。ナビゲートされたページ、変更された内容、不整合が発生した箇所が記載されています。コーディングエージェントは再構成されたロジックの中にキャッシュ無効化の漏れを特定し、修正を適用します。開発者は TestSprite を再実行します。アカウント概要に更新された設定が表示されるようになりました。
E2E テストはセッション後に実行され、ユーザーに届く前に不具合を検出し、Claude Code 内でループをクローズしました。リグレッションが修正された状態でプッシュが行われます。
すべてのプッシュに対して CI で E2E テストを実行する
IDE 内のループは、各 Claude Code セッション後の E2E 検証を担います。すべてのプルリクエストに対して自動カバレッジを求めるチームには、GitHub Actions インテグレーションによって同じパイプラインを CI に拡張できます。
Claude Code の変更を含むすべての PR は、プレビュー環境に対して自動 E2E 実行をトリガーします。結果は PR コメントとして投稿されます。レビュアーは diff と並んで E2E カバレッジを確認できます。ユーザーが問題に遭遇してからではなく、コードがマージされる前にユーザーフローを壊す変更が検出されます。
完全なセットアップガイドは docs.testsprite.com をご覧ください。
まとめ
TestSprite が接続されていれば、Claude Code がアプリを変更した後に E2E テストを実行するのはひとつのインストラクションで完了します。エージェントは実際のユーザーのようにライブアプリケーションをナビゲートし、変更されたファイルだけでなく製品全体のサーフェスをカバーし、Claude Code が直接対応できる構造化された失敗の説明を返します。
セットアップには 2 分かかります。最初のセッションは数分で完了します。検出された不具合は、実際にユーザーに届いていたものです。
今すぐ TestSprite を Claude Code に接続し、すべてのセッション後に E2E テストを実行しましょう。