클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

BrowserStack 크로스브라우저 테스트

Playwright 테스트를 BrowserStack 클라우드 그리드에서 실행하고 결과를 정리해주는 스킬입니다.

개발·코딩중급★ 24,151⑂ 3,405AI 점수 7/10마지막 업데이트: 2026. 8. 9.

무엇을 해주나

  • playwright.config.ts에 BrowserStack 연결 설정(Chrome/Firefox/WebKit 프로젝트)을 자동으로 추가합니다.
  • BROWSERSTACK_USERNAME, BROWSERSTACK_ACCESS_KEY 환경변수를 확인한 뒤 클라우드 그리드에서 테스트를 실행합니다.
  • MCP 도구(browserstack_get_builds, browserstack_get_sessions 등)로 빌드/세션 결과, 영상·로그 링크를 표로 정리합니다.
  • localhost나 방화벽 뒤 스테이징을 테스트하기 위한 BrowserStack Local 터널 설정도 안내합니다.

이런 분께 추천

  • Playwright E2E 테스트를 이미 쓰고 있고 Safari/Firefox 등 실제 브라우저 검증이 필요한 팀
  • 로컬에 없는 OS·브라우저 조합에서 회귀 테스트를 돌려야 하는 QA 엔지니어
  • CI에서 브라우저 매트릭스 결과를 한눈에 요약받고 싶은 개발자

활용 예시

  1. "browserstack 셋업해줘" → 기존 설정을 읽고 클라우드 프로젝트 3종과 test:e2e:cloud npm 스크립트를 추가.
  2. "크로스브라우저로 테스트 돌려줘" → Chrome/Firefox 프로젝트로 실행 후 브라우저별 통과·실패 표 제공.
  3. "최근 빌드 결과 보여줘" → 최신 빌드의 세션별 상태·소요시간·영상 URL을 요약.

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 alirezarezvani/claude-skills 의 .gemini/skills/browserstack 폴더를 내 ~/.claude/skills/browserstack/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/alirezarezvani/claude-skills.git /tmp/claude-skills && mkdir -p ~/.claude/skills/browserstack && cp -r /tmp/claude-skills/.gemini/skills/browserstack/* ~/.claude/skills/browserstack/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 열고 저장소를 내려받습니다: git clone https://github.com/alirezarezvani/claude-skills.git
  2. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills/browserstack
  3. 파일을 복사합니다: cp -r claude-skills/.gemini/skills/browserstack/* ~/.claude/skills/browserstack/
  4. BrowserStack 계정 설정 페이지에서 사용자명과 액세스 키를 발급받습니다.
  5. 셸 설정 파일(~/.zshrc 등)에 export BROWSERSTACK_USERNAME=..., export BROWSERSTACK_ACCESS_KEY=...를 추가하고 터미널을 다시 엽니다.
  6. 빌드/세션 조회 기능을 쓰려면 BrowserStack MCP 서버를 Claude Code에 등록합니다.
  7. Claude Code를 재시작하고 "browserstack으로 크로스브라우저 테스트 실행"이라고 요청해 확인합니다.
GitHub에서 원본 보기 ↗라이선스: MIT