BrowserStack

公式

BrowserStackのテストプラットフォームの全機能をAIツールに統合し、チームのすべての開発者やテスターにとってテストをより迅速かつ容易にします。

BrowserStack MCPで何ができますか?

  • 実機での手動アプリテスト — iPhone 15 Pro Maxなどの特定のデバイスでアプリを開くよう依頼したり、runAppLiveSessionを使用してAndroid 14のクラッシュをデバッグしたりできます。
  • クロスブラウザでのウェブサイトテスト — 任意のブラウザ/OSの組み合わせでローカルまたは公開サイトのライブセッションを開始できます。例:「最新のChromeでbrowserstack.comを開いて」をrunBrowserLiveSessionで実行。
  • 自動テストの実行とデバッグ — BrowserStackインフラ上でSelenium、Playwright、またはAppiumスイートを実行し、getFailureLogsfetchRCAを使用して失敗ログと根本原因分析を取得します。
  • テストケースと実行の管理 — プロジェクト、フォルダー、テストケース、テスト実行を作成し、createTestCaseaddTestResultを使用して自然言語で結果を更新します。
  • AI修正によるアクセシビリティスキャン — ローカルまたは本番サイトをWCAGの問題についてスキャンし、startAccessibilityScanfetchAccessibilityIssuesを使用して推奨修正を取得します。
  • AI駆動のテスト生成と自己修復 — PRDからテストケースを生成し、手動テストをローコード自動化に変換し、createLCAStepsfetchSelfHealedSelectorsを使用して不安定なセレクタを修正します。

ドキュメント

BrowserStack MCP Server

BrowserStack Logo MCP Server Logo

包括的なテストプラットフォーム

テストケースの管理、手動または自動テストの実行、問題のデバッグ、さらにはコードの修正まで、Cursor、Claude、またはMCP対応クライアントなどのツール内で、平易な英語を使って直接実行できます。

どこからでもテスト:

BrowserStackテストプラットフォームを、IDE、LLM、エージェントワークフローなど、お気に入りのAIツールに簡単に接続できます。

自然言語でテスト:

平易な英語のプロンプトを使って、テストの管理、実行、デバッグ、さらにはコードの修正まで行えます。

コンテキスト切り替えの削減:

フローを維持—すべてのプロジェクトコンテキストを一箇所に保ち、IDEやLLMから直接アクションをトリガーできます。

⚡️ ワンクリックMCPセットアップ

以下のボタンをクリックして、お使いのIDEにMCPをインストールしてください:

Install in VS Code   Install in Cursor

注: ホスト型リモートMCPサーバー(mcp.browserstack.com)は現在、Streamable HTTP上で完全にステートレスです。Streamable-HTTPクライアント(Claude、Cursor、VS Code、ChatGPT)は、設定変更なしで接続できます。

注: Nodeバージョン >= 18.0 を使用していることを確認してください

  • node --version を使用してNodeバージョンを確認してください。推奨バージョン: v22.15.0(LTS)
  • Nodeをアップグレードするには:
    1. macOSの場合 (Homebrew) - brew update && brew upgrade node or if using (nvm) - nvm install 22.15.0 && nvm use 22.15.0 && nvm alias default 22.15.0
    1. Windowsの場合 (nvm-windows) : nvm install 22.15.0 && nvm use 22.15.0
  • 👉 またはNode.js LTSインストーラーを直接ダウンロード

.

💡 使用例

📱 手動アプリテスト

最新のOSバージョンが動作する実機でモバイルアプリをテストします。セットアップの手間なく、バグの再現やクラッシュのデバッグが可能です。 以下は、BrowserStackの広範な実機クラウドでモバイルアプリをテストするためのサンプルプロンプトです。

# Open app on specific device
"open my app on a iPhone 15 Pro Max"

# Debug app crashes
"My app crashed on Android 14 device, can you help me debug?"
  • エミュレーターとは異なり、実際のデバイスでアプリの実世界のパフォーマンスをテストできます。高度なアプリプロファイリング機能を使用すると、クラッシュやパフォーマンスの問題をリアルタイムでデバッグできます。
  • デバイスグリッドから主要なデバイスとOSバージョンにすべてアクセスできます。新しくリリースされたデバイスを発売日にグローバルデータセンターに提供するための厳格なSLAがあります。

