도입

Playwright MCP는 Microsoft의 Playwright를 기반으로 한 브라우저 자동화용 MCP 서버입니다. MCP를 지원하는 개발 도구나 에이전트에서 웹 페이지를 열고, 페이지 구조를 읽고, 상호작용하는 작업을 자동화할 때 사용합니다.

특히 프론트엔드나 풀스택 개발 과정에서 “브라우저를 직접 조작하며 확인해야 하는 작업”을 에이전트 워크플로에 연결하고 싶을 때 유용합니다. 스크린샷을 보는 방식이 아니라 웹 페이지의 접근성 트리 기반 정보를 활용한다는 점이 핵심입니다.

왜 좋은가 / 왜 유명한가

- Microsoft 공식 저장소에서 제공되는 Playwright 기반 MCP 서버입니다.

출처는 `microsoft/playwright-mcp`이며, Playwright 생태계와 함께 자주 언급되는 브라우저 자동화 MCP 서버입니다.

- LLM이 웹 페이지와 상호작용할 수 있도록 설계되어 있습니다.

일반적인 채팅 모델이 직접 브라우저 화면을 보는 대신, 구조화된 접근성 스냅샷을 통해 페이지를 이해하고 조작할 수 있게 합니다.

- 스크린샷 기반 자동화보다 LLM 친화적인 접근을 사용합니다.

공식 문서에서는 비전 모델이 필요 없고, 픽셀 기반 입력이 아니라 구조화된 데이터로 동작한다고 설명합니다.

- MCP 방식이 필요한 장기적·반복적 작업에 적합합니다.

공식 README는 MCP가 지속 상태, 풍부한 페이지 구조 분석, 반복 추론이 필요한 에이전트 루프에 여전히 유효하다고 설명합니다. 예를 들면 탐색형 자동화, self-healing 테스트, 장시간 자율 워크플로 같은 경우입니다.

무엇을 할 수 있나 / 무엇이 들어있나

Playwright MCP는 MCP 클라이언트에서 Playwright 브라우저 자동화 기능을 사용할 수 있게 해주는 서버입니다. 공식 문서에서 확인되는 주요 특징은 다음과 같습니다.

- 브라우저 자동화 기능 제공

MCP 클라이언트에 연결해 LLM이 웹 페이지와 상호작용할 수 있도록 합니다.

- 접근성 트리 기반 페이지 이해

스크린샷이나 시각 모델에 의존하지 않고, Playwright의 accessibility tree를 사용합니다.

- 빠르고 가벼운 동작 방식

공식 문서에서는 pixel-based input이 아니라 접근성 트리를 사용하기 때문에 빠르고 가볍다고 설명합니다.

- LLM 친화적 구조

비전 모델 없이 구조화된 데이터만으로 페이지를 다룰 수 있도록 설계되어 있습니다.

- 결정적인 도구 적용

스크린샷 기반 접근에서 생길 수 있는 모호성을 줄이고, 보다 명확한 방식으로 도구를 적용하는 것을 목표로 합니다.

- 여러 MCP 클라이언트에서 사용 가능

공식 요구사항에는 VS Code, Cursor, Windsurf, Claude Desktop, Goose, Grok, Junie 또는 기타 MCP 클라이언트가 언급되어 있습니다.

필요 조건은 다음과 같습니다.

Node.js 18 or newer
VS Code, Cursor, Windsurf, Claude Desktop, Goose, Grok, Junie or any other MCP client

설치와 사용법

가장 기본적인 설정은 MCP 클라이언트의 설정 파일에 Playwright MCP 서버를 추가하는 방식입니다. 공식 README의 표준 설정은 다음과 같습니다.

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

이 설정은 대부분의 도구에서 사용할 수 있는 표준 구성으로 안내되어 있습니다. MCP 클라이언트가 `mcpServers` 설정을 읽는 방식이라면, 위 블록을 해당 클라이언트의 MCP 설정 위치에 추가하면 됩니다.

Amp를 VS Code 확장 설정 화면이나 `settings.json`으로 설정하는 경우에는 공식 문서에 다음 구성이 제시되어 있습니다.

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

Amp CLI를 사용하는 경우에는 다음 명령으로 추가합니다.

amp mcp add playwright -- npx @playwright/mcp@latest

Antigravity에서는 설정 화면 또는 구성 파일에 다음과 같이 추가합니다.

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

Claude Code를 사용하는 경우에는 공식 문서에 다음 CLI 명령이 제시되어 있습니다.

claude mcp add playwright npx @playwright/mcp@latest

Claude Desktop은 MCP 설치 가이드를 따른 뒤, 위의 표준 설정을 사용하라고 안내되어 있습니다.

실제 사용 흐름은 간단합니다. MCP 클라이언트에 Playwright MCP 서버를 연결한 뒤, 에이전트에게 브라우저에서 확인할 작업을 요청합니다.

예를 들면 다음과 같은 작업에 활용할 수 있습니다.

웹 페이지를 열고 로그인 버튼이 있는지 확인해 주세요.

현재 페이지의 주요 입력 필드와 버튼을 찾아서 어떤 흐름으로 제출할 수 있는지 확인해 주세요.

프론트엔드 변경 후 화면에서 특정 버튼을 눌렀을 때 다음 단계로 이동하는지 확인해 주세요.

이때 Playwright MCP는 에이전트가 웹 페이지를 구조적으로 파악하고 상호작용할 수 있도록 브라우저 자동화 기능을 제공합니다. 다만 각 MCP 클라이언트마다 서버 설정 파일 위치와 도구 호출 UI가 다를 수 있으므로, 연결 위치는 사용 중인 클라이언트의 MCP 설정 화면을 기준으로 확인해야 합니다.

주의할 점

- Node.js 18 이상이 필요합니다.

실행 환경에 Node.js가 없거나 버전이 낮으면 `npx @playwright/mcp@latest` 실행이 실패할 수 있습니다.

- 모든 작업에 MCP가 최선은 아닐 수 있습니다.

공식 README는 코딩 에이전트의 경우 CLI 기반 워크플로가 더 토큰 효율적일 수 있다고 설명합니다. MCP는 지속 상태, 풍부한 페이지 구조 분석, 반복 추론이 필요한 자동화에 더 어울립니다.

- 웹 페이지 자동화에는 계정·권한·민감정보 관리가 필요합니다.

로그인된 브라우저나 내부 서비스에 연결해 사용할 경우, 에이전트가 접근 가능한 페이지와 입력 가능한 정보의 범위를 미리 제한하는 것이 좋습니다.

출처와 다운로드

공식 저장소는 아래에서 확인할 수 있습니다.

https://github.com/microsoft/playwright-mcp

하단 첨부파일로도 관련 자료를 받을 수 있습니다.