webapp-testing — Claude Code 스킬

웹 애플리케이션을 자동으로 테스트하는 Anthropic 공식 스킬. 브라우저 상호작용으로 동작을 검증한다.

webapp-testing은 Anthropic이 공식 제공하는 Claude Code 스킬로, 로컬에서 실행 중인 웹 애플리케이션을 실제 브라우저로 열어 동작을 자동 검증한다. 내부적으로 Playwright를 사용하며 Chromium을 헤드리스 모드로 띄워 페이지를 탐색한다. 핵심은 "정찰 후 행동(reconnaissance-then-action)" 패턴이다. 먼저 대상 URL로 이동해 네트워크가 잠잠해질 때까지(page.wait_for_load_state('networkidle')) 기다린 뒤, 스크린샷을 찍거나 렌더된 DOM을 들여다보고, 실제 페이지 상태에서 셀렉터를 발견한 다음 그 셀렉터로 클릭·입력 등 상호작용을 실행한다. 동적 SPA에서 JS가 다 실행되기 전에 요소를 만지지 않도록 로드 상태 대기를 강조한다.\n\n주요 기능은 다음과 같다. (1) 서버 라이프사이클 관리 — with_server.py 스크립트가 프런트엔드/백엔드 서버를 자동으로 띄우고 자동화 스크립트를 돌린 뒤 정리하며, 여러 서버 동시 구동도 지원한다. (2) DOM 검사 및 요소 탐색 — 살아있는 페이지에서 실제 셀렉터를 찾아 안정적으로 상호작용한다. (3) 브라우저 콘솔 로그 캡처 — 테스트 중 발생한 JS 에러·경고를 수집해 UI 디버깅에 활용한다. (4) 전체 페이지 스크린샷 — 시각적 회귀 확인이나 렌더 결과 점검에 쓴다.\n\n이런 검증을 사람이 매번 브라우저를 열어 클릭하며 확인하던 수고를, Claude Code가 코드 변경 직후 자동으로 대신하게 만든다. 프런트엔드 변경이 실제로 화면에 반영되는지, 폼·버튼·라우팅이 동작하는지, 콘솔 에러가 없는지를 빠르게 닫는 피드백 루프로 돌릴 수 있다. 프런트엔드·풀스택 개발자, E2E/스모크 테스트를 가볍게 자동화하고 싶은 팀, "이 변경이 진짜 동작하나"를 화면에서 확인해야 하는 상황에 적합하다. 의존성은 Playwright와 Python이며, 서버 종류에 따라 Node.js(프런트 프레임워크)나 Python(백엔드)이 추가로 필요할 수 있다. 정확한 스크립트 사용법과 최신 사양은 공식 SKILL.md 확인을 권장한다.

언제 쓰나

프런트엔드/풀스택 변경 후 "실제로 화면에서 동작하는지"를 자동 확인하고 싶을 때 적합하다. 폼 제출·버튼·라우팅 같은 UI 흐름 검증, 동적 SPA의 렌더 결과·DOM 점검, 콘솔 에러 수집, 스크린샷 기반 시각 확인, 가벼운 E2E·스모크 테스트 자동화에 쓴다. 단위 테스트만으로 잡히지 않는 통합 동작이나 "이 PR이 진짜 되나" 확인이 필요한 상황에 특히 유용하다.

설치

/plugin marketplace add anthropics/skills 후 /plugin install example-skills@anthropic-agent-skills

Anthropic 공식 example-skills 플러그인에 포함된 스킬로, 마켓플레이스 등록 후 플러그인 설치 방식으로 추가한다(명령은 별도 표시). 런타임 전제로 Python과 Playwright가 필요하며, Chromium 등 브라우저 바이너리는 Playwright의 브라우저 설치 단계가 선행돼야 한다. 테스트 대상이 프런트 프레임워크면 Node.js, 백엔드면 해당 런타임이 추가로 요구될 수 있다. 헤드리스 Chromium 실행이 가능한 환경(샌드박스·CI 포함)인지 확인하고, with_server.py로 서버를 기동하므로 대상 앱을 로컬에서 띄울 수 있어야 한다. 세부 사양은 공식 문서 확인 권장.

보안 주의

별도 API 키·비밀키는 요구하지 않는다(env 없음). 다만 실제 브라우저로 로컬 앱을 구동·조작하므로 주의가 필요하다. with_server.py가 개발 서버를 띄우고 종료시키며 페이지에서 클릭·입력을 자동 실행하므로, 로그인된 세션이나 운영 DB에 연결된 환경을 대상으로 삼으면 의도치 않은 데이터 변경·삭제가 발생할 수 있다 — 격리된 테스트/로컬 환경에서만 실행하라. 테스트 중 방문하는 페이지의 내용(DOM 텍스트·콘솔 로그)이 LLM 컨텍스트로 유입되므로, 신뢰할 수 없는 외부 콘텐츠를 렌더하면 프롬프트 인젝션 위험이 있다. 캡처한 스크린샷·로그에 민감정보가 담길 수 있으니 공유 전 점검하라.

자주 묻는 질문

어떤 브라우저 자동화 도구를 쓰나요?

Playwright를 사용하며 Chromium을 헤드리스 모드로 실행합니다. 스크립트는 sync_playwright() 동기 방식으로 페이지를 탐색합니다.

Selenium이나 Cypress 같은 별도 테스트 프레임워크가 필요한가요?

아니요. 이 스킬은 Playwright + Python 기반으로 동작합니다. 대상 앱 종류에 따라 Node.js나 백엔드 런타임이 추가로 필요할 수 있습니다.

운영 서버에 바로 써도 되나요?

권장하지 않습니다. 실제 클릭·입력을 자동 실행하므로 데이터 변경 위험이 있어 격리된 로컬·테스트 환경에서 쓰는 것이 안전합니다.