🌐 手動Webテスト

アプリテストと同様に、以下のプロンプトを使用して、BrowserStackの広範な実ブラウザとデバイスクラウドでウェブサイトをテストできます。お使いのマシンにEdgeブラウザがインストールされていませんか? ご安心ください!

# Test your websites
"open my website hosted on localhost:3001 on Edge"
"open browserstack.com on latest version of Chrome"
  • さまざまなブラウザとデバイスでウェブサイトをテストします。主要なすべてのOSで主要なすべてのブラウザをサポートしています。
  • ローカルマシンでホストされているウェブサイトをシームレスにテストできます。リモートサーバーにデプロイする必要はありません!

🧪 自動テスト(Playwright、Selenium、A11yなど)

IDEやLLM内で、壊れたテストスクリプトを自動分析、診断、さらには修正します。ログを即座に取得し、根本原因を特定し、コンテキストに応じた修正を適用します。デバッグループはもう不要です。 以下は、BrowserStackのテストプラットフォームで自動テストを実行/デバッグ/修正するためのサンプルプロンプトです。

注: テストの根本原因分析(RCA)を取得する場合、サーバーは提案された修正を提案としてのみ返します。コード変更を自動的に適用することはありません。アシスタントは提案を提示し、ファイルを編集する前に明示的な承認を待つ必要があります。

#Port test suite to BrowserStack
"Setup test suite to run on BrowserStack infra"

#Run tests on BrowserStack
“Run my tests on BrowserStack”

#AI powered debugging of test failures
"My App Automate tests have failed, can you help me fix the new failures?"

🌐 アクセシビリティ

自動化されたローカルa11yスキャンで、アクセシビリティの問題を早期に発見します。ワンクリックでAIが提案する修正を取得できます。ドキュメント探しもCIの驚きも不要です。アクセシビリティテストツールでWCAGおよびADA準拠を確保します。

#Scan accessibility issues while development
"Scan & help fix accessibility issues for my website running locally on localhost:3000"

#Scan accessibility issues on production site
“Run accessibility scan & identify issues on my website - www.bstackdemo.com”

📋 テスト管理

自然言語を使用して、テストケースの作成と管理、テストプランの作成、テスト実行のトリガーを行います。以下は、MCPサーバーでBrowserStackのテスト管理機能を活用するためのサンプルプロンプトです。

# Create project & folder structure
"create new Test management project named My Demo Project with two sub folders - Login & Checkout"

# Add test cases
"add invalid login test case in Test Management project named My Demo Project"

# List added test cases 
"list high priority Login test cases from Test Management project - My Demo Project"

# Create test run
"create a test run for Login tests from Test Management project - My Demo Project"

# Update test results
"update test results as passed for Login tests test run from My Demo Project"

🧪 BrowserStack AIエージェントへのアクセス

PRDからテストケースを生成し、手動テストをローコード自動化に変換し、BrowserStackのAIエージェントによって不安定なスクリプトを自動修復します。ワークフローにシームレスに統合されます。以下は、BrowserStack AIエージェントにアクセスするためのサンプルプロンプトです。

#Test case generator agent
"With Browserstack AI, create relevant test cases for my PRD located at /usr/file/location"


#Low code authoring agent
“With Browserstack AI, automate my manual test case X, added in Test Management”


#Self healing agent
“Help fix flaky tests in my test script with Browserstack AI self healing”

🛠️ インストール

📋 MCPセットアップの前提条件

注: Nodeバージョン >= 18.0 を使用していることを確認してください

  • node --version を使用してNodeバージョンを確認してください。推奨バージョン: v22.15.0(LTS)

ワンクリックMCPセットアップ

以下のボタンをクリックして、お使いのIDEにMCPをインストールしてください:

Install in VS Code   Install in Cursor

