BrowserStack

官方

將 BrowserStack 測試平台的完整功能帶入您的 AI 工具，讓團隊中的每位開發者和測試人員都能更快速、更輕鬆地進行測試。

GitHub

148

你可以用 Browser Stack MCP 做什麼？

建立與管理測試案例 — 在測試管理專案中，使用 createTestCase、listTestCases 或 createTestCasesFromFile 來新增、更新、列出及批量產生測試案例。
在真實裝置上執行手動應用程式與瀏覽器測試 — 透過 runAppLiveSession 和 runBrowserLiveSession，在特定的裝置/作業系統/瀏覽器組合上啟動即時測試工作階段。
執行與除錯自動化測試套件 — 使用 setupBrowserStackAutomateTests、getFailureLogs 和 fetchRCA 來設定基於 SDK 的測試執行、擷取失敗日誌，以及取得 AI 根本原因分析。
掃描無障礙問題 — 對 URL 執行 WCAG 合規性掃描，並使用 startAccessibilityScan 和 fetchAccessibilityIssues 擷取標記的問題。
整合 Percy 視覺測試 — 使用 addPercySnapshotCommands、runPercyScan 和 fetchPercyChanges 來新增視覺快照指令、執行 Percy 建置，以及檢閱偵測到的視覺變更。

文件

BrowserStack MCP 伺服器

全方位測試平台

直接在 Cursor、Claude 或任何支援 MCP 的客戶端等工具中，使用簡單的英文來管理測試案例、執行手動或自動化測試、除錯問題，甚至修復程式碼。

隨時隨地測試：

輕鬆將 BrowserStack 測試平台連接到您喜愛的 AI 工具，例如 IDE、LLM 或代理工作流程。

使用自然語言測試：

使用簡單的英文提示來管理、執行、除錯測試，甚至修復程式碼。

減少情境切換：

保持專注——將所有專案脈絡集中一處，並直接從您的 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 安裝程式

💡 使用範例

📱 手動應用程式測試

在搭載最新作業系統版本的真實裝置上測試行動應用程式。無需繁瑣設定即可重現錯誤並除錯崩潰問題。以下是一些在 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?"

有別於模擬器，可在實際裝置上測試您應用程式的真實世界效能。透過先進的應用程式分析功能，您可以即時除錯崩潰和效能問題。
從我們的裝置網格存取所有主要裝置和作業系統版本，我們有嚴格的服務等級協議，可在上市日為我們的全球資料中心配置新發布的裝置。

🌐 手動網頁測試

與應用程式測試類似，您可以使用以下提示在 BrowserStack 廣泛的真實瀏覽器和裝置雲端上測試您的網站。您的電腦上沒有安裝 Edge 瀏覽器嗎？我們為您準備好了！

# Test your websites
"open my website hosted on localhost:3001 on Edge"
"open browserstack.com on latest version of Chrome"

跨不同瀏覽器和裝置測試網站。我們支援所有主要作業系統上的所有主要瀏覽器。
無縫測試託管在您本機上的網站，無需部署到遠端伺服器！

🧪 自動化測試（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?"

利用我們業界領先的測試可觀測性功能，修復 CI/CD 管線回報的測試失敗。在此處尋找更多資訊。
在 BrowserStack 的測試平台上執行以 Jest、Playwright、Selenium 等編寫的測試

🌐 無障礙

透過自動化的本機 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 的測試管理與 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 - 代理模式)：.vscode/mcp.json：
  - 找到或建立設定檔：在您專案的根目錄中，尋找名為 .vscode 的資料夾。此資料夾通常是隱藏的，因此您需要按照展開中的說明找到它。
  - 如果此資料夾不存在，請建立它。
  - 在 .vscode 資料夾內，建立一個名為 mcp.json 的新檔案
  - 新增設定：開啟 mcp.json 檔案，然後新增以下 JSON 內容。
  - 將使用者名稱和 <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 伺服器」圖示選取「已安裝」分頁。點擊窗格底部的「設定 MCP 伺服器」按鈕。

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

💡 BrowserStack MCP 工具清單

截至目前，我們支援 44 個工具。

