Claude Codeがアプリを変更した後にE2Eテストを実行するにはどうすればよいですか？
Zeshi Du
たった一つの命令。TestSpriteが接続されていれば、それだけで十分です。
「TestSpriteでこのプロジェクトをテストしてください。」
Claude Codeセッションでアプリケーションが変更された後、Claude Codeターミナル内でその命令を実行するだけで、完全なE2Eテストパイプラインが起動します。エージェントが稼働中のアプリケーションにアクセスし、ナビゲートしてフローを実行し、結果を同じターミナルウィンドウに返します。IDEを離れる必要はなく、テストランナーを設定する必要もなく、カバレッジの範囲を自分で決める必要もありません。
より詳しく説明すると、このアプローチが信頼に値するE2E結果を生み出す理由と、命令から結果が返るまでの数分間に何が起きているかについてです。
Claude Codeの変更が実際にもたらすもの
Claude Codeのセッションは広範囲に及ぶ傾向があります。一つのセッションで、チェックアウトコンポーネント、それが呼び出す割引ロジック、注文を処理するAPIエンドポイント、送信後にUIを更新するステート管理に至るまで、複数の箇所が変更されることがあります。各部分は個別に見ると正しく動作しており、セッションはすべての個別レイヤーで動作するコードを生成します。
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をトリガーします：
「TestSpriteでこのプロジェクトをテストしてください。」
他の検証ツールはコードを読んで推測します。TestSpriteはあなたのアプリを開いて実際に使います。
並列探索エージェントの群れが稼働中のアプリケーションにアクセスします。Claude Codeが変更したファイルではなく、ステージングまたはプレビューURLにある実際のプロダクトです。エージェントは実際のユーザーと同様の方法でナビゲートします。
UIフローをクリックして進みます。実際の入力値でフォームを埋めます。エントリーから完了まで複数ステップのジャーニーをたどり、各ステップをまたいでセッション状態を引き継ぎます。最近変更されたファイルに関わるフローだけでなく、プロダクト全体の画面を探索します。
最後の点が重要です。Claude Codeがチェックアウトコンポーネントを変更したとしても、エージェントは注文履歴ページ、アカウント設定、ダッシュボードもナビゲートします。Claude Codeセッションによって引き起こされるE2Eの失敗は、セッションで直接変更されていないフローに現れることが多くあります。共有されているステートや共通のAPIエンドポイントの挙動が変わり、プロダクトの複数の箇所に影響を与えるためです。
PRDが存在する場合、エージェントはその探索を記載されたプロダクトの意図に基づいて進めます。存在しない場合、MCP Serverはコードベースから意図を推測します。いずれの場合も、エージェントが実行するフローは、新しい実装がたまたま生み出すものではなく、プロダクトが本来すべき動作に基づいています。
Claude Codeで結果を確認する
E2Eの実行が完了すると、結果がClaude Codeのターミナルに返されます。
成功したフローは、エージェントが検証したプロダクトの動作が正しく機能していることを確認します。失敗したフローは、構造化された失敗の説明を生成します：どのアクションが実行されたか、期待されたプロダクトの結果は何か、実際に何が起きたか。
失敗の説明は、Claude Codeのコーディングエージェントが直接対応できる形式にフォーマットされています。開発者がテストレポートをコード変更に翻訳する必要はありません。コーディングエージェントは何が壊れたかの説明を受け取り、同じセッション内で修正を提案できます。
これが閉じたループです。Claude Codeがアプリを変更し、TestSpriteがアプリをテストし、Claude Codeが壊れた箇所を修正する。すべて一つのIDEセッションの中で完結します。
Auto-Heal Rerunは、Claude Codeセッションによる構造的なUI変更が、プロダクトの動作とは無関係な理由でテストを失敗させるケースに対応します。コンポーネントの名前変更、要素の位置変更、レイアウトのリファクタリングに対してテストが適応します。ユーザーが実際に体験するようなプロダクトの動作変化を伴う本物のE2E失敗は、明確に表面化されます。
同一の実行でのバックエンドE2Eカバレッジ
同じ命令がバックエンドAPIフローもカバーします。
TestSpriteのBackend Testing 2.0は、エンドポイントを呼び出し、Claude Codeセッションの変更が適用された後に実際にどのように応答するかを観察します。実際のステータスコード、実際のフィールド名、実際のレスポンスの形式。アサーションは、新しいコードがAPIが返すべきと言っている内容ではなく、観察された実際の動作に基づいています。
複数ステップのバックエンドフローでは、実際のレスポンスから得た動的変数が自動的に後続のステップに渡されます。CRUDライフサイクルテストは、createレスポンスから実際のIDを取得し、read、update、deleteのステップに渡します。完全なシーケンスがエンドツーエンドで実行されます。
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 テストを実行しましょう。