🎭
Playwright
브라우저 자동화 브라우저 및 자동화설치 명령어
npx clawhub@latest install playwright
설치 안내
1
환경 확인
Node.js 22 이상과 OpenClaw가 설치되어 있는지 확인하세요. 터미널에서 openclaw --version을 실행하여 확인할 수 있습니다.
2
설치 실행
위의 설치 명령어를 터미널에서 실행하세요. ClawHub가 자동으로 Playwright을(를) ~/.openclaw/skills/ 디렉토리에 다운로드하고 설치합니다.
3
설치 확인
openclaw skills list를 실행하여 설치된 스킬 목록을 확인하고, Playwright이(가) 목록에 표시되는지 확인하세요.
4
매개변수 설정 (선택사항)
아래 소개의 설정 안내에 따라 ~/.config/openclaw/openclaw.json5에 스킬 설정 항목을 추가하세요.
수동 설치 방법: Skill 폴더를
~/.openclaw/skills/ 또는 프로젝트의 skills/ 디렉토리에 복사하세요. 폴더에 SKILL.md 파일이 포함되어 있어야 합니다.
접근성 스냅샷 기반 페이지 이해
크로스 브라우저 자동화 테스트
폼 상호작용 및 내비게이션 조작
상세 소개
Playwright MCP 서버는 Microsoft가 공식 출시한 브라우저 자동화 솔루션으로, 스크린샷 대신 접근성 스냅샷(Accessibility Snapshot)을 사용하여 페이지 구조를 이해하는 것이 특징이며, AI가 페이지 요소를 정확하게 조작할 수 있게 합니다.
핵심 기능
- 페이지 내비게이션(browser_navigate): 지정된 URL로 이동하며 페이지 로드 완료를 자동 대기
- 접근성 스냅샷(browser_snapshot): 페이지의 접근성 트리 구조를 가져오며, 모든 상호작용 가능한 요소와 ref 식별자를 포함, AI가 시각 인식이 아닌 텍스트 이해로 페이지를 파악
- 요소 상호작용: 클릭(browser_click), 폼 입력(browser_type), 드롭다운 선택(browser_select_option), 호버(browser_hover) 등 조작 지원
- 탭 관리: 멀티 탭 관리 지원, 탭 생성, 전환, 닫기
- JavaScript 실행: 페이지 컨텍스트에서 사용자 정의 JavaScript 코드 실행
설정 방법
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@anthropic/playwright-mcp"]
// 선택 파라미터: --browser chromium/firefox/webkit
}
}
}
사용 시나리오
- E2E 테스트: 웹 애플리케이션의 기능 테스트 프로세스 자동화
- 데이터 입력: 자동 로그인 및 폼 작성, 데이터 제출
- 웹 조작 에이전트: AI가 사용자를 대신하여 복잡한 웹 작업 수행
- 페이지 콘텐츠 추출: 페이지로 이동하여 구조화된 데이터 추출