MCPサーバーをセットアップする代替方法

  1. BrowserStackアカウントを作成

    • まだアカウントをお持ちでない場合は、BrowserStackにサインアップしてください。

    • ℹ️ オープンソースプロジェクトをお持ちの場合は、無料プランを提供できます。

    • アカウントを作成し(適切なプランを購入したら)、アカウント設定からusernameaccess_keyをメモしてください。

  2. 注: Nodeバージョン >= 18.0 を使用していることを確認してください

    • node --version を使用してNodeバージョンを確認してください。推奨バージョン: v22.15.0(LTS)
  3. MCPサーバーをインストール

    • VSCode(Copilot - エージェントモード): .vscode/mcp.json:

      • 設定ファイルの場所を確認または作成: プロジェクトのルートディレクトリで、.vscodeという名前のフォルダーを探します。このフォルダーは通常非表示のため、展開に記載されているように見つける必要があります。

      • このフォルダーが存在しない場合は、作成します。

      • .vscodeフォルダー内に、mcp.jsonという名前の新しいファイルを作成します。

      • 設定を追加: mcp.jsonファイルを開き、以下のJSONコンテンツを追加します。

      • usernameと<access_key>を自分のBrowserStack資格情報に置き換えます。

    {
      "servers": {
        "browserstack": {
          "command": "npx",
          "args": ["-y", "@browserstack/mcp-server@latest"],
          "env": {
            "BROWSERSTACK_USERNAME": "<username>",
            "BROWSERSTACK_ACCESS_KEY": "<access_key>"
          }
        }
      }
    }
    
    • VSCodeで、MCPサーバーを起動するためにStartボタンをクリックしてください。 Start MCP Server

    **VSCode CopilotでMCPをセットアップする代替方法

    1.歯車アイコンをクリックしてツールを選択します

    Select Tools
    2.上部中央にツールメニューが表示されます。メニューの上部をスクロールダウンし、[MCPサーバーを追加]をクリックします
    Add MCP Server
    3.NPMパッケージオプションを選択します(NPMパッケージからインストール)- リストの3番目
    Select NPM Package
    4.NPMパッケージ名を入力します(@browserstack/mcp-server)
    Enter NPM Package
    5.BrowserStackのユーザー名とアクセスキーを入力します
    • Cursorの場合: .cursor/mcp.json:
    {
      "mcpServers": {
        "browserstack": {
          "command": "npx",
          "args": ["-y", "@browserstack/mcp-server@latest"],
          "env": {
            "BROWSERSTACK_USERNAME": "<username>",
            "BROWSERSTACK_ACCESS_KEY": "<access_key>"
          }
        }
      }
    }
    
    • Claude Desktop: ~/claude_desktop_config.json:
    {
      "mcpServers": {
        "browserstack": {
          "command": "npx",
          "args": ["-y", "@browserstack/mcp-server@latest"],
          "env": {
            "BROWSERSTACK_USERNAME": "<username>",
            "BROWSERSTACK_ACCESS_KEY": "<access_key>"
          }
        }
      }
    }
    
    • Cline

ナビゲーションバーの「MCPサーバー」アイコンをクリックします 「インストール済み」タブを選択します。ペインの下部にある「MCPサーバーを設定」ボタンをクリックします。

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

ファイル&アップロード: ローカルファイル/アプリをアップロードするツール(uploadProductRequirementFiletakeAppScreenshotrunAppTestsOnBrowserStackrunAppLiveSession)は、MCP_UPLOAD_BASE_DIR環境変数がそれらのファイルを含むディレクトリに設定されている必要があります。アップロードはそのディレクトリに制限されます。

💡 BrowserStack MCPツールのリスト

現在、46のツールをサポートしています。

リモートMCPの注: (リモートMCPでは利用不可) とマークされたツールは、ローカルファイル/プロセスの状態に依存しており、マルチテナントリモートMCPサーバーでは無効になっています。これらはローカル(npx)セットアップで利用できます。


