BrowserStack MCP Server

공식

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

GitHub

145

문서

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 파이프라인에서 보고된 테스트 실패를 수정하세요. 자세한 정보는 여기에서 확인하세요.
Jest, Playwright, Selenium 등으로 작성된 테스트를 BrowserStack의 테스트 플랫폼에서 실행하세요.

🌐 접근성

자동화된 로컬 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 - Agent Mode): .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 도구 목록

현재 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에서 웹 테스트를 실행합니다 (선택적으로 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 — 데스크톱 또는 모바일 브라우저에서 웹사이트 테스트를 위한 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, 모바일/웹 사용성, 모범 사례). 프롬프트 예시

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

startAccessibilityScan — 웹 접근성 스캔을 시작하고 결과 링크를 반환합니다. 프롬프트 예시

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, 방화벽 또는 로컬호스트 뒤의 앱을 테스트할 수 없음). 로컬 테스트를 수행해야 하는 경우 BrowserStack 로컬 MCP 서버를 사용해야 합니다.
❌ 지연 시간이 약간 더 높을 수 있지만, 일반적인 사용에서는 거의 느껴지지 않을 정도로 미미합니다.

설치 단계:

VSCode (Copilot - Agent Mode): .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 클라이언트에 의존하며, 이는 다시 LLM에 의존하므로 예상치 못한 결과를 초래할 수 있는 비결정적 동작이 발생할 수 있습니다. 제안이나 피드백이 있으시면 이슈를 열어 논의해 주세요.

📝 기여하기

기여를 환영합니다! 변경하고 싶은 사항이 있으면 이슈를 열어 논의해 주세요. 👉 기여 가이드라인을 보려면 여기를 클릭하세요

📞 지원

지원이 필요하시면 다음을 이용해 주세요:

MCP 서버와 관련된 문제가 발생하면 GitHub 저장소에 이슈를 열어 주세요.
기타 문의 사항은 지원팀에 문의해 주세요.

🚀 더 많은 기능 출시 예정

흥미로운 업데이트를 기대해 주세요! 제안 사항이 있으신가요? 이슈를 열어 논의해 주세요.

BrowserStack MCP Server

문서

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

♿ 접근성

🤖 BrowserStack AI 에이전트

🚀 원격 MCP 서버

주요 이점:

제한 사항:

설치 단계:

원격 MCP 설정을 위한 대체 방법

🤝 권장 MCP 클라이언트

⚠️ 중요 참고 사항

📝 기여하기

📞 지원

🚀 더 많은 기능 출시 예정

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

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

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