웹앱 테스팅 (Playwright)

무엇을 해주나

Claude Code가 로컬에서 돌아가는 웹 애플리케이션을 실제 브라우저(Chromium, headless)로 열어 테스트하도록 만드는 공식 Anthropic 스킬입니다.

• 네이티브 Playwright 스크립트 작성: 상황에 맞는 Python 자동화 코드를 직접 생성합니다.
• 서버 자동 관리: 번들된 scripts/with_server.py가 개발 서버(프론트+백엔드 동시)를 띄우고 포트가 준비될 때까지 대기한 뒤 스크립트를 실행하고 종료까지 정리합니다.
• 정찰 후 실행(Reconnaissance-then-Action): networkidle 대기 → 스크린샷/DOM 검사 → 셀렉터 발견 → 액션 수행 순서를 강제해 동적 SPA에서 흔한 "요소를 못 찾음" 오류를 줄입니다.
• 디버깅 자료 수집: 전체 페이지 스크린샷, 콘솔 로그 캡처, 버튼·링크·입력 요소 탐색 예시 제공.

이런 분께 추천

• React/Vue/Svelte 등 개발 서버를 띄워 UI 동작을 자동으로 확인받고 싶은 프론트엔드 개발자
• "코드는 고쳤는데 실제로 화면에서 되는지" Claude가 직접 확인해 주길 원하는 풀스택 개발자
• E2E 테스트 초안이나 회귀 확인용 스크립트를 빠르게 만들고 싶은 팀
• 정적 HTML 프로토타입을 file:// URL로 검증하려는 사람

활용 예시

1. 로그인 플로우 검증: "npm run dev(5173)를 띄우고 로그인 폼에 테스트 계정을 입력한 뒤 대시보드가 뜨는지 스크린샷으로 확인해줘" → with_server.py로 서버 실행, 폼 채우기, /tmp에 결과 이미지 저장.
2. 콘솔 에러 추적: "페이지 진입 시 콘솔에 빨간 에러가 찍히는데 원인을 찾아줘" → console 리스너를 붙인 스크립트로 로그를 수집해 원인 파일을 지목.
3. 백엔드+프론트 동시 테스트: 백엔드(3000)와 프론트(5173)를 한 번에 기동해 API 응답이 화면에 반영되는지 end-to-end로 확인.

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