🧾 テスト管理

  1. createProjectOrFolder — テストケースを整理するためのテスト管理プロジェクトおよび/またはフォルダーを作成します。フォルダーID、プロジェクトID、TMプロジェクトダッシュボードにアクセスするためのテスト管理リンクを返します。 プロンプト例
Create a new Test Management project named 'Shopping App' with two folders - Login and Checkout
  1. createTestCase — 特定のプロジェクト/フォルダーに手動テストケースを追加します(PR-xxxxxなどのプロジェクト識別子とフォルダーIDを使用)。 プロンプト例
Add a test case named 'Invalid Login Scenario' to the Login folder in the 'Shopping App' project with PR-53617, Folder ID: 117869
  1. updateTestCase — 既存のテストケースを更新します。フィールドの任意のサブセットを変更できます(名前、優先度、ステータス、手順、タグなど)。指定されたフィールドのみが変更されます。 プロンプト例
Update test case TC-482 in the 'Shopping App' project and set its priority to high
  1. listTestCases — プロジェクトのテストケースを一覧表示します。オプションでフォルダーにスコープできます(case_type、優先度、ページネーションなどのフィルターをサポート)。 プロンプト例
List all high-priority test cases in the 'Shopping App' project with project_identifier: PR-59457
  1. listFolders — テスト管理プロジェクトのフォルダーを一覧表示します(各フォルダーのID、名前、ケース数、サブフォルダー数を返します)。parent_idを渡すとサブフォルダーを一覧表示します。 プロンプト例
List all folders in the 'Shopping App' project with project_identifier: PR-59457
  1. listTestCaseTemplates — 数値のtemplate_idを持つテストケーステンプレートを一覧表示します。createTestCaseと併用してカスタムテンプレートを適用します。 プロンプト例
List the available test case templates in the 'Shopping App' project
  1. createTestRun — プロジェクト内の選択したテストケースのテスト実行(スイート)を作成します。 プロンプト例
Create a test run for the Login folder in the 'Shopping App' project and name it 'Release v1.0 Login Flow'
  1. listTestRuns — プロジェクトのテスト実行を一覧表示します(日付、担当者、状態でフィルタリング)。 プロンプト例
List all test runs from the 'Shopping App' project that were executed last week and are currently marked in-progress
  1. updateTestRun — テスト実行の名前/状態を更新したり、テストケースを追加したりします。 プロンプト例
Update test run ID 1043 in the 'Shopping App' project and mark it as complete with the note 'Regression cycle done'
  1. addTestResult — 実行内のテストケースに手動実行結果(合格/不合格/ブロック/スキップ)を追加します。 プロンプト例
Mark the test case 'Invalid Login Scenario' as passed in test run ID 1043 of the 'Shopping App' project
  1. createTestCasesFromFile — テストケース生成AIエージェントを使用して、アップロードされたファイルからテストケースを一括生成します。 (リモートMCPでは利用不可) プロンプト例
Upload test cases from '/Users/xyz/testcases.pdf' to the 'Shopping App' project in Test Management
  1. listTestPlans — プロジェクト内のテストプラン(TP-*)を、名前、ステータス、日付、アクティブ/クローズ済み実行数とともに一覧表示します。ページネーションをサポートします。 プロンプト例
List all test plans in the 'Shopping App' project with project_identifier: PR-59457
  1. getTestPlan — 識別子(TP-*)でテストプランを、メタデータ、リンクされたテスト実行、総テストケース数、ステータスサマリーとともに取得します。 プロンプト例
Get the details of test plan TP-120 in the 'Shopping App' project
  1. listSubTestPlans — 親テストプラン(TP-)の下のサブテストプラン(STP-)を一覧表示します。ページネーションをサポートします。 プロンプト例
List sub-test-plans under test plan TP-120 in the 'Shopping App' project
  1. getSubTestPlan — 親プランの下のサブテストプラン(STP-*)を、メタデータとリンクされたテスト実行とともに取得します。 プロンプト例
Get sub-test-plan STP-45 under test plan TP-120 in the 'Shopping App' project

