Playwright MCP
업데이트
Microsoft 공식 MCP 서버. 접근성 트리 기반으로 브라우저를 제어하여 스크린샷 없이도 정확한 웹 자동화를 수행.
/plugin install playwright Microsoft 공식 MCP 서버
왜 필요한가?
웹 자동화나 E2E 테스트를 위해 브라우저를 제어하려면 복잡한 셀렉터와 스크립트가 필요합니다. Playwright MCP는 접근성 트리(Accessibility Tree) 기반으로 동작하여, 스크린샷이나 비전 모델 없이도 정확하고 결정론적인 브라우저 제어를 제공합니다.
주요 기능
- 접근성 트리 기반 상호작용 — 픽셀이 아닌 DOM 구조를 기반으로 정확한 요소 탐색 및 조작
- 비전 모델 불필요 — 구조화된 데이터만 사용하므로 추가 모델 없이 빠르게 동작
- 결정론적 도구 — 스크린샷 기반의 모호성을 제거하고 일관된 결과 보장
- 브라우저 자동화 — 페이지 이동, 클릭, 폼 입력, 파일 업로드 등 웹 상호작용 자동화
- 코드 생성 — 수행한 작업을 Playwright 테스트 코드로 자동 변환
Before / After
Before: 셀렉터 작성 → 브라우저에서 확인 → 스크립트 수정 → 재실행 → 반복
After: “로그인 폼에 테스트 계정으로 로그인해줘” → 접근성 트리로 자동 요소 탐색 → 정확한 자동화 실행
실제 사용 시나리오
- 웹 앱의 사용자 시나리오를 자연어로 설명하면 자동으로 E2E 테스트 수행
- 폼 입력, 버튼 클릭, 페이지 이동 등을 자동화하여 QA 프로세스 가속화
- 수행한 브라우저 작업을 Playwright 테스트 코드로 변환하여 CI/CD에 통합
자주 묻는 질문
Playwright MCP는 무엇인가요?
Microsoft 공식 MCP 서버로, 접근성 트리(Accessibility Tree) 기반으로 동작해 스크린샷이나 비전 모델 없이도 정확하고 결정론적인 브라우저 제어를 제공합니다.
어떤 환경에서 동작하나요?
Claude Code, Claude Desktop, VS Code, Cursor에서 동작합니다.
어떻게 설치하나요?
Claude Code에서 `/plugin install playwright`로 설치합니다. claude-plugins-official 마켓플레이스에 포함되어 있습니다.
스크린샷 기반 도구와 무엇이 다른가요?
픽셀이 아닌 DOM의 접근성 트리를 기반으로 요소를 탐색·조작하므로, 비전 모델 없이도 빠르고 결정론적으로 동작합니다. 스크린샷 기반의 모호성을 제거해 일관된 결과를 보장합니다.
주요 기능은 무엇인가요?
접근성 트리 기반 요소 상호작용, 페이지 이동·클릭·폼 입력·파일 업로드 등 브라우저 자동화, 수행한 작업을 Playwright 테스트 코드로 자동 변환을 지원합니다.