TestSprite MCPサーバーをClaude Codeに追加する方法
Zheshi Du
TestSprite MCPサーバーをClaude Codeに追加する作業は、約2分で完了します。設定が完了すれば、Claude Codeのターミナルから1つの指示を入力するだけで、実行中のアプリケーションに対して完全な自律テストパイプラインが起動します。
始める前に、2つの準備が必要です。APIキーを持つTestSpriteアカウントと、マシンへの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を利用したい場合は、プロジェクトごとに追加するか、ユーザースコープで設定してグローバルに利用できるようにする必要があります。
これはClaude Code MCP固有の動作であり、TestSprite特有のものではありません。主要プロジェクトにClaude Codeを使用している開発者の多くにとって、デフォルトのプロジェクトスコープでのインストールが適切な出発点です。
最初のテストを実行する
MCPサーバーがインストールされ、正常に起動していることを確認したら、Claude Codeを開いて次のように入力してください：
"Help me test this project with 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のターミナルからの1つの指示で探索エージェントが起動します。エージェントは実際のユーザーのようにライブアプリケーションをナビゲートし、フロントエンドのフローとバックエンドAPIを1回の実行でカバーし、コーディングエージェントがすぐに対応できる構造化された障害説明を返します。
Claude Codeを使って素早くコードを書く開発者にとって、TestSpriteは構築したものが実際に動作することを保証する検証レイヤーです。
TestSprite MCPサーバーをClaude Codeに今すぐセットアップしましょう。