ClaudeにBrowserStack MCPを接続してテストを計画・実行・デバッグする

Claude BrowserStack MCPでできること

BrowserStack MCPは、テストプラットフォームBrowserStackの機能をClaudeから呼び出すためのMCPサーバーです。Claudeのコネクタ一覧には2026年9月に追加され、「Anthropic verified」の表示が付いています。サインインが必須で、接続先のURLはhttps://mcp.browserstack.com/mcpです。

自然言語の指示で、次の作業を進められます。

• テストケースやテストラン(実行単位)を作る
• 実機のブラウザやスマートフォンでWebサイトやアプリを開く
• PlaywrightやSeleniumのテストを実行し、失敗ログと原因分析を読む
• アクセシビリティ(WCAG・ADA)のスキャンをかける

コネクタ一覧には37個のツールが載っています。ここで先に押さえたいのは、操作の中心がテスト管理(Test Management)と自動テストの調査にあることです。

リモート版とローカル版のどちらで接続するか

BrowserStack MCPには接続方法が2つあります。先に決めておくと、後で「localhostが開けない」「APIキーを求められる」といったつまずきを避けられます。

リモート版にはローカルテストの制約があります。BrowserStackのREADMEは、リモート版ではVPN・ファイアウォールの内側とlocalhostをテストできないと明記しています。ローカルテストが要る場合はローカル版を使います。READMEにはレイテンシーがやや高くなるとも書かれていますが、通常の利用では気づかない程度という説明です。

また、ツール一覧の資料には「リモート版では使えない」と注記されたツールがあります。たとえば、PRD(要件定義書)やPDFをアップロードしてテストケースを一括生成するcreateTestCasesFromFileとuploadProductRequirementFileは、ローカルのファイルを読むためリモート版では使えません。PRDからケースを起こしたい場合もローカル版の出番です。

Claude(Web・デスクトップ)で接続する

Claudeのコネクタ一覧でBrowserStackを開き、「Add to Claude」から追加します。追加後にBrowserStackのアカウントでサインインすれば接続は完了です。

BrowserStackのアカウントがない場合は、先にサインアップしておきます。READMEによると、オープンソースのプロジェクトには無料プランが用意されています。ほかのプランで使える範囲は、契約内容によって変わります。

Claude Codeで接続する

Claude Codeからはリモート版をclaude mcp addで追加できます。Claude Codeのドキュメントが示すリモートHTTPサーバーの書式に、BrowserStackのURLを当てはめた形です。

claude mcp add --transport http browserstack \
  https://mcp.browserstack.com/mcp
claude mcp list

claude mcp listは各サーバーの状態を✔ Connected、! Needs authentication、✘ Failed to connectのいずれかで示します。認証待ちと出たら、Claude Codeの中で/mcpを開いてサインインを済ませます。Claude Codeは401または403の応答を受けると、そのサーバーを認証が必要なものとして/mcpに表示します。

localhostや社内サイトを対象にするなら、ローカル版を標準入出力(stdio)のサーバーとして追加します。ユーザー名とアクセスキーは-eで環境変数として渡します。

claude mcp add browserstack \
  -e BROWSERSTACK_USERNAME=<username> \
  -e BROWSERSTACK_ACCESS_KEY=<access_key> \
  -- npx -y @browserstack/mcp-server@latest

<username>と<access_key>は自分の値に置き換えます。アクセスキーは認証情報なので、シェルの履歴やリポジトリに残さず、チームで共有しない扱いにします。キーはBrowserStackのAccount Settingsで確認できます。

Claude Desktopでローカル版を使う場合は、設定ファイルに次の形で書きます。BrowserStackのREADMEにある設定で、値の部分だけ自分のものに置き換えます。

{
  "mcpServers": {
    "browserstack": {
      "command": "npx",
      "args": ["-y", "@browserstack/mcp-server@latest"],
      "env": {
        "BROWSERSTACK_USERNAME": "<username>",
        "BROWSERSTACK_ACCESS_KEY": "<access_key>"
      }
    }
  }
}

ローカル版でPRDやアプリのファイルをアップロードするツールを使うときは、環境変数MCP_UPLOAD_BASE_DIRにファイルを置いたディレクトリを指定します。アップロードはそのディレクトリの中に限定されます。

テストを計画する: テスト管理の指示例

接続できたら、まずテスト管理から試すのが安全です。BrowserStackのREADMEが挙げる指示は、そのまま日本語に直しても通ります。ただしプロジェクト名やフォルダ名は実際の名前に合わせます。

Test Managementに「My Demo Project」というプロジェクトを作って。
サブフォルダはLoginとCheckoutの2つ。

