BrowserStack MCP Server

公式

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

GitHub

145

ドキュメント

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をアップグレードするには:
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の広範な実ブラウザと実デバイスのクラウドで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”

📋 テスト管理

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

# 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サーバーを起動するには、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ツール一覧

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

🧾 テスト管理

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

listTestCases — プロジェクトのテストケースを一覧表示します（優先度、ステータス、タグなどのフィルターをサポートします）。 プロンプト例

List all high-priority test cases in the 'Shopping App' project with project_identifier: PR-59457

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 — アップロードされたファイル（PDFなど）からテストケースを一括作成します。 プロンプト例

Upload test cases from '/Users/xyz/testcases.pdf' to the 'Shopping App' project in Test Management

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

setupBrowserStackAutomateTests — BrowserStack SDKを統合し、BrowserStackでWebテストを実行します（オプションでPercyを有効にします）。 プロンプト例

Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox. Enable Percy for visual testing.

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

📱 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 — 実デバイスで自動モバイルテスト（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'

♿ アクセシビリティ

accessibilityExpert — A11yエキスパートに質問します（WCAG 2.0/2.1/2.2、モバイル/Webユーザビリティ、ベストプラクティス）。 プロンプト例

What WCAG guidelines apply to form field error messages on mobile web?

startAccessibilityScan — Webアクセシビリティスキャンを開始し、結果リンクを返します。 プロンプト例

Run accessibility scan for "www.example.com"

🤖 BrowserStack AIエージェント

fetchSelfHealedSelectors — DOMの変更による不安定なテストを修正するために、AIが自己修復したセレクターを取得します。 プロンプト例

Fetch and fix flaky test selectors in Automate session ID session_9482 using MCP

createLCASteps — テスト管理の手動テストケースからローコード自動化ステップを生成します。 プロンプト例

Convert the manual test case 'Add to Cart' in the 'Shopping App' project into LCA steps

uploadProductRequirementFile — PRD/スクリーンショット/PDFをアップロードし、ファイルマッピングIDを取得します（createTestCasesFromFileで使用します）。 プロンプト例

Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases

🚀 リモートMCPサーバー

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

主な利点:

✅ ファイアウォールやバイナリを気にすることなく、またはローカルインストールが許可されていないエンタープライズネットワークでもシームレスに動作します。
✅ 安全なOAuth統合 – パスワードの共有や手動での認証情報の処理は不要です。

制限事項:

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

インストール手順:

VSCode (Copilot - Agent Mode)の場合: .vscode/mcp.json:
- 設定ファイルを見つけるか作成する:
- プロジェクトのルートディレクトリで、.vscodeという名前のフォルダーを探します。このフォルダーは通常非表示になっているため、展開に記載されているように見つける必要があります。
- このフォルダーが存在しない場合は、作成します。
- .vscodeフォルダー内に、mcp.jsonという名前の新しいファイルを作成します。
- ローカルBrowserStack MCPの代わりにリモートBrowserStack MCPをセットアップするには、次のJSONコンテンツを追加できます:
  
  リモートMCPをセットアップする別の方法
手順1. 歯車アイコンをクリックして「ツール」を選択します
```
<div align="center">
<img src="assets/select_tools.png" alt="Select Tools" height="300" width="300"> 
</div>
```
- 手順2. 上部中央にツールメニューが表示されます。上部のメニューを下にスクロールし、「MCPサーバーを追加」をクリックします
- 手順3. 「HTTP」オプションをクリックします
- 手順4. リモートMCPサーバーURLを貼り付けます : https://mcp.browserstack.com/mcp
- 手順5. サーバーIDを「browserstack」と指定します
- 手順6. VSCodeで「MCPサーバーを開始」をクリックし、「許可」をクリックします

🤝 推奨MCPクライアント

自動テストとデバッグのユースケースには、Github CopilotまたはCursorの使用を推奨します。
手動テストのユースケース（ライブテスト）には、Claude Desktopの使用を推奨します。

⚠️ 重要事項

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

📝 コントリビューション

コントリビューションを歓迎します！変更を加えたい場合は、Issueを作成してご議論ください。 👉 コントリビューションガイドラインはこちらをクリック

📞 サポート

サポートについては、以下をご利用ください：

MCPサーバーに関する問題が発生した場合は、GitHubリポジトリでIssueを作成してください。
その他のお問い合わせは、サポートチームまでご連絡ください。

🚀 近日公開予定の機能

エキサイティングなアップデートにご期待ください！ご提案がありましたら、Issueを作成してご議論ください。

BrowserStack MCP Server

ドキュメント

BrowserStack MCP サーバー

どこからでもテスト:

自然言語でテスト:

コンテキストスイッチの削減:

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

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

💡 使用例

📱 手動アプリテスト

🌐 手動Webテスト

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

🌐 アクセシビリティ

📋 テスト管理

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

🛠️ インストール

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

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

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

MCPサーバーをセットアップする別の方法

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

** VSCode CopilotでMCPをセットアップする別の方法

💡 BrowserStack MCPツール一覧

🧾 テスト管理

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

🔍 可観測性

📱 App Live

💻 Live

📲 App Automate

♿ アクセシビリティ

🤖 BrowserStack AIエージェント

🚀 リモートMCPサーバー

主な利点:

制限事項:

インストール手順:

リモートMCPをセットアップする別の方法

🤝 推奨MCPクライアント

⚠️ 重要事項

📝 コントリビューション

📞 サポート

🚀 近日公開予定の機能

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

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

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