Playwright MCP - AI 에이전트에게 브라우저를 줬다

코드를 고치고 나면 확인해야 한다. 브라우저를 열고, localhost에 접속하고, 버튼 누르고, 폼 입력하고, 결과를 본다. 개발 시간의 상당 부분이 이 확인 작업에 들어간다.

AI 코딩 에이전트가 코드를 작성하는 시대가 됐는데, 확인은 여전히 사람이 한다. 에이전트는 코드를 고칠 수 있지만 브라우저를 열 수 없으니까.

Playwright MCP가 이 문제를 해결한다. AI 에이전트에게 브라우저를 직접 조작할 수 있는 능력을 준다.

 

MCP가 뭔데

MCP(Model Context Protocol)는 AI 어시스턴트가 외부 도구에 연결하는 표준 프로토콜이다. Anthropic이 만들었고, 2025년 12월에 Linux Foundation 산하의 Agentic AI Foundation(AAIF)에 기증했다. Anthropic, Block, OpenAI가 공동 설립했다. 이제 Anthropic만의 것이 아니다.

비유하자면 USB-C다. 하나의 프로토콜로 어떤 도구든 연결한다. AI 어시스턴트가 MCP를 통해 요청을 보내고, 도구가 실행하고, 결과가 돌아온다.

Playwright MCP는 이 프로토콜을 통해 Playwright의 브라우저 자동화 기능을 AI 에이전트에게 노출하는 서버다.

 

Playwright MCP 서버

Microsoft가 만든 공식 패키지다. @playwright/mcp. GitHub 27.1K stars.

핵심 특징이 하나 있다. 스크린샷이 아니라 접근성 트리(accessibility tree)를 사용한다.

일반적인 브라우저 자동화 접근 방식은 스크린샷을 찍고, 비전 모델로 해석하고, 좌표를 계산해서 클릭하는 것이다. 느리고, 비싸고, 비결정적이다.

Playwright MCP는 페이지의 접근성 트리를 구조화된 데이터로 읽는다. 비전 모델이 필요 없다. 텍스트 기반이라 빠르고 가볍다. 결과가 결정적이다.

제공하는 도구는 33개 이상이다. 페이지 탐색, 요소 클릭, 폼 입력, 파일 업로드, 스크린샷 촬영, PDF 생성, 탭 관리, 네트워크 요청 검사, 콘솔 메시지 확인, E2E 테스트 어설션까지.

 

설치

Node.js 18 이상이 필요하다. 16에서 돌리면 "performance is not defined" 에러가 난다.

 

Claude Code

claude mcp add playwright npx @playwright/mcp@latest

이 한 줄이면 된다. ~/.claude.json에 설정이 저장된다.

팀과 공유하려면 --scope project, 개인 설정이면 --scope user

 

Cursor

Cursor Settings → MCP → Add new MCP Server에서 command 타입으로 npx @playwright/mcp@latest를 입력한다.

 

VS Code / Copilot / Codex / 기타

전부 같은 패턴이다. 설정 파일에 이걸 추가하면 된다.

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

주의: 검색하면 @executeautomation/playwright-mcp-server라는 별도 커뮤니티 패키지가 나온다. 이건 Microsoft 공식이 아니다. 공식은 @playwright/mcp다. 예전 패키지명 @modelcontextprotocol/server-playwright도 deprecated됐다.

 

실제 사용 방식

셀프 QA

가장 직관적인 사용 사례다. 코드를 수정하고, 에이전트에게 확인을 시킨다.

"localhost:3000에 접속해서 로그인 폼에 테스트 계정으로 로그인하고, 대시보드에 차트가 렌더링되는지 확인해."

에이전트가 브라우저를 열고, 실제로 클릭하고, 폼을 입력하고, 결과를 보고한다. 셀렉터 잡기, 대기, 어설션 전부 에이전트가 처리한다.

이전에 작성한 모바일 청첩장 글에서 Lighthouse 점수를 확인하려면 매번 빌드하고, 브라우저 열고, DevTools 켜고, Lighthouse 탭 누르고, 분석 결과를 기다려야 했다. Playwright MCP가 있으면 이 확인 과정을 에이전트에게 위임할 수 있다.

 

탐색적 테스트

정해진 테스트 스크립트가 아니라, 자연어로 테스트를 지시한다.

"결제 플로우를 처음부터 끝까지 테스트해. 상품 두 개 추가하고, 장바구니 금액이 맞는지 확인하고, 결제 페이지에서 필수 입력란 비워두고 제출했을 때 에러 메시지 나오는지 봐."

테스트 코드를 한 줄도 안 쓰고 이런 검증이 가능하다.

 

테스트 코드 생성

탐색적 테스트를 하고 나면, 그 과정을 Playwright 테스트 코드로 변환할 수 있다. --codegen 옵션으로 TypeScript 테스트 파일을 생성한다. 탐색은 MCP로 하고, 반복 실행은 생성된 테스트 파일로 하는 하이브리드 접근이다.

 

스냅샷 모드 vs 비전 모드

기본은 스냅샷 모드다. 접근성 트리를 읽어서 구조화된 시맨틱 데이터로 페이지를 파악한다. 대부분의 경우 이걸로 충분하다.

비전 모드는 좌표 기반 상호작용이다. 접근성 트리에 잘 표현되지 않는 요소, Canvas, 커스텀 드로잉 UI 같은 것들을 다룰 때 쓴다. 대부분의 팀은 비전 모드가 필요 없다.

설정에서 caps 옵션에 vision을 추가하면 활성화된다.

 

