스킬

webapp-testing: Playwright로 로컬 Web 앱을 테스트한다

Python Playwright로 로컬 프론트를 확인할 때 사용한다. 먼저 helper에 --help를 돌리고, chromium은 headless로 시작하며, 동적 페이지는 networkidle을 기다린 뒤에 DOM을 본다.

Official source · webapp-testing

Install

scripts/with_server.py --help

누구에게 맞나

Playwright로 로컬 Web 앱과 상호작용하며 테스트할 때 webapp-testing을 사용한다. 프론트 기능 확인, 화면 동작 디버그, 브라우저 스크린샷, 브라우저 로그 보기를 지원한다. 대상은 로컬 앱이며, 이름이 없는 원격 사이트 스캔이 아니다.

더 잘 맞는 전제는 네이티브 Python Playwright 스크립트를 쓰고, 보조 스크립트로 서버 수명 주기를 관리할 준비가 된 것이다. 자료에는 에이전트 제품 목록이나 설치 프로그램이 없으니 저장소 경로를 지어내지 마라. 공식 설명 페이지는

https://raw.githubusercontent.com/anthropics/skills/main/skills/webapp-testing/SKILL.md

3분 만에 첫 시도 끝내기

권장하는 첫 경로는 브라우저를 열기 전에 보조 스크립트 사용법을 보는 것이다. 자료는 서버 수명 주기 관리(다중 서버 지원)를 scripts/with_server.py에 맡긴다고 지목하며 다음을 요구한다: Always run scripts with --help first.

전제: 현재 환경에서 그 helper를 실행할 수 있다. 낮은 위험의 첫 시도:

scripts/with_server.py --help

성공 신호: 사용법이 출력되고 서버는 아직 뜨지 않았다. 읽기 전용 도움말이다. helper 소스를 먼저 읽어 인자를 추측하지 마라. 요약은 먼저 --help이지, 먼저 소스를 읽는 것이 아니다.

도움말을 이해할 수 있고 로컬 앱을 테스트한다고 확인한 뒤에 Playwright 스크립트를 쓴다. 반드시 sync_playwright를 쓰고 chromium을 headless로 시작한다: browser = p.chromium.launch(headless=True). 서버를 켜고 페이지를 열면 환경이 바뀌고 로그가 쓰일 수 있다. 실행 전에 대상이 자신의 로컬 앱인지 확인한다. 요약은 helper가 뜬 뒤 localhost를 향해 테스트하라고 하지만, 발췌에 포트 번호가 없으니 주소를 지어내지 마라.

사용 사례

사례 1: helper로 로컬 서버를 데리고 읽기 전용으로 한 번 본다. 먼저 --help. 인자를 확인한 뒤에 scripts/with_server.py를 호출한다. 스크립트에서는 sync_playwright로 headless chromium을 연다. 완료 기준은 브라우저가 헤드리스로 시작했고 페이지에 파괴적 조작을 아직 하지 않은 것이다. 자료는 스크린샷과 로그 보기를 지원하며 이 둘은 비교적 되돌릴 수 있다. 파일을 쓰기 전에 스크린샷 저장 경로를 확인한다.

사례 2: 동적 앱은 「먼저 정찰한 다음 조작」. 순서는: 이동하고 networkidle을 기다린다; 스크린샷을 찍거나 DOM을 검사한다; 렌더 결과에서 선택자를 식별한다; 발견한 선택자로 조작한다. 자료는 동적 앱에서 networkidle 전에 DOM을 검사하지 말라고 명시한다. 올바른 방법은 page.wait_for_load_state('networkidle')를 기다린 다음 검사하는 것이다. 완료 기준은 대기가 검사보다 앞이라고 가리킬 수 있는 것이다. 네트워크가 한가해지기 전에 확인되지 않은 선택자를 클릭하지 마라.

사용 경계

로컬 Web 앱의 Playwright 테스트만 다룬다. chromium은 항상 headless다. helper는 먼저 --help. 동적 앱은 먼저 networkidle 다음에 DOM.

설치 프로그램, 저장소 경로, 쓰이지 않은 localhost 포트를 지어내지 마라. 자료에는 클라이언트 목록이 없고 비로컬 사이트에서 쓰는 방법도 없다. 여기에 적힌 helper, 헤드리스 시작, 정찰 순서 밖은 이 설명이 다루지 않는다.