⚙️ BrowserStack SDKセットアップ / テスト自動化

  1. setupBrowserStackAutomateTests — BrowserStack SDKを統合し、BrowserStackでWebテストを実行します。ビジュアルテスト/Percyには、専用のPercyツールを使用してください。 プロンプト例
Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox.
  1. fetchAutomationScreenshots — 指定されたAutomate/App Automateセッション中にキャプチャされたスクリーンショットを取得します。 プロンプト例
Get screenshots from Automate session ID abc123xyz for my desktop test run
  1. listSessions — Automate/App Automateビルド内のセッションを一覧表示します。各レコードにはsessionIdnamestatusososVersionbrowserdevicebrowserUrl(ダッシュボードリンク)、およびvideoUrlが含まれ、オプションのlimit / offsetページングとクライアント側のstatusフィルターがあります。ダッシュボードURLのハッシュ化されたビルドIDまたはgetBuildId / listBuildIdによって返された可観測性ビルドIDのいずれかを受け取ります。可観測性IDは、ビルドのセッションを介してハッシュ化されたIDに自動的に解決されます。返されたsessionId値は、getFailureLogsfetchAutomationScreenshots、およびfetchSelfHealedSelectorsで機能します。 プロンプト例
List sessions for Automate hashed build ID <hashed build id>

🔍 可観測性

  1. getFailureLogs — Automate/App Automateセッションのエラーログを取得します。App Automateのログエンドポイントはビルド単位でスコープされるため、ハッシュ化されたビルドIDが必要です。お持ちの場合は渡してください。ない場合はセッションから自動的に解決されます。 プロンプト例
Get the Appium logs for App Automate session ID <session id>
  1. fetchBuildInsights — ビルドの詳細と品質ゲートの結果を組み合わせて、BrowserStackビルドに関するインサイトを取得します。hashed_idlistSessionsが受け取るハッシュ化されたビルドID)とsession_typeが含まれ、ビルドがAutomate / App Automateで実行された場合は、ビルドのセッションを通じて解決されます。 プロンプト例
Get the build insights for build UUID <your-build-uuid> on BrowserStack

📱 App Live

  1. runAppLiveSession — クラウド上の実機で手動アプリテストセッションを開始します。 プロンプト例
Open my app on iPhone 15 Pro Max with iOS 17. App path is /Users/xyz/app.ipa

💻 Live

  1. runBrowserLiveSession — デスクトップまたはモバイルブラウザでのウェブサイトテスト用のLiveセッションを開始します。 プロンプト例
Open www.google.com on the latest version of Microsoft Edge on Windows 11

📲 App Automate

  1. takeAppScreenshot — 指定したデバイスでアプリを起動し、アプリが起動したことを確認するためのクイック検証スクリーンショットをキャプチャします。 プロンプト例
Take a screenshot of my app on Google Pixel 6 with Android 12 while testing on App Automate. App file path: /Users/xyz/app-debug.apk
  1. runAppTestsOnBrowserStack — コンパイル済みの.apk/.ipaテストファイルを直接アップロードして、事前に構築されたネイティブモバイルテストスイート(Espresso/XCUITest)を実行します。 プロンプト例
Run Espresso tests from /tests/checkout.zip on Galaxy S21 and Pixel 6 with Android 12. App path is /apps/beta-release.apk under project 'Checkout Flow'
  1. setupBrowserStackAppAutomateTests — Appiumベースのモバイルアプリテスト用にBrowserStack App Automate SDK統合をセットアップします。 プロンプト例
Set up my Appium test suite to run on BrowserStack App Automate

♿ アクセシビリティ

  1. accessibilityExpert — A11yエキスパート(WCAG 2.0/2.1/2.2、モバイル/ウェブのユーザビリティ、ベストプラクティス)に質問します。 プロンプト例
What WCAG guidelines apply to form field error messages on mobile web?
  1. startAccessibilityScan — ウェブアクセシビリティスキャンを開始し、ローカルCSVレポートのパスを取得します。 プロンプト例
Run accessibility scan for "www.example.com"
  1. createAccessibilityAuthConfig — ログインの背後にあるアクセシビリティスキャン用の認証設定(フォームベースまたはベーシック)を作成します。 プロンプト例
