극작가 MCP 서버

극작가 MCP

Playwright를 사용하여 브라우저 자동화 기능을 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버를 사용하면 LLM이 구조화된 접근성 스냅샷을 통해 웹 페이지와 상호 작용할 수 있으므로 스크린샷이나 시각적으로 조정된 모델이 필요하지 않습니다.

주요 특징

빠르고 가볍습니다 . 픽셀 기반 입력 방식이 아닌 Playwright의 접근성 트리를 사용합니다.
LLM 친화적입니다 . 비전 모델이 필요 없으며, 구조화된 데이터만을 기반으로 운영됩니다.
결정론적 도구 적용 . 스크린샷 기반 접근 방식에서 흔히 발생하는 모호성을 방지합니다.

요구 사항

Node.js 18 이상
VS Code, Cursor, Windsurf, Claude Desktop 또는 기타 MCP 클라이언트

시작하기

먼저 클라이언트와 함께 Playwright MCP 서버를 설치하세요. 일반적인 구성은 다음과 같습니다.

지엑스피1

VS Code CLI를 사용하여 Playwright MCP 서버를 설치할 수도 있습니다.

# For VS Code code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

설치 후 Playwright MCP 서버를 VS Code의 GitHub Copilot 에이전트와 함께 사용할 수 있습니다.

Cursor Settings -> MCP -> Add new MCP Server 로 이동합니다. 원하는 이름을 입력하고, npx @playwright/mcp 명령어와 함께 command 유형을 사용합니다. ' Edit 클릭하여 구성을 확인하거나 명령어와 같은 인수를 추가할 수도 있습니다.

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

Windsuff MCP 설명서를 따르세요. 다음 구성을 사용하세요.

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

MCP 설치 가이드를 따르고 다음 구성을 사용하세요.

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

구성

Playwright MCP 서버는 다음 인수를 지원합니다. 위 JSON 구성에서 "args" 목록의 일부로 제공할 수 있습니다.

> npx @playwright/mcp@latest --help --allowed-origins <origins> semicolon-separated list of origins to allow the browser to request. Default is to allow all. --blocked-origins <origins> semicolon-separated list of origins to block the browser from requesting. Blocklist is evaluated before allowlist. If used without the allowlist, requests not matching the blocklist are still allowed. --block-service-workers block service workers --browser <browser> browser or chrome channel to use, possible values: chrome, firefox, webkit, msedge. --caps <caps> comma-separated list of capabilities to enable, possible values: tabs, pdf, history, wait, files, install. Default is all. --cdp-endpoint <endpoint> CDP endpoint to connect to. --config <path> path to the configuration file. --device <device> device to emulate, for example: "iPhone 15" --executable-path <path> path to the browser executable. --headless run browser in headless mode, headed by default --host <host> host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces. --ignore-https-errors ignore https errors --isolated keep the browser profile in memory, do not save it to disk. --no-image-responses do not send image responses to the client. --no-sandbox disable the sandbox for all process types that are normally sandboxed. --output-dir <path> path to the directory for output files. --port <port> port to listen on for SSE transport. --proxy-bypass <bypass> comma-separated domains to bypass proxy, for example ".com,chromium.org,.domain.com" --proxy-server <proxy> specify proxy server, for example "http://myproxy:3128" or "socks5://myproxy:8080" --save-trace Whether to save the Playwright Trace of the session into the output directory. --storage-state <path> path to the storage state file for isolated sessions. --user-agent <ua string> specify user agent string --user-data-dir <path> path to the user data directory. If not specified, a temporary directory will be created. --viewport-size <size> specify browser viewport size in pixels, for example "1280, 720" --vision Run server that uses screenshots (Aria snapshots are used by default)

사용자 프로필

일반 브라우저(기본값)처럼 지속적인 프로필로 Playwright MCP를 실행하거나 테스트 세션을 위한 격리된 컨텍스트에서 실행할 수 있습니다.

영구 프로필

