화면 픽셀만 보는 브라우저 에이전트는 버튼 이름과 폼 구조를 일관되게 식별하기 어렵다. Playwright MCP는 Microsoft Playwright의 브라우저 자동화 기능을 MCP 도구로 노출하고, 접근성 트리(accessibility tree) 기반 스냅샷을 모델에 전달한다. 이에 따라 에이전트는 라벨과 역할이 있는 요소를 기준으로 탐색·클릭·입력·검증을 수행할 수 있다.
핵심 특징
| 기능 | 활용 |
|---|---|
| 접근성 스냅샷 | DOM 좌표보다 의미 있는 요소 참조로 상호작용 |
| 탐색·입력·클릭 | 폼 플로와 사용자 여정 테스트 |
| 스크린샷·탭·다이얼로그 | 시각 검토와 다중 페이지 작업 |
| 네트워크 검사·모킹 | 오류 상태와 API 응답 시뮬레이션 |
| 브라우저 상태 관리 | 격리된 테스트 로그인 세션 활용 |
Cowork와의 차이
Playwright MCP는 브라우저를 조작하는 도구 서버다. claude-cowork처럼 파일, 데스크톱 앱, 예약 작업과 장기 워크스페이스 전체를 제공하는 제품은 아니다. 반대로 스테이징 웹앱 QA, 접근성 확인, UI 디버깅처럼 브라우저 실행 범위가 명확한 작업에서는 세밀한 제어와 재현 가능한 도구 호출이 장점이다.
안전하게 쓰는 기준
- 프로덕션 계정 대신 테스트 계정과 격리 프로필을 사용한다.
- 결제, 삭제, 발행처럼 상태를 크게 바꾸는 액션은 실행 전 승인 지점을 둔다.
- 허용 도메인과 차단 도메인을 설정하고 실행 로그를 보존한다.
- 임의 JavaScript 실행 도구는 신뢰한 클라이언트와 격리 환경에서만 활성화한다.
누구에게 적합한가
- AI 에이전트로 스테이징 UI 스모크 테스트를 반복하려는 프론트엔드·QA 팀
- 제품 페이지 비교나 구조화된 데이터 추출을 자동화하는 리서치 팀
- MCP 기반 브라우저 도구를 자체 에이전트 하네스에 연결하려는 개발자
관련 문서
- playwright-mcp-tutorial-claude-desktop — Claude Desktop에 연결해 TodoMVC로 검증하는 단계별 구성법
- mcp — 외부 도구를 에이전트에 연결하는 프로토콜
- claude-cowork — 파일과 업무 워크플로까지 다루는 Claude 작업 환경
- chrome-devtools-mcp — 브라우저 디버깅과 성능 분석에 초점을 둔 MCP 서버
참고 자료
- Build a Claude Cowork-Like Browser Agent Using Playwright MCP and Claude Desktop — Analytics Vidhya (2026-05-24)
- microsoft/playwright-mcp — GitHub 공식 저장소