메뉴
웹 페이지 구조 분석 및 E2E 테스트. HTML/XPath 구조 파악, 스크린샷, 브라우저 자동화. Playwright 기반 스크립트 제공. 웹 컴포넌트 테스트, 웹 스크래핑, DOM 구조 분석 시 사용.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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 상세 정보가 필요할 때 사용.