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

Playwright 브라우저 자동화 스킬

Claude가 Playwright 코드를 직접 작성·실행해 웹사이트 테스트, 스크린샷, 로그인·폼 자동화를 처리해 주는 스킬.

개발·코딩중급★ 3,004⑂ 227AI 점수 9/10마지막 업데이트: 2025. 12. 19.

무엇을 해주나

  • 실행 중인 개발 서버(포트)를 자동으로 탐지해 URL을 하드코딩하지 않고 테스트를 시작합니다.
  • 요청한 작업에 맞춘 Playwright 스크립트를 /tmp/playwright-test-*.js에 작성하고 run.js 래퍼로 실행합니다. 프로젝트 폴더가 지저분해지지 않습니다.
  • 기본적으로 브라우저 창을 띄운(headless: false) 상태로 실행해 무슨 일이 일어나는지 눈으로 확인할 수 있습니다.
  • 스크린샷(전체 페이지), 반응형 뷰포트 검증, 로그인 플로우, 폼 입력·제출, 깨진 링크 점검 등 자주 쓰는 패턴을 예시 코드로 제공합니다.
  • lib/helpers.js의 보조 함수(안전 클릭, 쿠키 배너 처리, 표 데이터 추출, 타임스탬프 스크린샷)와 커스텀 HTTP 헤더 주입(PW_HEADER_NAME, PW_EXTRA_HEADERS)을 지원합니다.
  • 고급 주제(네트워크 목킹, 세션 유지, 시각적 회귀, 모바일 에뮬레이션)는 API_REFERENCE.md로 분리되어 필요할 때만 읽힙니다.

이런 분께 추천

  • 로컬에서 프론트엔드를 개발하며 배포 전 UI를 빠르게 눈으로 확인하고 싶은 개발자
  • E2E 테스트 코드를 매번 처음부터 쓰기 귀찮은 분
  • 반응형 레이아웃, 로그인 흐름, 링크 상태를 반복 점검해야 하는 QA·1인 개발자

활용 예시

  1. "마케팅 페이지가 잘 보이는지 확인해줘" → 개발 서버 자동 탐지 후 데스크톱/태블릿/모바일 3개 뷰포트 스크린샷을 /tmp에 저장하고 결과 요약.
  2. "로그인 후 대시보드로 리다이렉트되는지 테스트해줘" → 이메일·비밀번호 입력, 제출, waitForURL('**/dashboard')로 리다이렉트 검증.
  3. "이 페이지의 외부 링크 중 깨진 게 있나?" → 모든 a[href^=http]를 수집해 HEAD 요청으로 상태 코드를 확인하고 깨진 링크 목록 출력.

· · · 설치 가이드 · · ·

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

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

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

직접 명령으로 설치하기

git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill && cp -r /tmp/playwright-skill/skills/playwright-skill ~/.claude/skills/ && cd ~/.claude/skills/playwright-skill && npm run setup

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

  1. Node.js(18 이상 권장)가 설치되어 있는지 node -v로 확인합니다.
  2. 저장소를 클론합니다: git clone https://github.com/lackeyjb/playwright-skill.git
  3. 스킬 폴더를 Claude 스킬 디렉터리로 복사합니다: mkdir -p ~/.claude/skills && cp -r playwright-skill/skills/playwright-skill ~/.claude/skills/
  4. 처음 한 번만 브라우저를 설치합니다: cd ~/.claude/skills/playwright-skill && npm run setup (Playwright + Chromium 다운로드로 몇 분 걸릴 수 있습니다).
  5. Claude Code를 재시작하고 "localhost 페이지 스크린샷 찍어줘"처럼 말해 스킬이 로드되는지 확인합니다.
  6. 오류가 나면 npm run setup을 다시 실행하고, 브라우저 창이 열리지 않으면 화면(디스플레이) 사용이 가능한 환경인지 점검하세요.
GitHub에서 원본 보기 ↗라이선스: MIT