Playwright MCP

Playwright MCP는 마이크로소프트가 만든 브라우저 자동화용 Model Context Protocol(MCP) 서버예요. 이 서버는 Playwright를 기반으로 동작하면서, LLM(대규모 언어 모델)이 웹 페이지와 상호작용할 수 있도록 도와줘요. 특히 화면 스크린샷이나 시각 기반 모델 없이도, 구조화된 접근성 트리(accessibility snapshot) 를 통해 페이지를 이해하고 조작할 수 있게 해 줘요.

출처: 문서

본문

Playwright MCP란?

Playwright MCP는 구조화된 접근성 스냅샷을 통해 LLM이 웹 페이지와 상호작용하도록 만드는 MCP 서버예요. 픽셀 기반 입력 대신 Playwright의 접근성 트리를 사용해서 빠르고 가볍고, LLM 친화적이며, 스크린샷 기반 방식에서 흔한 모호함을 피하는 결정적인(deterministic) 도구 적용이 가능해요.

빠르고 가볍다: 픽셀 기반 입력이 아니라 Playwright의 접근성 트리를 사용해요.
LLM 친화적: 비전 모델이 필요 없고 오직 구조화된 데이터로만 동작해요.
결정적 도구 적용: 스크린샷 기반 방식의 모호함을 피해요.

[!NOTE] 코딩 에이전트를 쓴다면 CLI+SKILLS 방식이 더 효율적일 수 있어요. CLI는 큰 도구 스키마와 장황한 접근성 트리를 모델 컨텍스트에 로드하지 않아 토큰 효율이 좋기 때문이에요.

요구 사항 (Requirements)

Node.js 18 이상
VS Code, Cursor, Windsurf, Claude Desktop, Goose, Grok, Junie 등 MCP 클라이언트

설치 (Getting started)

클라이언트에 Playwright MCP 서버를 설치해요. 대부분의 도구에서 동작하는 표준 설정(Standard config) 은 다음과 같아요:

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

Claude Code에서는 CLI로 간단히 추가할 수 있어요:

claude mcp add playwright npx @playwright/mcp@latest

Cursor에서는 Settings → MCP → Add new MCP Server로 가서 command 타입에 npx @playwright/mcp@latest를 입력하면 돼요.

사용 예시 (Tools)

MCP 서버가 연결되면 브라우저를 제어하는 다양한 도구를 사용할 수 있어요. 주요 도구는 다음과 같아요:

browser_navigate: 웹 페이지로 이동해요.
browser_snapshot: 현재 페이지의 접근성 스냅샷을 가져와요. 동작을 수행하기 전에 페이지 구조를 파악할 때 써요.
browser_click: 웹 페이지에서 클릭을 수행해요.
browser_type: 텍스트를 입력해요.
browser_take_screenshot: 현재 페이지의 스크린샷을 찍어요. 다만 스크린샷을 기반으로 동작(액션)을 수행할 수는 없고, 액션은 browser_snapshot을 사용해야 해요.

예를 들어 LLM에게 "검색 페이지를 열고 검색어를 입력해 줘"라고 요청하면, LLM은 browser_navigate로 페이지를 열고, browser_snapshot으로 페이지 구조를 파악한 뒤, browser_type으로 검색어를 입력하는 식으로 웹 자동화를 수행할 수 있어요.

설정 (Configuration)

Playwright MCP 서버는 다양한 인자를 지원해요. JSON 설정의 "args" 목록에 추가하면 되고, 각 인자는 환경 변수로도 설정할 수 있어요. 몇 가지 주요 옵션은 다음과 같아요:

Option	설명
`--browser`	사용할 브라우저: chrome, firefox, webkit, msedge
`--headless`	헤드리스 모드로 실행 (기본값은 headed)
`--device`	에뮬레이션할 기기 (예: "iPhone 15")
`--user-data-dir`	사용자 데이터 디렉터리 경로
`--isolated`	브라우저 프로필을 메모리에만 유지하고 디스크에 저장하지 않음
`--port`	SSE 전송을 위해 수신할 포트

독립 실행 서버 (Standalone MCP server)

디스플레이가 없는 환경이나 IDE의 워커 프로세스에서 헤드드 브라우저를 실행할 때는 --port 플래그로 HTTP 전송을 활성화할 수 있어요:

npx @playwright/mcp@latest --port 8931

그리고 MCP 클라이언트 설정의 url을 HTTP 엔드포인트로 지정해요:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

보안 (Security)

Playwright MCP는 보안 경계(security boundary)가 아니에요. 실제 배포 보안은 MCP Security Best Practices 문서를 참고해서 구성해야 해요.

더 알아보기 (Learn more)

GitHub 저장소