Create a basic-auth accessibility config named 'site-login' for https://www.example.com with username testuser and password <password>
  1. getAccessibilityAuthConfig — IDで既存のアクセシビリティ認証設定を取得します。 プロンプト例
Get accessibility auth config with ID <config-id>
  1. fetchAccessibilityIssues — 完了したスキャンからアクセシビリティの問題をページネーション対応で取得します。 プロンプト例
Fetch the accessibility issues for scan ID <scan-id> and scan run ID <scan-run-id>

🎨 Percyビジュアルテスト

  1. percyVisualTestIntegrationAgent — Percyビジュアルテストを新しいプロジェクトに統合し、ステップバイステップのシミュレーションでビジュアル変更の検出をデモンストレーションします。 プロンプト例
Integrate Percy for this project
  1. expandPercyVisualTesting — 既存プロジェクトのPercyビジュアルテストカバレッジをセットアップまたは拡張します(Percy Web StandaloneおよびPercy Automate)。 プロンプト例
Expand Percy coverage for this project
  1. addPercySnapshotCommands — 指定されたテストファイルにPercyスナップショットコマンドを追加します。 (Remote MCPでは利用不可) プロンプト例
Add Percy snapshot commands to my Cypress test files
  1. listTestFiles — 指定されたディレクトリセットのすべてのテストファイルを一覧表示します。 (Remote MCPでは利用不可) プロンプト例
List the test files under my ./tests directory
  1. runPercyScan — Percyビジュアルテストスキャンを実行します。 (Remote MCPでは利用不可) プロンプト例
Run this Percy build
  1. fetchPercyChanges — 最新のビルドと以前のビルドの間でPercy AIが検出したビジュアル変更を取得して要約します。 プロンプト例
Summarize the visual changes Percy detected in my latest build
  1. managePercyBuildApproval — Percyビルドを承認または却下します。 プロンプト例
Approve the latest Percy build

🤖 BrowserStack AIエージェント

  1. uploadProductRequirementFile — PRD/スクリーンショット/PDFをアップロードして、ファイルマッピングIDを取得します(createTestCasesFromFileで使用)。 (Remote MCPでは利用不可) プロンプト例
Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases
  1. createLCASteps — テスト管理の手動テストケースからLow Code Automation(LCA)ステップを生成します。 プロンプト例
Convert the manual test case 'Add to Cart' in the 'Shopping App' project into LCA steps
  1. fetchSelfHealedSelectors — AIセルフヒーリングされたセレクタ(テストソース付き)を取得して、DOM変更による不安定なテストを修正します。 プロンプト例
Fetch and fix flaky test selectors in Automate session ID session_9482 using MCP
  1. prepareSelfHealingPlan — ロケーターペアとテストソースをバンドルしたセルフヒーリング編集プランを構築し、LLMが適用できるようにします。ファイル自体は変更しません。 プロンプト例
Prepare a self-healing plan from the self-healed selectors for my build
  1. fetchRCA — 失敗したAutomate/App-Automateテスト(数値テストIDによる)のAI根本原因分析を取得します。修正案を提案するのみで、自動適用は決して行いません。 プロンプト例
Fetch the root cause analysis for failed test IDs 101 and 102 on BrowserStack
  1. getBuildId — 指定されたプロジェクトとビルド名のBrowserStackビルドIDを、自分のビルドにスコープして取得します。 プロンプト例
Get the build ID for build 'nightly-regression' in project 'Checkout Flow'
  1. listBuildId — プロジェクトとビルド名の最新のビルドIDを、全ユーザー(ユーザーフィルターなし)から取得します。 プロンプト例
Get the latest build ID for build 'nightly-regression' in project 'Checkout Flow'
  1. listTestIds — BrowserStackビルド(AutomateまたはApp Automate)のテストを、各テストのstatussession_idとともに一覧表示し、オプションでステータス(passed/failed/pending/skipped)でフィルタリングします。session_idgetFailureLogsfetchAutomationScreenshotsに直接供給されます。 プロンプト例
