Playwright MCP
접근성 트리로 브라우저를 다루는 MCP 서버
npx @playwright/mcp@latestPlaywright 팀이 만든 브라우저 자동화 MCP 서버입니다. 스크린샷을 모델에 넘기는 대신 접근성 트리를 구조화된 텍스트로 전달해, 시각 모델 없이도 요소를 정확히 지목합니다. 설정 파일 없이 npx 한 줄로 붙습니다.
판단
이럴 때 씁니다
- 에이전트에게 웹 페이지를 조작하게 하되 스크린샷 판독에 기대고 싶지 않을 때
- 로그인 흐름이나 폼 입력처럼 여러 단계를 거치는 시나리오를 재현해야 할 때
- 사람이 수동으로 한 조작을 기록해 Playwright 테스트 코드로 만들고 싶을 때
- 이미 Playwright 를 쓰는 팀이 같은 셀렉터 감각을 에이전트에 그대로 옮기고 싶을 때
이럴 땐 쓰지 마세요
- 성능 트레이스나 힙 스냅샷처럼 DevTools 고유 데이터가 필요할 때
- 크롬 프로필과 확장에 붙은 실제 세션 그대로 작업해야 할 때
- 브라우저를 띄울 수 없는 제한된 실행 환경일 때
차별점
- 스크린샷 대신 접근성 트리를 넘겨 시각 모델 없이도 요소를 정확히 지목합니다.
- Playwright 본체와 같은 저장소 흐름에서 관리돼 브라우저 대응이 빠릅니다.
- 수동 조작을 기록해 Playwright 코드로 내보내는 경로가 있습니다.
- 설정 파일 없이 npx 한 줄로 대부분의 MCP 클라이언트에 붙습니다.
워크플로
- 01MCP 클라이언트 설정에 npx @playwright/mcp@latest 를 명령으로 등록합니다.
- 02에이전트가 browser_navigate 로 페이지를 열면 접근성 트리가 구조화된 텍스트로 돌아옵니다.
- 03트리에 붙은 참조로 요소를 지목해 클릭과 입력을 지시합니다. 좌표를 추측할 필요가 없습니다.
- 04필요하면 --caps=devtools 로 기록 도구를 켜서 수동 조작을 코드로 남깁니다.
주요 명령
| 명령 | 설명 |
|---|---|
npx @playwright/mcp@latest | MCP 서버를 실행합니다. 클라이언트 설정의 command 로 넣습니다. |
npx @playwright/mcp@latest --port 8931 | HTTP 포트로 띄워 여러 클라이언트가 붙게 합니다. |
npx @playwright/mcp@latest --config path/to/config.json | 브라우저 채널과 격리 설정을 파일로 넘깁니다. |
npx @playwright/mcp@latest --caps=devtools | 수동 조작 기록 등 추가 도구를 켭니다. |
함정
설치 전에 확인하세요
- 버전이 0.0.x 대입니다. 도구 이름과 플래그가 바뀔 수 있으니 팀에서 쓸 때는 태그를 고정하는 편이 안전합니다.
- 접근성 트리를 쓰므로 접근성 속성이 부실한 페이지에서는 요소 지목이 어려울 수 있습니다.
- 브라우저 바이너리가 필요합니다. 컨테이너에서 쓰려면 별도 이미지나 설치 단계를 준비해야 합니다.
비교
Chrome DevTools MCP 가 성능 트레이스와 힙 스냅샷까지 여는 진단 도구라면, Playwright MCP 는 페이지 조작과 테스트 재현에 무게를 둡니다. 브라우저를 왜 여는지가 갈림길입니다. 무엇이 느린지 알아야 하면 전자가, 시나리오를 반복 실행해야 하면 후자가 맞습니다.
최근 변경
v0.0.80 에서 사용자가 직접 한 브라우저 조작을 기록하는 browser_start_recording 과 browser_stop_recording 을 추가했습니다. 기록 도구는 --caps=devtools 로 켜야 합니다. 스크린샷을 모델 한도에 맞춰 조용히 축소하던 동작을 없애 원본 바이트를 그대로 돌려주고, 공유 브라우저 컨텍스트에서 browser_close 뒤 후속 호출이 실패하던 문제를 고쳤습니다.