BrowserStack

공식

BrowserStack의 테스트 플랫폼의 모든 기능을 AI 도구에 통합하여, 팀 내 모든 개발자와 테스터가 더 빠르고 쉽게 테스트를 수행할 수 있도록 합니다.

GitHub

148

Browser Stack MCP(으)로 무엇을 할 수 있나요?

테스트 케이스 생성 및 관리 — Test Management 프로젝트 내에서 createTestCase, listTestCases 또는 createTestCasesFromFile을 사용하여 테스트 케이스를 추가, 업데이트, 나열 및 대량 생성합니다.
실제 기기에서 수동 앱 및 브라우저 테스트 실행 — runAppLiveSession 및 runBrowserLiveSession을 통해 특정 기기/OS/브라우저 조합에서 라이브 테스트 세션을 시작합니다.
자동화된 테스트 스위트 실행 및 디버깅 — setupBrowserStackAutomateTests, getFailureLogs 및 fetchRCA를 사용하여 SDK 기반 테스트 실행을 설정하고, 실패 로그를 가져오며, AI 근본 원인 분석을 검색합니다.
접근성 문제 스캔 — URL에서 WCAG 준수 스캔을 실행하고 startAccessibilityScan 및 fetchAccessibilityIssues를 사용하여 플래그가 지정된 문제를 검색합니다.
Percy 시각적 테스트 통합 — addPercySnapshotCommands, runPercyScan 및 fetchPercyChanges를 사용하여 시각적 스냅샷 명령을 추가하고, Percy 빌드를 실행하며, 감지된 시각적 변경 사항을 검토합니다.

문서

BrowserStack MCP 서버

종합 테스트 플랫폼

Cursor, Claude 또는 MCP 지원 클라이언트와 같은 도구 내에서 바로 일반 영어를 사용하여 테스트 케이스를 관리하고, 수동 또는 자동화된 테스트를 실행하고, 문제를 디버깅하고, 코드까지 수정할 수 있습니다.

어디서든 테스트:

BrowserStack 테스트 플랫폼을 IDE, LLM 또는 에이전트 워크플로우와 같은 선호하는 AI 도구에 쉽게 연결하세요.

자연어로 테스트:

일반 영어 프롬프트를 사용하여 테스트를 관리, 실행, 디버깅하고 코드까지 수정하세요.

컨텍스트 전환 감소:

흐름을 유지하세요—모든 프로젝트 컨텍스트를 한 곳에 보관하고 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를 갖추고 있습니다.

🌐 수동 웹 테스팅

앱 테스팅과 유사하게, 다음 프롬프트를 사용하여 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?"

업계 최고의 테스트 관찰 가능성 기능을 활용하여 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”

📋 테스트 관리

자연어를 사용하여 테스트 케이스를 생성 및 관리하고, 테스트 계획을 만들고, 테스트 실행을 트리거하세요. 아래는 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를 설치하세요:

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 패키지에서 설치) - 목록의 세 번째

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 — 사용자 정의 템플릿을 적용하기 위해 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 — 테스트 케이스 생성기 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의 경우 선택적으로 빌드 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 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 테스트(숫자 테스트 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

🚀 Remote MCP 서버

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 클라이언트에 의존하며, 이는 다시 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 에이전트

🚀 Remote MCP 서버

주요 이점:

제한 사항:

설치 단계:

Remote MCP 설정의 대체 방법

🤝 권장 MCP 클라이언트

⚠️ 중요 참고 사항

📝 기여하기

📞 지원

🚀 더 많은 기능 출시 예정

참고 : Node 버전 >= `18.0`을 사용하고 있는지 확인하세요

참고 : Node 버전 >= `18.0`을 사용하고 있는지 확인하세요

참고 : Node 버전 >= `18.0`을 사용하고 있는지 확인하세요