続けて、次のような流れで進められます。例は公式の例に沿った形で、実際の出力はアカウントの状態で変わります。

1. 「Loginフォルダに、不正なパスワードでのログイン失敗のケースを追加して」(createTestCase)
2. 「優先度が高いLoginのケースを一覧にして」(listTestCases)
3. 「Loginのケースでテストランを作って」(createTestRun)
4. 「このランの結果を、全部passedで更新して」(addTestResult)

テストケースの追加では、プロジェクトの識別子(PR-xxxxxの形)とフォルダIDが必要になります。プロジェクトを作った時点で返るIDをClaudeが引き継ぐので、同じ会話の中で続けると指示が短く済みます。

データを変更する操作は、実行前に確認を求められます。BrowserStackのツール資料は、変更を伴う呼び出しにはユーザーの確認が入ると説明しており、削除は公開されていません。

実機とブラウザで確認する

手動テストは、端末やブラウザを名指しして開く指示で始めます。READMEの例は次のとおりです。

• 「iPhone 15 Pro Maxでアプリを開いて」
• 「localhost:3001で動かしているサイトをEdgeで開いて」
• 「最新のChromeでbrowserstack.comを開いて」

WebサイトはツールrunBrowserLiveSession、アプリはrunAppLiveSessionでセッションが始まります。localhostのページを開く指示が通るのは、ローカル版を使っているときだけです。リモート版でlocalhostを指定すると、BrowserStackのクラウドから手元のマシンに届かず失敗します。

失敗したテストを調べて直す

自動テストの調査は、BrowserStack MCPで特に効く場面です。流れは次のとおりです。

Claude Codeで使うなら、修正の承認と同時にテストの再実行まで指示すると効率が上がります。たとえば「RCAの提案どおりにセレクタを直して、直したテストだけBrowserStackで再実行して」と書きます。ここでの確認ポイントは、Claudeが修正前に差分を見せているかどうかです。

フレーク(不安定)なテストには、fetchSelfHealedSelectorsが使えます。DOMの変更で壊れたセレクタについて、AIが自己修復したセレクタとテストのソースを返します。

アクセシビリティスキャンの使いどころ

アクセシビリティは、開発中のサイトと本番サイトのどちらにも向けられます。READMEの指示例は、localhost:3000で動かしているサイトを調べて直す指示と、公開サイトをスキャンして問題を洗い出す指示の2種類です。

ツールとしては、スキャン済みの問題を取得するfetchAccessibilityIssuesと、WCAG 2.0・2.1・2.2やモバイル・Webのユーザビリティについて質問できるaccessibilityExpertがあります。ログインが必要なページは、認証設定を作るcreateAccessibilityAuthConfigが関わります。

つまずきやすい点

ほかに、押さえておくと混乱しない点が3つあります。

• ツールの呼び出しはLLMを介するため、同じ指示でも動きが毎回同じとは限りません。READMEにも非決定的な挙動があり得ると注記されています。
• BrowserStack MCPは開発が続いており、MCP仕様の一部だけに対応していると、READMEが述べています。
• ツールの数や名前は更新で変わり得ます。コネクタ一覧の説明にも、開発元が公開するツールをAnthropicは管理しておらず、変更もあり得ると書かれています。信頼できる開発元のものだけを使う前提です。

使い始める前の確認

最初の一歩は、書き込みの無い操作から始めるのが無難です。テストケースの一覧取得や、失敗したテストのログ取得なら、データを変えずに接続を確かめられます。そのうえで、ケースの作成やテストランの追加といった書き込みを試します。

同じテスト管理系のコネクタとして、ClaudeとQaseを連携する方法があります。Qaseはケースの登録と結果の集計が中心なので、実機やブラウザでの実行までをClaudeに任せたいかどうかが、BrowserStackを選ぶ分かれ目になります。

Claude CodeでのMCP接続全般は、Notion MCPサーバーの使い方に、リモートMCPを使う接続の基本をまとめています。社内の独自システムに同じ型でつなぐ場合は、Coworkカスタムコネクタ自作ガイドが参考になります。

まとめ

BrowserStack MCPは、テスト管理の登録から実機での確認、失敗の調査までを、1つの会話に集められるコネクタです。接続のしやすさで選ぶならリモート版、localhostや社内サイトを開く必要があるならローカル版、という切り分けで足ります。

修正案は提案止まりで、データを変える操作には確認が入るため、Claudeに任せる範囲は自分で決められます。まずは一覧取得とログ取得で動きを見てから、書き込み系に広げてください。