Playwright MCP는 LLM이 스크린샷 없이 접근성 트리 기반으로 웹 브라우저를 제어할 수 있게 해주는 Microsoft의 공식 MCP 서버입니다.
LLM이 브라우저를 제어하는 기존 방식은 스크린샷을 캡처해 비전 모델로 분석하는 것이었습니다. 픽셀 기반이므로 정확도가 낮고, 이미지 전체를 컨텍스트에 포함해야 해서 토큰 소비가 큽니다. 레이아웃이 조금만 바뀌어도 좌표가 어긋납니다.
Playwright MCP는 DOM 대신 접근성 트리를 사용합니다. 버튼, 링크, 입력 필드 같은 상호작용 요소가 텍스트 구조로 전달됩니다. LLM은 이미지 없이 텍스트만으로 페이지 구조를 파악하고 정확하게 동작을 수행합니다.
[role=button, name="로그인", enabled=true]
[role=textbox, name="이메일", value=""]
[role=textbox, name="비밀번호", value=""]
이런 방식으로 페이지 구조가 전달됩니다. 스크린샷보다 훨씬 적은 토큰으로 더 정확한 제어가 가능합니다.
claude mcp add playwright npx @playwright/mcp@latest
| 도구 | 역할 |
|---|---|
| browser_navigate | URL 이동 |
| browser_click | 요소 클릭 |
| browser_type | 텍스트 입력 |
| browser_snapshot | 접근성 트리 스냅샷 조회 |
| browser_screenshot | 화면 캡처 |
| browser_network_mock | 네트워크 요청 모킹 |
| browser_pdf_save | PDF로 저장 |
기본 접근성 트리 모드 외에, 좌표 기반 마우스 조작이 필요한 경우 Vision 모드를 선택적으로 활성화할 수 있습니다. 캔버스 조작이나 접근성 속성이 없는 커스텀 UI 컴포넌트에 유용합니다.
자연어로 테스트 시나리오를 작성하면 LLM이 Playwright 코드로 변환하여 실행합니다.
로그인이 필요하거나 JavaScript로 동적 렌더링되는 페이지에서 데이터를 추출합니다.
폼 입력, 데이터 조회, 보고서 다운로드 같은 반복 작업을 에이전트가 수행합니다.
Chromium, Firefox, WebKit을 지원합니다. Claude Code, Claude Desktop, VS Code(Cline), Cursor, GitHub Copilot 등 대부분의 MCP 호환 클라이언트에서 동작합니다. Docker 컨테이너로도 배포 가능하여 CI 환경에서도 사용할 수 있습니다.