MCP vs CLI

Playwright 팀이 2026년에 Playwright CLI(@playwright/cli)를 별도로 출시했다. MCP와 같은 팀이 만든 것이지만 접근 방식이 다르다.

MCP는 접근성 트리를 컨텍스트 윈도우에 직접 스트리밍한다. 에이전트가 페이지 구조를 실시간으로 파악하고, 상태를 유지하면서 반복적으로 상호작용할 수 있다.

CLI는 스냅샷과 스크린샷을 디스크에 파일로 저장한다. 에이전트는 파일 경로만 받는다. 토큰을 약 4배 덜 쓴다.

세션당 MCP가 약 114,000 토큰을 소비한다고 한다. CLI는 같은 작업에 훨씬 적은 토큰을 쓴다.

Microsoft의 README에서 직접 이렇게 말한다.

코딩 에이전트를 쓰고 있다면, MCP보다 CLI+SKILLS가 나을 수 있다. 큰 코드베이스, 테스트, 추론을 제한된 컨텍스트 윈도우 안에서 처리해야 하는 에이전트에게는 CLI가 더 적합하다.

MCP는 지속적 브라우저 상태와 풍부한 페이지 구조 분석이 필요한 경우에 의미가 있다. 탐색적 자동화, 자가 치유 테스트, 오래 실행되는 자율 워크플로우 같은 것들.

실용적인 접근: 탐색은 MCP, 반복은 CLI

 

이전 글들과의 연결

Harness Engineering 글에서 다뤘던 Anthropic의 3-에이전트 구조를 떠올려보면, Evaluator가 Playwright로 앱을 실제 사용자처럼 테스트했다. Playwright MCP가 정확히 그 역할을 하는 도구다.

Compound Engineering에서 Review 단계에 12개 서브 에이전트가 병렬로 코드를 검토한다고 했다. 그 중 일부가 Playwright MCP를 통해 실제 브라우저에서 UI를 검증하는 것이다.

Ralph Loop에서 "피드백 루프를 통해 에이전트의 결과물을 검증한다"고 했다. Playwright MCP가 그 피드백 루프의 구체적인 구현체 중 하나다.

결국 AI 코딩 에이전트 생태계에서 Playwright MCP의 위치는 명확하다. 에이전트가 코드를 쓰고(Ralph Loop), 학습을 축적하고(Compound Engineering), 안전하게 실행하는 환경을 설계하고(Harness Engineering), **실제로 결과를 눈으로 확인하는 것(Playwright MCP)**까지. 전체 파이프라인의 마지막 퍼즐 조각이다.

 

주의할 점

프라이버시. Playwright MCP를 통해 에이전트가 보는 모든 것(페이지 콘텐츠, 콘솔 출력, 폼 데이터)이 AI 제공업체의 API로 전송된다. 프로덕션 환경이 아닌 개발 환경에서, 테스트 데이터로만 사용해야 한다.

파일 시스템 제한. 2026년 업데이트에서 파일 시스템 접근 제한과 오리진 제어가 기본으로 추가됐다. 워크스페이스 루트 디렉토리 밖의 파일 접근이 차단되고, file:// URL 탐색도 기본적으로 막혀 있다.

프로덕션 사용 금지. 프로덕션 시스템이나 민감한 데이터에 대해 사용하면 안 된다. 적절한 격리와 접근 제어 없이는.

토큰 비용. 세션당 약 114,000 토큰. 가볍지 않다. 복잡한 페이지를 탐색하면 접근성 트리가 커져서 토큰 소비가 더 늘어난다. 비용에 민감하면 CLI를 고려해야 한다.

 

설정 옵션 정리

자주 쓸 만한 옵션들만 추린다.

# 브라우저 지정 (기본: chromium)
npx @playwright/mcp@latest --browser firefox

# 비전 모드 활성화
npx @playwright/mcp@latest --caps vision

# 헤드리스 모드
npx @playwright/mcp@latest --headless

# 허용할 오리진 지정
npx @playwright/mcp@latest --allowed-origins "http://localhost:3000;http://localhost:5173"

# 차단할 오리진 지정
npx @playwright/mcp@latest --blocked-origins "https://analytics.example.com"

# 코드 생성 언어 설정
npx @playwright/mcp@latest --codegen typescript

--allowed-origins로 에이전트가 접근할 수 있는 URL을 제한하는 건 보안 관점에서 기본으로 설정하는 게 좋다.

 

정리

Playwright MCP는 AI 코딩 에이전트에게 브라우저를 줬다.

• Microsoft 공식 패키지 @playwright/mcp, 27.1K stars
• 접근성 트리 기반이라 스크린샷/비전 모델 불필요
• Claude Code, Cursor, VS Code, Copilot, Codex 등 모든 MCP 호환 클라이언트에서 동작
• 셀프 QA, 탐색적 테스트, 테스트 코드 생성에 활용
• 토큰 효율이 중요하면 CLI+SKILLS 대안 고려
• Chromium, Firefox, WebKit 크로스 브라우저 지원

코드를 쓰는 건 에이전트가 할 수 있게 됐다. 이제 확인하는 것도 에이전트가 할 수 있다.

 

참고:

• GitHub: https://github.com/microsoft/playwright-mcp
• npm: https://www.npmjs.com/package/@playwright/mcp
• Playwright CLI (토큰 효율적 대안): https://github.com/microsoft/playwright-cli
• Anthropic 공식 Playwright 플러그인 페이지: https://claude.com/plugins/playwright