모든 로그인 정보는 영구 프로필에 저장되며, 오프라인 상태를 해제하려면 세션 간에 삭제할 수 있습니다. 영구 프로필은 다음 위치에 있으며, --user-data-dir 인수를 사용하여 재정의할 수 있습니다.

# Windows %USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile # macOS - ~/Library/Caches/ms-playwright/mcp-{channel}-profile # Linux - ~/.cache/ms-playwright/mcp-{channel}-profile

외딴

격리 모드에서는 각 세션이 격리된 프로필에서 시작됩니다. MCP에 브라우저를 닫도록 요청할 때마다 세션이 닫히고 해당 세션의 모든 저장소 상태가 손실됩니다. 구성의 contextOptions 또는 --storage-state 인수를 통해 브라우저에 초기 저장소 상태를 제공할 수 있습니다. 저장소 상태에 대한 자세한 내용은 여기를 참조하세요.

{ "mcpServers": { "playwright": { "command": "npx", "args": [ "@playwright/mcp@latest", "--isolated", "--storage-state={path/to/storage.json} ] } } }

구성 파일

Playwright MCP 서버는 JSON 구성 파일을 사용하여 구성할 수 있습니다. --config 명령줄 옵션을 사용하여 구성 파일을 지정할 수 있습니다.

npx @playwright/mcp@latest --config path/to/config.json

{ // Browser configuration browser?: { // Browser type to use (chromium, firefox, or webkit) browserName?: 'chromium' | 'firefox' | 'webkit'; // Keep the browser profile in memory, do not save it to disk. isolated?: boolean; // Path to user data directory for browser profile persistence userDataDir?: string; // Browser launch options (see Playwright docs) // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch launchOptions?: { channel?: string; // Browser channel (e.g. 'chrome') headless?: boolean; // Run in headless mode executablePath?: string; // Path to browser executable // ... other Playwright launch options }; // Browser context options // @see https://playwright.dev/docs/api/class-browser#browser-new-context contextOptions?: { viewport?: { width: number, height: number }; // ... other Playwright context options }; // CDP endpoint for connecting to existing browser cdpEndpoint?: string; // Remote Playwright server endpoint remoteEndpoint?: string; }, // Server configuration server?: { port?: number; // Port to listen on host?: string; // Host to bind to (default: localhost) }, // List of enabled capabilities capabilities?: Array< 'core' | // Core browser automation 'tabs' | // Tab management 'pdf' | // PDF generation 'history' | // Browser history 'wait' | // Wait utilities 'files' | // File handling 'install' | // Browser installation 'testing' // Testing >; // Enable vision mode (screenshots instead of accessibility snapshots) vision?: boolean; // Directory for output files outputDir?: string; // Network configuration network?: { // List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked. allowedOrigins?: string[]; // List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked. blockedOrigins?: string[]; }; /** * Do not send image responses to the client. */ noImageResponses?: boolean; }

독립형 MCP 서버

디스플레이가 없는 시스템이나 IDE의 작업자 프로세스에서 헤더 브라우저를 실행하는 경우 DISPLAY가 있는 환경에서 MCP 서버를 실행하고 --port 플래그를 전달하여 SSE 전송을 활성화합니다.

npx @playwright/mcp@latest --port 8931

그런 다음 MCP 클라이언트 구성에서 url SSE 엔드포인트로 설정합니다.

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

참고: Docker 구현은 현재 헤드리스 크로미엄만 지원합니다.

{ "mcpServers": { "playwright": { "command": "docker", "args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"] } } }

Docker 이미지를 직접 빌드할 수 있습니다.

docker build -t mcr.microsoft.com/playwright/mcp .

import http from 'http'; import { createConnection } from '@playwright/mcp'; import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js'; http.createServer(async (req, res) => { // ... // Creates a headless Playwright MCP server with SSE transport const connection = await createConnection({ browser: { launchOptions: { headless: true } } }); const transport = new SSEServerTransport('/messages', res); await connection.connect(transport); // ... });

도구

도구는 두 가지 모드로 제공됩니다.

스냅샷 모드 (기본값): 더 나은 성능과 안정성을 위해 접근성 스냅샷을 사용합니다.
비전 모드 : 시각적 기반 상호작용을 위해 스크린샷을 사용합니다.

Vision Mode를 사용하려면 서버를 시작할 때 --vision 플래그를 추가하세요.

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

제공된 스크린샷을 기준으로, 비전 모드는 XY 좌표 공간을 사용하여 요소와 상호 작용할 수 있는 컴퓨터 사용 모델에서 가장 잘 작동합니다.

브라우저 스냅샷
- 제목: 페이지 스냅샷
- 설명: 현재 페이지의 접근성 스냅샷을 캡처합니다. 스크린샷보다 낫습니다.
- 매개변수: 없음
- 읽기 전용: true
브라우저 클릭
- 제목: 클릭
- 설명: 웹 페이지를 클릭합니다.
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - ref (문자열): 페이지 스냅샷의 정확한 대상 요소 참조
- 읽기 전용: false
브라우저 드래그
- 제목: 드래그 마우스
- 설명: 두 요소 사이에서 드래그 앤 드롭을 수행합니다.
- 매개변수:
  - startElement (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 소스 요소 설명
  - startRef (문자열): 페이지 스냅샷의 정확한 소스 요소 참조
  - endElement (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 대상 요소 설명
  - endRef (문자열): 페이지 스냅샷의 정확한 대상 요소 참조
- 읽기 전용: false
브라우저_호버
- 제목: 마우스를 올려주세요
- 설명: 페이지의 요소 위에 마우스를 올려 놓으세요
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - ref (문자열): 페이지 스냅샷의 정확한 대상 요소 참조
- 읽기 전용: true
브라우저_유형
- 제목: 텍스트 입력
- 설명: 편집 가능한 요소에 텍스트를 입력합니다.
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - ref (문자열): 페이지 스냅샷의 정확한 대상 요소 참조
  - text (문자열): 요소에 입력할 텍스트
  - submit (부울, 선택 사항): 입력한 텍스트를 제출할지 여부(제출 후 Enter 키 누름)
  - slowly (부울, 선택 사항): 한 번에 한 글자씩 입력할지 여부입니다. 페이지에서 키 핸들러를 트리거하는 데 유용합니다. 기본적으로 전체 텍스트가 한 번에 채워집니다.
- 읽기 전용: false
브라우저 선택 옵션
- 제목: 옵션 선택
- 설명: 드롭다운에서 옵션을 선택하세요
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - ref (문자열): 페이지 스냅샷의 정확한 대상 요소 참조
  - values (배열): 드롭다운에서 선택할 값의 배열입니다. 단일 값 또는 여러 값일 수 있습니다.
- 읽기 전용: false
브라우저_누르기_키
- 제목: 키를 누르세요
- 설명: 키보드의 키를 누르세요
- 매개변수:
  - key (문자열): 누르려는 키의 이름 또는 생성할 문자(예: ArrowLeft``a
- 읽기 전용: false
브라우저 대기
- 제목 : 기다리다
- 설명: 텍스트가 나타나거나 사라지거나 지정된 시간이 지날 때까지 기다립니다.
- 매개변수:
  - time (숫자, 선택 사항): 대기 시간(초)
  - text (문자열, 선택 사항): 기다릴 텍스트
  - textGone (문자열, 선택 사항): 사라질 때까지 기다릴 텍스트
- 읽기 전용: true
브라우저 파일 업로드
- 제목: 파일 업로드
- 설명: 하나 또는 여러 개의 파일을 업로드합니다.
- 매개변수:
  - paths (배열): 업로드할 파일의 절대 경로입니다. 단일 파일 또는 여러 파일일 수 있습니다.
- 읽기 전용: false
브라우저_핸들_대화 상자
- 제목: 대화 처리
- 설명: 대화 처리
- 매개변수:
  - accept (boolean): 대화를 수락할지 여부.
  - promptText (문자열, 선택 사항): 프롬프트 대화 상자의 경우 프롬프트의 텍스트입니다.
- 읽기 전용: false
브라우저 탐색
- 제목: URL로 이동
- 설명: URL로 이동합니다
- 매개변수:
  - url (문자열): 이동할 URL
- 읽기 전용: false
브라우저_뒤로_탐색
- 제목: 돌아가기
- 설명: 이전 페이지로 돌아가기
- 매개변수: 없음
- 읽기 전용: true
브라우저_탐색_포워드
- 제목: 앞으로 나아가세요
- 설명: 다음 페이지로 이동합니다.
- 매개변수: 없음
- 읽기 전용: true
브라우저_스크린샷_찍기
- 제목: 스크린샷 찍기
- 설명: 현재 페이지의 스크린샷을 찍습니다. 스크린샷을 기반으로 다른 작업을 수행할 수 없으므로, 작업에는 browser_snapshot을 사용하세요.
- 매개변수:
  - raw (부울, 선택 사항): 압축하지 않고 PNG 형식으로 반환할지 여부입니다. 기본값은 false이며, JPEG 이미지를 반환합니다.
  - filename (문자열, 선택 사항): 스크린샷을 저장할 파일 이름입니다. 지정하지 않으면 기본값은 page-{timestamp}.{png|jpeg} .
  - element (문자열, 선택 사항): 사람이 읽을 수 있는 요소 설명으로, 요소의 스크린샷 권한을 얻는 데 사용됩니다. 제공하지 않으면 뷰포트의 스크린샷이 촬영됩니다. element가 제공된 경우 ref도 함께 제공해야 합니다.
  - ref (문자열, 선택 사항): 페이지 스냅샷의 정확한 대상 요소 참조입니다. 지정하지 않으면 뷰포트의 스크린샷이 생성됩니다. ref가 지정되면 요소도 지정해야 합니다.
- 읽기 전용: true
브라우저_PDF_저장
- 제목: PDF로 저장
- 설명: 페이지를 PDF로 저장
- 매개변수:
  - filename (문자열, 선택 사항): PDF를 저장할 파일 이름입니다. 지정하지 않으면 기본값은 page-{timestamp}.pdf 입니다.
- 읽기 전용: true
브라우저 네트워크 요청
- 제목: 네트워크 요청 목록
- 설명: 페이지를 로드한 이후 모든 네트워크 요청을 반환합니다.
- 매개변수: 없음
- 읽기 전용: true
브라우저 콘솔 메시지
- 제목: 콘솔 메시지 받기
- 설명: 모든 콘솔 메시지를 반환합니다.
- 매개변수: 없음
- 읽기 전용: true
브라우저 설치
- 제목 : config에 지정된 브라우저 설치
- 설명: 설정에 지정된 브라우저를 설치합니다. 브라우저가 설치되지 않았다는 오류가 발생하면 이 메서드를 호출합니다.
- 매개변수: 없음
- 읽기 전용: false
브라우저 닫기
- 제목: 브라우저 닫기
- 설명: 페이지를 닫습니다
- 매개변수: 없음
- 읽기 전용: true
브라우저 크기 조정
- 제목: 브라우저 창 크기 조정
- 설명: 브라우저 창 크기 조정
- 매개변수:
  - width (숫자): 브라우저 창의 너비
  - height (숫자): 브라우저 창의 높이
- 읽기 전용: true
브라우저 탭 목록
- 제목: 목록 탭
- 설명: 브라우저 탭 나열
- 매개변수: 없음
- 읽기 전용: true
브라우저_탭_새로 만들기
- 제목: 새 탭 열기
- 설명: 새 탭을 엽니다
- 매개변수:
  - url (문자열, 선택 사항): 새 탭에서 이동할 URL입니다. 지정하지 않으면 새 탭이 비어 있게 됩니다.
- 읽기 전용: true
브라우저_탭_선택
- 제목: 탭 선택
- 설명: 인덱스로 탭 선택
- 매개변수:
  - index (숫자): 선택할 탭의 인덱스
- 읽기 전용: true
브라우저_탭_닫기
- 제목: 탭 닫기
- 설명: 탭 닫기
- 매개변수:
  - index (숫자, 선택 사항): 닫을 탭의 인덱스입니다. 지정하지 않으면 현재 탭을 닫습니다.
- 읽기 전용: false
브라우저_생성_플레이라이트_테스트
- 제목: 극작가 테스트 생성
- 설명: 주어진 시나리오에 대한 극작가 테스트 생성
- 매개변수:
  - name (문자열): 테스트의 이름
  - description (문자열): 테스트에 대한 설명
  - steps (배열): 테스트의 단계
- 읽기 전용: true
브라우저 화면 캡처
- 제목: 스크린샷 찍기
- 설명: 현재 페이지의 스크린샷을 찍습니다.
- 매개변수: 없음
- 읽기 전용: true
브라우저 화면 마우스 이동
- 제목: 마우스 이동
- 설명: 마우스를 주어진 위치로 이동합니다.
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - x (숫자): X 좌표
  - y (숫자): Y 좌표
- 읽기 전용: true
브라우저 화면 클릭
- 제목: 클릭
- 설명: 마우스 왼쪽 버튼을 클릭하세요
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - x (숫자): X 좌표
  - y (숫자): Y 좌표
- 읽기 전용: false
브라우저 화면 드래그
- 제목: 드래그 마우스
- 설명: 마우스 왼쪽 버튼 드래그
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - startX (숫자): 시작 X 좌표
  - startY (숫자): 시작 Y 좌표
  - endX (숫자): 끝 X 좌표
  - endY (숫자): 끝 Y 좌표
- 읽기 전용: false
브라우저_화면_유형
- 제목: 텍스트 입력
- 설명: 텍스트를 입력하세요
- 매개변수:
  - text (문자열): 요소에 입력할 텍스트
  - submit (부울, 선택 사항): 입력한 텍스트를 제출할지 여부(제출 후 Enter 키 누름)
- 읽기 전용: false
브라우저_누르기_키
- 제목: 키를 누르세요
- 설명: 키보드의 키를 누르세요
- 매개변수:
  - key (문자열): 누르려는 키의 이름 또는 생성할 문자(예: ArrowLeft``a
- 읽기 전용: false
브라우저 대기
- 제목 : 기다리다
- 설명: 텍스트가 나타나거나 사라지거나 지정된 시간이 지날 때까지 기다립니다.
- 매개변수:
  - time (숫자, 선택 사항): 대기 시간(초)
  - text (문자열, 선택 사항): 기다릴 텍스트
  - textGone (문자열, 선택 사항): 사라질 때까지 기다릴 텍스트
- 읽기 전용: true
브라우저 파일 업로드
- 제목: 파일 업로드
- 설명: 하나 또는 여러 개의 파일을 업로드합니다.
- 매개변수:
  - paths (배열): 업로드할 파일의 절대 경로입니다. 단일 파일 또는 여러 파일일 수 있습니다.
- 읽기 전용: false
브라우저_핸들_대화 상자
- 제목: 대화 처리
- 설명: 대화 처리
- 매개변수:
  - accept (boolean): 대화를 수락할지 여부.
  - promptText (문자열, 선택 사항): 프롬프트 대화 상자의 경우 프롬프트의 텍스트입니다.
- 읽기 전용: false

Playwright MCP Server

극작가 MCP

주요 특징

요구 사항

시작하기

구성

사용자 프로필

구성 파일

독립형 MCP 서버

도구

Resources

Tools

Appeared in Searches

New MCP Servers

Latest Blog Posts

MCP directory API