TestSprite MCPサーバーをClaude Codeに追加する方法
Zeshi Du
TestSprite MCPサーバーをClaude Codeに追加するのにかかる時間は約2分です。設定が完了すれば、Claude Codeのターミナルから一つの指示を入力するだけで、実行中のアプリケーションに対する完全な自律テストパイプラインが開始されます。
開始する前に、2つの準備が必要です。TestSpriteのアカウントとAPIキー、そしてマシンにインストールされたNode.jsです。
開始前に必要なもの
TestSpriteのアカウントとAPIキー。testsprite.comでサインアップしてください。無料プランはクレジットカード不要です。サインイン後、アカウント設定に移動してAPIキーを生成してください。MCPサーバーはこのキーを使用してTestSpriteのバックエンドと認証を行います。
Node.js。ターミナルでnode --versionを実行してください。バージョン番号が返されれば準備完了です。表示されない場合は、nodejs.orgからNode.jsをインストールしてください。TestSprite MCPサーバーはnpmパッケージとして動作するため、Node.jsが必要です。
方法1：Claude CodeのMCPストアを使用する
Claude Codeにはサーバーの追加を簡単にする組み込みのMCP管理インターフェースがあります。
Claude Codeのエージェントパネル上部にあるドロップダウンメニューを開き、「Manage MCP Servers」を選択します。そこから「View raw config」をクリックして、mcp_config.jsonファイルを直接開きます。
以下の設定をファイルに追加してください：
{
"mcpServers": {
"TestSprite": {
"command": "npx",
"args": ["@testsprite/testsprite-mcp@latest"],
"env": {
"API_KEY": "your-api-key"
}
}
}
}
your-api-keyをTestSpriteアカウントのAPIキーに置き換えてください。ファイルを保存します。設定ビューのTestSprite MCPエントリの上にある起動ボタンをクリックしてください。エラーなくサーバーが起動し、ツールが正常に読み込まれれば、インストール完了です。
方法2：JSONを手動で設定する
設定ファイルを直接編集することを好む場合は、Claude CodeのJSON設定にTestSprite MCPサーバーを手動で追加できます。
Claude Codeでは、serversブロック内で以下の形式で設定します：
{
"servers": {
"testsprite": {
"command": "npx",
"args": ["-y", "@testsprite/testsprite-mcp@latest"],
"env": {
"API_KEY": "your-api-key"
}
}
}
}
argsの-yフラグに注目してください。これはインタラクティブな入力を待たずに、パッケージのインストールを自動的に確認するようnpxに指示するものです。省略すると、プロセスがサイレントにハングする可能性があります。
知っておくべきスコープの詳細
Claude Code経由でTestSprite MCPサーバーをインストールすると、現在のプロジェクトディレクトリにスコープされて追加されます。複数のプロジェクトをまたいで作業し、それぞれでTestSpriteを利用したい場合は、プロジェクトごとに追加するか、ユーザースコープで設定してグローバルに利用できるようにする必要があります。
これはTestSprite固有の動作ではなく、Claude Codeの標準的なMCP動作です。Claude Codeを主要プロジェクトで使用するほとんどの開発者にとって、デフォルトのプロジェクトスコープでのインストールが最適な出発点です。
初めてのテストを実行する
MCPサーバーがインストールされ、正常に動作していることを確認したら、Claude Codeを開いて以下を入力してください：
「TestSpriteでこのプロジェクトをテストしてください。」
この指示により、完全な自律パイプラインが起動します。追加の設定は不要です。
他の検証ツールはコードを読んで推測します。TestSpriteはあなたのアプリを開いて実際に使います。
並列で動作する探索エージェントの一群が実行中のアプリケーションを訪問し、実際のユーザーと同じようにナビゲートします。エージェントはClaude Codeが変更したファイルを読み込むのではなく、ライブプロダクトを直接訪問し、インタラクティブな要素を発見して、フローを辿ります。ボタンをクリックし、実際の入力でフォームに記入し、入口から完了までの複数ステップのジャーニーをたどり、ステップをまたいでセッション状態を引き継ぎます。
エージェントは並列で動作し、それぞれがプロダクト内の異なるパスをたどります。障害を発見すると、コーディングエージェントがそのまま対応できる構造化されたフォーマットでClaude Codeのターミナルに説明が返されます。コード変更から動作の検証、修正の適用までのループが同一セッション内で完結します。
最初の実行で行われること
最初のセッションが最も多くの処理を行います。探索エージェントはステージング環境またはプレビュー環境を訪問し、ソースファイルを読み込むのではなく、直接インタラクションを通じてプロダクトのユーザージャーニーの構造マップを構築します。
PRDや仕様書ドキュメントがある場合、TestSpriteはそれを解析し、テスト目標を記載されたプロダクトの意図に紐付けます。ない場合、MCPサーバーはコードベースからプロダクトの意図を推論します。ルート定義、APIコントラクト、コンポーネント構造を、プロダクトが何をするために設計されたかの証拠として扱います。
その基盤からテストケースが生成され、TestSpriteのセキュアなエフェメラルクラウドサンドボックスで実行されます。数秒で起動し、独立した環境で実行され、自動的に破棄されます。ローカル環境の設定は不要です。
シナリオ：Claude Code + TestSpriteを1つのセッションで
ある開発者が、アプリケーションのユーザー設定フローを再構築するClaude Codeセッションを終えたところです。このセッションでは8つのファイルを扱いました。設定フォームのコンポーネント、設定を保存するAPIエンドポイント、そして変更がアプリケーションの他の部分にどのように伝播するかです。差分は綺麗に見えます。セッションで生成されたコードも正しく読めます。
プッシュ前に、開発者はClaude Codeのターミナルからテストスパイトを起動します。
探索エージェントは設定ページに移動し、実際にアカウントを管理するユーザーと同じようにそれを操作します。通知設定を更新し、変更を保存し、アカウント概要ページに移動して設定が正しく表示されているかを確認します。
エージェントは、通知設定が設定ページでは正しく更新されるものの、アカウント概要ページでは古い設定が表示されたままであることを発見します。設定APIの呼び出しは成功しています。アカウント概要は、リファクタリングされた設定フローが更新を止めてしまった別のキャッシュから読み込んでいます。
この問題はユニットテストでは発見できません。コードレビューでも発見できません。この障害は、設定ページに移動して変更を加え、保存し、同じ情報を表示する別のページを確認する、という操作をしたときにのみ現れます。これはまさに、自分のアカウント設定を確認する実際のユーザーが行う操作です。
障害の説明がClaude Codeのターミナルに届きます。どのページを閲覧したか、何を変更したか、どこで不整合が現れたかが記載されています。コーディングエージェントはキャッシュの無効化漏れを特定し、同一セッション内で修正を適用します。開発者はTestSpriteを再度実行して確認します。ループはClaude Codeの中で完結します。
まとめ
TestSprite MCPサーバーをClaude Codeに追加するのにかかる時間は2分です。APIキーを取得し、MCPストアまたは設定ファイルへの直接編集でJSON設定を追加し、サーバーが正常に起動することを確認するだけです。
その後は、Claude Codeのターミナルからの一つの指示で探索エージェントが起動し、実際のユーザーのようにライブアプリケーションをナビゲートし、フロントエンドのフローとバックエンドAPIを一度の実行でカバーし、コーディングエージェントがすぐに対応できる構造化された障害の説明を返します。
コードを素早く書くためにClaude Codeを使う開発者にとって、TestSpriteは実際に構築したものが正しく動作することを保証する検証レイヤーです。
今すぐClaude CodeにTestSprite MCPサーバーをセットアップしましょう。