BrowserStack
公式BrowserStackのテストプラットフォームの全機能をAIツールに統合し、チームのすべての開発者やテスターにとってテストをより迅速かつ容易にします。
Browser Stack MCPで何ができますか?
- テストケースの作成と管理 —
createTestCase、listTestCases、またはcreateTestCasesFromFileを使用して、Test Managementプロジェクト内でテストケースの追加、更新、一覧表示、一括生成を行います。 - 実機での手動アプリおよびブラウザテストの実行 —
runAppLiveSessionとrunBrowserLiveSessionを使用して、特定のデバイス/OS/ブラウザの組み合わせでライブテストセッションを開始します。 - 自動テストスイートの実行とデバッグ —
setupBrowserStackAutomateTests、getFailureLogs、fetchRCAを使用して、SDKベースのテスト実行を設定し、失敗ログを取得し、AIによる根本原因分析を取得します。 - アクセシビリティ問題のスキャン —
startAccessibilityScanとfetchAccessibilityIssuesを使用して、URLに対してWCAG準拠スキャンを実行し、フラグが立てられた問題を取得します。 - Percyビジュアルテストの統合 —
addPercySnapshotCommands、runPercyScan、fetchPercyChangesを使用して、ビジュアルスナップショットコマンドを追加し、Percyビルドを実行し、検出されたビジュアル変更を確認します。
ドキュメント
BrowserStack MCP サーバー
包括的なテストプラットフォーム
Cursor、Claude、または任意のMCP対応クライアントなどのツール内で、平易な英語を使用して、テストケースの管理、手動テストや自動テストの実行、問題のデバッグ、さらにはコードの修正を直接行えます。
どこからでもテスト:
BrowserStack Test Platformをお気に入りのAIツール(IDE、LLM、エージェントワークフローなど)に簡単に接続できます。
自然言語でテスト:
平易な英語のプロンプトを使用して、テストの管理、実行、デバッグ、さらにはコードの修正を行います。
コンテキストスイッチの削減:
フローを維持し、すべてのプロジェクトコンテキストを1か所にまとめ、IDEまたはLLMから直接アクションをトリガーします。
⚡️ ワンクリック MCP セットアップ
以下のボタンをクリックして、それぞれのIDEにMCPをインストールします。
注意 : Nodeバージョン >= 18.0 を使用していることを確認してください
node --versionを使用してNodeのバージョンを確認してください。推奨バージョン:v22.15.0(LTS)- Nodeをアップグレードするには:
-
- 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
- macOSの場合
-
- Windowsの場合
(nvm-windows) : nvm install 22.15.0 && nvm use 22.15.0
- Windowsの場合
- 👉 または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の広範な実ブラウザとデバイスのクラウドでWebサイトをテストできます。マシンにEdgeブラウザがインストールされていなくても、当社がカバーします!
# Test your websites
"open my website hosted on localhost:3001 on Edge"
"open browserstack.com on latest version of Chrome"
- さまざまなブラウザやデバイスでWebサイトをテストします。すべての主要OSにわたるすべての主要ブラウザをサポートしています。
- ローカルマシンでホストされているWebサイトをシームレスにテストできます。リモートサーバーにデプロイする必要はありません!
🧪 自動テスト (Playwright、Selenium、A11yなど)
IDEまたはLLMで、壊れたテストスクリプトを自動分析、診断、さらには修正します。ログを即座に取得し、根本原因を特定し、コンテキストに応じた修正を適用します。デバッグループはもう不要です。 以下は、BrowserStackのTest Platformで自動テストを実行/デバッグ/修正するためのサンプルプロンプトです。
注意: テストの根本原因分析(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?"
- 業界をリードするTest Observability機能を利用して、CI/CDパイプラインによって報告されたテストの失敗を修正します。詳細はこちらをご覧ください。
- Jest、Playwright、Seleniumなどで記述されたテストをBrowserStackのTest Platformで実行します。
🌐 アクセシビリティ
自動化されたローカル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のTest Managementの機能を活用するためのサンプルプロンプトです。
# 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をインストールします。
MCPサーバーをセットアップする別の方法
-
BrowserStackアカウントを作成する
-
まだアカウントをお持ちでない場合は、BrowserStackにサインアップしてください。
-
ℹ️ オープンソースプロジェクトをお持ちの場合は、無料プランを提供できます。
-
アカウントを取得したら(そして適切なプランを購入したら)、アカウント設定から
usernameとaccess_keyをメモしてください。
-
-
注意 : Nodeバージョン >=
18.0を使用していることを確認してくださいnode --versionを使用してNodeのバージョンを確認してください。推奨バージョン:v22.15.0(LTS)
-
MCPサーバーをインストールする
-
VSCode (Copilot - Agent Mode):
.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ボタンをクリックしてサーバーを起動してください。
** VSCode CopilotでMCPをセットアップする別の方法
1.歯車アイコンをクリックしてツールを選択します
2. 上部中央にツールメニューが表示されます。上部のメニューを下にスクロールし、「MCPサーバーを追加」をクリックします
3. NPMパッケージオプション(NPMパッケージからインストール)を選択します - リストの3番目
4. NPMパッケージ名(@browserstack/mcp-server)を入力します
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 Servers」アイコンをクリックします 「Installed」タブを選択します。ペインの下部にある「Configure MCP Servers」ボタンをクリックします。
{
"mcpServers": {
"browserstack": {
"command": "npx",
"args": ["-y", "@browserstack/mcp-server@latest"],
"env": {
"BROWSERSTACK_USERNAME": "<username>",
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
}
}
}
}
💡 BrowserStack MCPツールのリスト
現在、44のツールをサポートしています。
リモートMCPに関する注意: (not available in Remote MCP) とマークされたツールは、ローカルファイル/プロセスの状態に依存しており、マルチテナントのリモートMCPサーバーでは無効になっています。これらはローカル(npx)セットアップで利用可能です。
🧾 テスト管理
createProjectOrFolder— テストケースを整理するためのテスト管理プロジェクトやフォルダーを作成します。フォルダーID、プロジェクトID、およびTMプロジェクトダッシュボードにアクセスするためのテスト管理リンクを返します。 プロンプト例
Create a new Test Management project named 'Shopping App' with two folders - Login and Checkout
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
updateTestCase— 既存のテストケースを更新します。任意のフィールドのサブセット(名前、優先度、ステータス、ステップ、タグなど)を変更できます。指定されたフィールドのみが変更されます。 プロンプト例
Update test case TC-482 in the 'Shopping App' project and set its priority to high
listTestCases— プロジェクトのテストケースを一覧表示します。オプションでフォルダーにスコープできます(case_type、優先度、ページネーションなどのフィルターをサポートします)。 プロンプト例
List all high-priority test cases in the 'Shopping App' project with project_identifier: PR-59457
listFolders— テスト管理プロジェクト内のフォルダーを一覧表示します(各フォルダーのID、名前、ケース数、サブフォルダー数を返します)。parent_idを渡してサブフォルダーを一覧表示します。 プロンプト例
List all folders in the 'Shopping App' project with project_identifier: PR-59457
listTestCaseTemplates— カスタムテンプレートを適用するためにcreateTestCaseで使用する、数値のtemplate_idを含むテストケーステンプレートを一覧表示します。 プロンプト例
List the available test case templates in the 'Shopping App' project
createTestRun— プロジェクト内の選択されたテストケースのテスト実行(スイート)を作成します。 プロンプト例
Create a test run for the Login folder in the 'Shopping App' project and name it 'Release v1.0 Login Flow'
listTestRuns— プロジェクトのテスト実行を一覧表示します(日付、担当者、状態でフィルタリングします)。 プロンプト例
List all test runs from the 'Shopping App' project that were executed last week and are currently marked in-progress
updateTestRun— テスト実行の名前/状態を更新したり、テストケースを追加したりします。 プロンプト例
Update test run ID 1043 in the 'Shopping App' project and mark it as complete with the note 'Regression cycle done'
addTestResult— 実行内のテストケースの手動実行結果(合格/失敗/ブロック/スキップ)を追加します。 プロンプト例
Mark the test case 'Invalid Login Scenario' as passed in test run ID 1043 of the 'Shopping App' project
createTestCasesFromFile— Test Case Generator AI Agentを使用して、アップロードされたファイルからテストケースを一括生成します。(not available in Remote MCP) プロンプト例
Upload test cases from '/Users/xyz/testcases.pdf' to the 'Shopping App' project in Test Management
listTestPlans— プロジェクト内のテスト計画(TP-*)を、名前、ステータス、日付、アクティブ/クローズされた実行数とともに一覧表示します。ページネーションをサポートします。 プロンプト例
List all test plans in the 'Shopping App' project with project_identifier: PR-59457
getTestPlan— 識別子(TP-*)でテスト計画を取得し、そのメタデータ、リンクされたテスト実行、合計テストケース数、ステータスサマリーを表示します。 プロンプト例
Get the details of test plan TP-120 in the 'Shopping App' project
listSubTestPlans— 親テスト計画(TP-)の下にあるサブテスト計画(STP-)を一覧表示します。ページネーションをサポートします。 プロンプト例
List sub-test-plans under test plan TP-120 in the 'Shopping App' project
getSubTestPlan— 親計画の下にあるサブテスト計画(STP-*)を、そのメタデータとリンクされたテスト実行とともに取得します。 プロンプト例
Get sub-test-plan STP-45 under test plan TP-120 in the 'Shopping App' project
⚙️ BrowserStack SDK セットアップ / テストの自動化
setupBrowserStackAutomateTests— BrowserStack SDKを統合し、BrowserStackでWebテストを実行します。ビジュアルテスト/Percyの場合は、専用のPercyツールを使用してください。 プロンプト例
Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox.
fetchAutomationScreenshots— 特定のAutomate/App Automateセッション中にキャプチャされたスクリーンショットを取得します。 プロンプト例
Get screenshots from Automate session ID abc123xyz for my desktop test run
🔍 可観測性
getFailureLogs— Automate/App Automateセッションのエラーログを取得します(App Automateの場合はオプションでビルドIDで)。 プロンプト例
Get the error logs from the session ID: 21a864032a7459f1e7634222249b316759d6827f, Build ID: dt7ung4wmjittzff8kksrjadjax9gzvbscoyf9qn of App Automate test session
fetchBuildInsights— ビルドの詳細と品質ゲートの結果を組み合わせて、BrowserStackビルドに関するインサイトを取得します。 プロンプト例
Get the build insights for build UUID <your-build-uuid> on BrowserStack
📱 App Live
runAppLiveSession— クラウド上の実デバイスで手動アプリテストセッションを開始します。 プロンプト例
Open my app on iPhone 15 Pro Max with iOS 17. App path is /Users/xyz/app.ipa
💻 Live
runBrowserLiveSession— デスクトップまたはモバイルブラウザでのWebサイトテスト用のLiveセッションを開始します。 プロンプト例
Open www.google.com on the latest version of Microsoft Edge on Windows 11
📲 App Automate
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
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'
setupBrowserStackAppAutomateTests— Appiumベースのモバイルアプリテスト用にBrowserStack App Automate SDK統合をセットアップします。 プロンプト例
Set up my Appium test suite to run on BrowserStack App Automate
♿ アクセシビリティ
accessibilityExpert— A11yエキスパートに質問します(WCAG 2.0/2.1/2.2、モバイル/Webユーザビリティ、ベストプラクティス)。 プロンプト例
What WCAG guidelines apply to form field error messages on mobile web?
startAccessibilityScan— Webアクセシビリティスキャンを開始し、ローカルのCSVレポートパスを取得します。 プロンプト例
Run accessibility scan for "www.example.com"
createAccessibilityAuthConfig— ログインが必要なアクセシビリティスキャン用に、認証設定(フォームベースまたはベーシック認証)を作成します。 プロンプト例
Create a basic-auth accessibility config named 'site-login' for https://www.example.com with username testuser and password <password>
getAccessibilityAuthConfig— IDで既存のアクセシビリティ認証設定を取得します。 プロンプト例
Get accessibility auth config with ID <config-id>
fetchAccessibilityIssues— 完了したスキャンからアクセシビリティの問題を取得します(ページネーション対応)。 プロンプト例
Fetch the accessibility issues for scan ID <scan-id> and scan run ID <scan-run-id>
🎨 Percy ビジュアルテスト
percyVisualTestIntegrationAgent— Percyビジュアルテストを新規プロジェクトに統合し、ステップバイステップのシミュレーションで視覚的な変更検出をデモします。 プロンプト例
Integrate Percy for this project
expandPercyVisualTesting— 既存プロジェクト(Percy Web StandaloneおよびPercy Automate)のPercyビジュアルテストカバレッジをセットアップまたは拡張します。 プロンプト例
Expand Percy coverage for this project
addPercySnapshotCommands— 指定されたテストファイルにPercyスナップショットコマンドを追加します。(Remote MCPでは利用不可) プロンプト例
Add Percy snapshot commands to my Cypress test files
listTestFiles— 指定されたディレクトリセットの全テストファイルを一覧表示します。(Remote MCPでは利用不可) プロンプト例
List the test files under my ./tests directory
runPercyScan— Percyビジュアルテストスキャンを実行します。(Remote MCPでは利用不可) プロンプト例
Run this Percy build
fetchPercyChanges— 最新ビルドと前回ビルドの間でPercy AIが検出した視覚的な変更を取得し、要約します。 プロンプト例
Summarize the visual changes Percy detected in my latest build
managePercyBuildApproval— Percyビルドを承認または却下します。 プロンプト例
Approve the latest Percy build
🤖 BrowserStack AI エージェント
uploadProductRequirementFile— PRD/スクリーンショット/PDFをアップロードし、ファイルマッピングIDを取得します(createTestCasesFromFileで使用)。(Remote MCPでは利用不可) プロンプト例
Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases
createLCASteps— テスト管理の手動テストケースからLow Code Automation (LCA) ステップを生成します。 プロンプト例
Convert the manual test case 'Add to Cart' in the 'Shopping App' project into LCA steps
fetchSelfHealedSelectors— DOM変更による不安定なテストを修正するため、AI自己修復セレクター(およびテストソース)を取得します。 プロンプト例
Fetch and fix flaky test selectors in Automate session ID session_9482 using MCP
prepareSelfHealingPlan— LLMが適用するためのロケーターペアとテストソースをバンドルした自己修復編集計画を構築します。ファイル自体は変更しません。 プロンプト例
Prepare a self-healing plan from the self-healed selectors for my build
fetchRCA— 失敗したAutomate/App-AutomateテストのAI根本原因分析を(数値テストIDで)取得します。修正案の提案のみで、自動適用はされません。 プロンプト例
Fetch the root cause analysis for failed test IDs 101 and 102 on BrowserStack
getBuildId— 指定されたプロジェクトとビルド名のBrowserStackビルドIDを、自身のビルドに限定して取得します。 プロンプト例
Get the build ID for build 'nightly-regression' in project 'Checkout Flow'
listBuildId— プロジェクトとビルド名の最新ビルドIDを、全ユーザー横断で取得します(ユーザーフィルターなし)。 プロンプト例
Get the latest build ID for build 'nightly-regression' in project 'Checkout Flow'
listTestIds— BrowserStack AutomateビルドからテストIDをステータス(passed/failed/pending/skipped)でフィルターして一覧表示します。 プロンプト例
List the failed test IDs from build UUID <your-build-uuid> on BrowserStack
🚀 Remote MCP Server
Remote MCPは、複雑なセットアップやローカルインストールの手間なく、MCPサーバーの全機能を提供します。
主な利点:
-
✅ ファイアウォールやバイナリを気にすることなく、またローカルインストールが許可されていない環境でも、エンタープライズネットワークでシームレスに動作します。
-
✅ 安全なOAuth統合 – パスワード共有や手動の認証情報処理は不要です。
制限事項:
- ❌ ローカルテスト非対応(VPN、ファイアウォール内、またはlocalhostのアプリをテストできません)。ローカルテストが必要な場合は、BrowserStack Local MCPサーバーを使用する必要があります。
- ❌ レイテンシーがわずかに高くなる可能性がありますが、通常の使用で気になるほどではありません。
インストール手順:
-
VSCode(Copilot - Agent Mode)の場合:
.vscode/mcp.json:-
設定ファイルを見つけるか作成します:
-
プロジェクトのルートディレクトリで、.vscode という名前のフォルダを探します。このフォルダは通常非表示のため、展開に記載されている方法で見つける必要があります。
-
このフォルダが存在しない場合は、作成します。
-
.vscode フォルダ内に、mcp.json という名前の新しいファイルを作成します。
-
ローカルのBrowserStack MCPの代わりにRemote BrowserStack MCPをセットアップするには、次のJSONコンテンツを追加します:
Remote MCPセットアップの別の方法
-
手順1. 歯車アイコンをクリックしてツールを選択します
-
手順2. 上部中央にツールメニューが表示されます。上部のメニューを下にスクロールし、「MCPサーバーを追加」をクリックします
-
手順3. HTTPオプションをクリックします
-
手順4. Remote MCPサーバーURLを貼り付けます: https://mcp.browserstack.com/mcp
-
手順5. サーバーIDを「browserstack」と入力します
-
手順6. VSCodeで「MCPサーバーを開始」をクリックし、「許可」をクリックします
-
🤝 推奨MCPクライアント
- 自動テスト + デバッグのユースケースには、Github CopilotまたはCursorの使用を推奨します。
- 手動テストのユースケース(Live Testing)には、Claude Desktopの使用を推奨します。
⚠️ 重要事項
- BrowserStack MCPサーバーは活発に開発中であり、現在MCP仕様のサブセットをサポートしています。今後さらに機能が追加される予定です。
- ツールの呼び出しはMCPクライアントに依存し、MCPクライアントはLLMに依存するため、予期しない結果につながる非決定的な動作が発生する可能性があります。提案やフィードバックがある場合は、Issueを作成して議論してください。
📝 コントリビューション
コントリビューションを歓迎します!変更を加えたい場合は、Issueを作成して議論してください。 👉 コントリビューションガイドラインはこちらをクリック
📞 サポート
サポートについては、以下をご利用ください:
- MCPサーバーに関連する問題が発生した場合は、GitHubリポジトリでIssueを作成してください。
- その他のお問い合わせは、サポートチームまでご連絡ください。
🚀 近日公開予定の機能
エキサイティングなアップデートにご期待ください!ご提案がある場合は、Issueを作成して議論してください。

