Menu
웹 페이지 구조 분석 및 E2E 테스트. HTML/XPath 구조 파악, 스크린샷, 브라우저 자동화. Playwright 기반 스크립트 제공. 웹 컴포넌트 테스트, 웹 스크래핑, DOM 구조 분석 시 사용.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | web-test |
| description | 웹 페이지 구조 분석 및 E2E 테스트. HTML/XPath 구조 파악, 스크린샷, 브라우저 자동화. Playwright 기반 스크립트 제공. 웹 컴포넌트 테스트, 웹 스크래핑, DOM 구조 분석 시 사용. |
| version | 1.0.0 |
Playwright 기반 웹 테스트 스크립트
# Playwright 설치 (최초 1회)
pip install playwright
playwright install chromium
| 스크립트 | 용도 |
|---|---|
| get-page-html.py | 페이지 전체 HTML 가져오기 |
| get-dom-structure.py | DOM 구조 트리 출력 |
| find-elements.py | CSS/XPath로 요소 찾기 |
| take-screenshot.py | 페이지 스크린샷 |
| fill-form.py | 폼 자동 입력 |
python ~/llms/skills/web-test/scripts/get-page-html.py "https://example.com"
python ~/llms/skills/web-test/scripts/get-dom-structure.py "https://example.com" --depth 3
# CSS selector
python ~/llms/skills/web-test/scripts/find-elements.py "https://example.com" --css "button.submit"
# XPath
python ~/llms/skills/web-test/scripts/find-elements.py "https://example.com" --xpath "//button[@type='submit']"
python ~/llms/skills/web-test/scripts/take-screenshot.py "https://example.com" -o screenshot.png
python ~/llms/skills/web-test/scripts/fill-form.py "https://example.com/login" \
--field "input[name=email]" "test@example.com" \
--field "input[name=password]" "password123" \
--submit "button[type=submit]"
모든 스크립트 공통:
--headless / --no-headless: 헤드리스 모드 (기본: headless)--timeout <ms>: 타임아웃 (기본: 30000)--wait <selector>: 특정 요소 대기 후 실행-h, --help: 도움말사용자가 자동화하려는 작업을 Skill, Command, MCP, Subagent 중 적절한 도구로 분류하고 추천. 사용자가 "X 자동화 만들고 싶어", "이런 작업 자동화해줘", "도구 뭐 써야해?", "skill로 만들까 command로 만들까?" 같은 질문을 할 때 사용.
코드 작성/수정, 리팩토링 시 자동 활성화. Robert C. Martin Clean Code 원칙(명명, 함수 크기, 주석, 포맷팅, DRY, SRP) 검증 및 제안. 함수 20줄 초과, 인자 3개 초과, 중복 코드, 불명확한 변수명, 과도한 주석 발견 시 가독성 개선 방향 제시.
코드 작성/수정, 리팩토링, TODO 작성 시 자동 활성화. 복잡도 증가, 조건문 남발, 중복 코드 발견 시 적절한 디자인 패턴 제안. OO 설계 원칙(개방-폐쇄, 단일책임, 의존성역전) 위반 감지하고 Strategy, Observer, Decorator, Factory 등으로 리팩토링 방향 제시. 긴 if-else, switch문, 상속 남용, 새 기능 추가 시 기존 코드 수정 필요 등 code smell 발견 시 사용.
git bisect로 특정 코드가 추가/제거된 commit을 자동으로 찾기. file content 변경 시점, function 추가/제거, feature 도입 시점을 찾을 때 사용. binary search로 자동 검색하며 manual good/bad marking 불필요.
i18n 키 누락/미사용 자동 검증 skill. 코드에서 사용하는 키와 JSON 정의 간 불일치를 스크립트로 자동 감지. TypeScript 타입 안정성 확보, pre-push 훅 자동화 지원. Next.js (next-intl), React (react-i18next) 프로젝트에서 i18n 작업 시 자동 트리거.
GitLab/GitHub issue 정보를 glab/gh CLI로 가져오기. issue description, comments, 관련 MR/PR (description, comments, branch names), linked issues, parent epic 정보를 JSON 또는 markdown 형식으로 출력. issue 상세 정보가 필요할 때 사용.