遠端 MCP 注意事項： 標記為 (在遠端 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、priority 等篩選器和分頁）。 提示範例

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 — 列出測試案例範本及其數字 template_id，用於搭配 createTestCase 套用自訂範本。 提示範例

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 — 使用測試案例產生器 AI 代理從上傳的檔案大量產生測試案例。(在遠端 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 上執行網頁測試。對於視覺測試/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，可選擇按 Build 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 — 在桌面或行動瀏覽器上啟動用於網站測試的 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、行動/網頁可用性、最佳實務）。 提示範例

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

startAccessibilityScan — 啟動網頁無障礙掃描並取得本機 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 視覺測試覆蓋範圍（Percy Web Standalone 和 Percy Automate）。 提示範例

Expand Percy coverage for this project

addPercySnapshotCommands — 將 Percy 快照指令新增到指定的測試檔案中。(在遠端 MCP 中不可用) 提示範例

Add Percy snapshot commands to my Cypress test files

listTestFiles — 列出指定目錄中的所有測試檔案。(在遠端 MCP 中不可用) 提示範例

List the test files under my ./tests directory

runPercyScan — 執行 Percy 視覺測試掃描。(在遠端 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 搭配使用）。(在遠端 MCP 中不可用) 提示範例

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

createLCASteps — 從測試管理中的手動測試案例產生低程式碼自動化 (LCA) 步驟。 提示範例

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

fetchSelfHealedSelectors — 擷取 AI 自我修復的選擇器（以及測試原始碼），以修復因 DOM 變更導致的不穩定測試。 提示範例

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 測試（透過數字測試 ID）擷取 AI 根本原因分析。僅建議修復，絕不自動套用。 提示範例

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，並可依狀態（通過/失敗/待處理/已跳過）篩選。 提示範例

List the failed test IDs from build UUID <your-build-uuid> on BrowserStack

🚀 遠端 MCP 伺服器

遠端 MCP 提供 MCP 伺服器的所有功能，無需複雜的設定或本機安裝。

主要優點：

✅ 在企業網路中無縫運作，無需擔心防火牆、二進位檔案或本機安裝不被允許的情況。
✅ 安全的 OAuth 整合 – 無需密碼共享或手動處理憑證。

限制：

❌ 不支援本機測試（無法測試 VPN、防火牆或 localhost 後方的應用程式）。如果需要進行本機測試，則必須使用 BrowserStack 本機 MCP 伺服器。
❌ 延遲可能會稍高，但影響不大 — 在一般使用中通常不會察覺。

安裝步驟：

在 VSCode（Copilot - 代理模式）上：.vscode/mcp.json：
- 找到或建立設定檔：
- 在專案的根目錄中，尋找名為 .vscode 的資料夾。此資料夾通常是隱藏的，因此您需要按照展開說明中的方式找到它。
- 如果此資料夾不存在，請建立它。
- 在 .vscode 資料夾內，建立一個名為 mcp.json 的新檔案。
- 若要設定遠端 BrowserStack MCP 而非本機 BrowserStack MCP，您可以新增以下 JSON 內容：
  
  設定遠端 MCP 的替代方式
- 步驟 1. 點擊齒輪圖示以選取工具
- 步驟 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，因此可能會出現一些非確定性行為，導致非預期的結果。如果您有任何建議或回饋，請開啟一個議題進行討論。

📝 貢獻

我們歡迎貢獻！請先開啟一個議題來討論您想進行的任何變更。 👉 點此檢視我們的貢獻指南

📞 支援

如需支援，請：

如果您遇到任何與 MCP 伺服器相關的問題，請在我們的 GitHub 儲存庫中開啟一個議題。
如有任何其他疑問，請聯絡我們的支援團隊。

🚀 更多功能即將推出

敬請期待令人興奮的更新！有任何建議嗎？請開啟一個議題進行討論。

BrowserStack

你可以用 Browser Stack MCP 做什麼？

文件

BrowserStack MCP 伺服器

隨時隨地測試：

使用自然語言測試：

減少情境切換：

⚡️ 一鍵 MCP 設定

注意：請確保您使用的 Node 版本 >= 18.0

💡 使用範例

📱 手動應用程式測試

🌐 手動網頁測試

🧪 自動化測試（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

♿ 無障礙

🎨 Percy 視覺測試

🤖 BrowserStack AI 代理

🚀 遠端 MCP 伺服器

主要優點：

限制：

安裝步驟：

設定遠端 MCP 的替代方式

🤝 推薦的 MCP 客戶端

⚠️ 重要注意事項

📝 貢獻

📞 支援

🚀 更多功能即將推出

注意：請確保您使用的 Node 版本 >= `18.0`

注意：請確保您使用的 Node 版本 >= `18.0`

注意：請確保您使用的 Node 版本 >= `18.0`