클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

BrowserStack 크로스브라우저 테스트

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

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

무엇을 해주나

  • playwright.config.ts에 BrowserStack 연결 설정(Chrome/Firefox/WebKit 프로젝트)을 추가해줍니다.
  • 자격 증명(BROWSERSTACK_USERNAME, BROWSERSTACK_ACCESS_KEY) 유무를 확인하고 없으면 발급 방법을 안내한 뒤 중단합니다.
  • MCP 도구로 빌드·세션 목록, 영상/로그 링크, 브라우저 매트릭스를 조회해 표로 요약합니다.
  • localhost·사내 스테이징 테스트를 위한 BrowserStack Local 터널 설정까지 안내합니다.

이런 분께 추천

  • Playwright로 E2E 테스트를 운영하며 Safari·Firefox 등 실제 브라우저 검증이 필요한 프론트엔드/QA 엔지니어
  • 이미 BrowserStack 계정을 보유한 팀
  • CI에서 크로스브라우저 매트릭스를 돌리고 싶은 개발자

활용 예시

  1. "browserstack setup 해줘" → config에 클라우드 프로젝트 3종이 추가되고 test:e2e:cloud npm 스크립트가 생성됩니다.
  2. "사파리에서 테스트 돌려봐" → WebKit/macOS 프로젝트로 테스트를 실행하고 브라우저별 통과/실패를 보고합니다.
  3. "최근 빌드 결과 보여줘" → 최신 빌드의 세션별 상태·소요시간·영상 URL을 표로 정리합니다.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/alirezarezvani/claude-skills/HEAD/.gemini/skills/browserstack/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

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 && mkdir -p ~/.claude/skills/browserstack && cp -r claude-skills/.gemini/skills/browserstack/* ~/.claude/skills/browserstack/

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

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