List the failed test IDs from build UUID <your-build-uuid> on BrowserStack
  1. askBrowserStackAI (アルファ版、利用制限あり) — 複数ステップのタスクを平易な言葉でBrowserStackのエージェントに渡します。エージェントは呼び出すべきAPIを決定し、回答と実行したステップを返します。テスト管理とテストレポート&分析をカバーします。データを変更する操作は、お客様自身のクライアントで確認を求めて一時停止します。削除は完全に拒否されます。アカウントが登録されている必要があります。登録されていない場合は、権限エラーが返され、何も実行されません。 プロンプト例
Find all payment test cases in project Shopping App and add the 'regression' tag to them

🚀 Remote MCPサーバー

Remote MCPは、複雑なセットアップやローカルインストールの手間なしに、MCPサーバーのすべての機能を提供します。

主な利点:

  • ✅ ファイアウォールやバイナリ、ローカルインストールが許可されていない環境を気にせず、エンタープライズネットワークでシームレスに動作します。

  • ✅ 安全なOAuth統合 – パスワード共有や手動の資格情報処理は不要です。

制限事項:

  • ❌ ローカルテストはサポートされていません(VPN、ファイアウォール、またはlocalhostの背後にあるアプリをテストできません)。ローカルテストを行う必要がある場合は、BrowserStack Local MCPサーバーを使用する必要があります。
  • ❌ レイテンシーが若干高くなる可能性がありますが、通常の使用では気にならない程度です。

インストール手順:

  • VSCode(Copilot - エージェントモード)の場合:.vscode/mcp.json:

    • 設定ファイルを見つけるか作成します:

    • プロジェクトのルートディレクトリで、.vscodeという名前のフォルダーを探します。このフォルダーは通常非表示のため、展開で説明されているように見つける必要があります。

    • このフォルダーが存在しない場合は作成します。

    • .vscodeフォルダー内に、mcp.jsonという名前の新しいファイルを作成します。

    • ローカルのBrowserStack MCPの代わりにRemote BrowserStack MCPをセットアップするには、次のJSONコンテンツを追加できます:

      Remote MCP JSON file

      Remote MCPをセットアップする別の方法

    • ステップ1. 歯車アイコンをクリックしてツールを選択します

      Select Tools
    • ステップ2. 上部中央にツールメニューが表示されるので、上部のメニューをスクロールダウンして「Add MCP Server」をクリックします

    Add MCP Server
    • ステップ3. HTTPオプションをクリックします

      HTTP Option
    • ステップ4. Remote MCPサーバーURLを貼り付けます:https://mcp.browserstack.com/mcp

      Remote MCP Server URL
    • ステップ5. サーバーIDとして「browserstack」を指定します

      Remote MCP Server ID
    • ステップ6. VSCodeで「start MCP Server」をクリックし、次に「Allow」をクリックします

      authentication1
      authentication2
      Sign_in_success

🤝 推奨MCPクライアント

  • 自動テスト+デバッグのユースケースには、Github CopilotまたはCursorを推奨します。
  • 手動テストのユースケース(Live Testing)には、Claude Desktopを推奨します。

⚠️ 重要な注意事項

  • BrowserStack MCPサーバーは活発に開発中であり、現在はMCP仕様のサブセットをサポートしています。まもなくさらに多くの機能が追加される予定です。
  • ツールの呼び出しはMCPクライアントに依存し、MCPクライアントはLLMに依存するため、予期しない結果につながる可能性のある非決定的な動作が発生する場合があります。提案やフィードバックがある場合は、issueを開いて議論してください。

📝 貢献

貢献を歓迎します!変更したい内容について議論するために、issueを開いてください。 👉 貢献ガイドラインを表示するにはここをクリック

📞 サポート

サポートについては、以下を行ってください:

  • MCPサーバーに関連する問題が発生した場合は、GitHubリポジトリでissueを開いてください。
  • その他の質問については、サポートチームにお問い合わせください。

🚀 近日公開予定の機能

エキサイティングなアップデートにご期待ください!ご提案がありますか?議論のためにissueを開いてください。