Microsoft Playwright MCP 소개…접근성 트리로 브라우저 E2E를 AI 에이전트에 연결

Microsoft Playwright MCP(npm: @playwright/mcp)는 Playwright를 Model Context Protocol로 노출해, AI 에이전트가 스크린샷 비전 모델 대신 접근성(accessibility) 트리로 브라우저를 조작하게 합니다. 페이지 이동·클릭·입력 같은 E2E 동작을 구조화된 스냅샷 위에서 결정하므로, 프론트엔드 검증·탐색적 테스트를 채팅 에이전트에 연결하기 좋습니다.

핵심 특징

• 가벼움: 픽셀 기반이 아니라 접근성 트리 사용
• LLM 친화적: 비전 모델 없이도 요소를 식별
• 결정적 도구 호출: 스크린샷 좌표 클릭보다 모호성이 적음
• 요구사항: Node.js 18+(문서에 따라 18 또는 20+), Cursor·VS Code·Claude Desktop 등 MCP 클라이언트

MCP vs Playwright CLI

공식 README는 코딩 에이전트에 대해 토큰 효율이 좋은 Playwright CLI + SKILLS도 권합니다. MCP는 브라우저 상태를 길게 유지하며 반복 추론하는 탐색·자가치유 테스트·장시간 에이전트 루프에 유리하고, CLI는 대용량 코드베이스와 함께 쓸 때 스키마·트리 비용이 덜한 편입니다. 용도에 따라 고르세요.

설치

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Cursor·Claude Code 등에도 동일 패턴입니다. Claude Code 예: claude mcp add playwright npx @playwright/mcp@latest. 첫 실행 시 브라우저 바이너리가 필요할 수 있어, 안 되면 npx playwright install을 병행하세요.

에이전트에 맡기기 좋은 사용 예

• 로컬/스테이징 URL 열고 로그인 폼 채우기·제출 결과 확인
• 신규 PR의 UI 회귀: 핵심 네비게이션·버튼 활성·에러 토스트 존재 여부
• 접근성 라벨이 없는 버튼을 스냅샷에서 찾아 개발 이슈로 기록
• 서류 작업형 플로우(다단계 폼) 스모크

실무 팁

• 프로덕션 계정·결제 정보는 에이전트에 주지 말고 스테이징·테스트 더블을 사용
• 헤드리스 CI와 로컬 headed를 구분해 디버깅
• 스냅샷이 길면 “현재 화면의 primary CTA만”처럼 범위를 좁히라고 지시
• 보안상 임의 파일 다운로드·확장 프로그램 설치는 허용 목록 밖으로

프론트엔드 검증 시나리오 예시

1. 에이전트에게 스테이징 URL을 주고 로그인(테스트 계정)
2. 핵심 IA: 홈 → 상품 목록 → 상세 → 장바구니 진입
3. 접근성 스냅샷에서 버튼 name/role이 비어 있으면 이슈로 기록
4. 폼 검증 메시지·로딩 스피너·에러 토스트 노출 여부 확인
5. 결과를 PR 코멘트 초안으로 정리해 달라고 요청

이 흐름은 QA가 없는 소규모 팀에서 “머지 전 5분 스모크”로 쓰기 좋습니다. 결제·개인정보 화면은 목(mock) 환경을 쓰세요.

FAQ

Q. 패키지명은?
A. @playwright/mcp (저장소: microsoft/playwright-mcp).

Q. Selenium MCP와 뭐가 다른가요?
A. Playwright 스택·접근성 스냅샷 중심이라는 점이 차별점입니다. 기존 Playwright 테스트 자산과 지식 공유가 쉽습니다.

Q. 비전 모델이 꼭 필요한가요?
A. 기본 경로는 아닙니다. 접근성 트리가 핵심입니다.

핵심 정리

• 접근성 트리로 브라우저 E2E를 에이전트에 연결
• 설치: npx @playwright/mcp@latest
• 프론트 검증·스모크·탐색 자동화에 적합

출처

GitHub: https://github.com/microsoft/playwright-mcp
문서: https://playwright.dev/docs/getting-started-mcp