browser-skill은(는) 무엇을 하나요?
코딩 에이전트에서 실제 브라우저를 제어합니다: 지속적인 Playwright 데몬 위의 CLI와 간결한 클릭 가능 페이지 스냅샷을 제공합니다.
이 스킬은 playwright를 사용하여 헤드리스 또는 헤드풀 브라우저 인스턴스를 관리합니다. 백그라운드 데몬이 브라우저를 유지하므로, 각 명령어 실행 사이에 상태(쿠키, 로그인 세션, DOM 상태)가 보존됩니다.
설치
npm install -g @anthropic-ai/claude-code
# 또는
npx @anthropic-ai/claude-code
사용법
다음 명령어를 코딩 에이전트의 컨텍스트 내에서 실행하세요.
페이지 열기
browser open <url>
예시:
browser open https://example.com
현재 페이지 스냅샷 보기
browser snapshot
이 명령어는 페이지의 축소된 텍스트 표현을 반환하며, 상호작용 가능한 요소(링크, 버튼, 입력 필드)가 강조 표시됩니다.
요소 클릭하기
browser click <selector>
<selector>는 CSS 선택자입니다.
예시:
browser click "#submit-button"
browser click "a[href='/login']"
텍스트 입력하기
browser type <selector> "<text>"
예시:
browser type "#search-input" "playwright browser automation"
browser type "input[name='email']" "[email protected]"
페이지 정보 가져오기
browser info
현재 URL, 페이지 제목, 사용 가능한 메타데이터를 반환합니다.
브라우저 닫기
browser close
환경 변수
| 변수 | 설명 | 기본값 |
|---|---|---|
BROWSER_HEADLESS | 헤드리스 모드로 실행 | true |
BROWSER_VIEWPORT_WIDTH | 뷰포트 너비 (픽셀) | 1280 |
BROWSER_VIEWPORT_HEIGHT | 뷰포트 높이 (픽셀) | 720 |
BROWSER_TIMEOUT | 작업 제한 시간 (밀리초) | 30000 |
지원 플랫폼
- Claude Code
- Cursor
- Codex CLI
- 기타 Playwright와 호환되는 에이전트
주의사항
- 이 스킬은 시스템에 Playwright가 설치되어 있어야 합니다 (
npx playwright install chromium). - 브라우저 데몬은 명시적으로
browser close가 호출되거나 에이전트 세션이 종료될 때까지 실행됩니다. - 클릭 가능한 스냅샷은 완전한 페이지 렌더링이 아닌 DOM 기반 요약입니다. 정확한 시각적 렌더링이 필요한 경우
browser screenshot을 사용하세요 (별도로 제공되는 경우).