극작가 MCP

극작가 기록 MCP

Playwright Record MCP는 Playwright를 사용하여 브라우저 자동화 기능을 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버는 브라우저 상호작용을 녹화하는 비디오 녹화 기능을 추가합니다. LLM(대규모 언어 모델)이 스크린샷이나 시각적 모델 없이도 구조화된 접근성 스냅샷을 통해 웹 페이지와 상호작용할 수 있도록 지원합니다.

주요 특징

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

사용 사례

웹 탐색 및 양식 작성
구조화된 콘텐츠에서 데이터 추출
LLM 기반 자동화 테스트
에이전트를 위한 일반 용도 브라우저 상호 작용
브라우저 상호작용 기록 및 분석

설치

NPM을 통한 설치

지엑스피1

또는

npx @playwright/record-mcp

구성 예제

엔피엑스

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

VS Code에 설치

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

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

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

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

CLI 옵션

Playwright Record MCP 서버는 다음 명령줄 옵션을 지원합니다.

--browser <browser> : 사용할 브라우저 또는 Chrome 채널입니다. 가능한 값은 다음과 같습니다.
- chrome , firefox , webkit , msedge
- 크롬 채널: chrome-beta , chrome-canary , chrome-dev
- 에지 채널: msedge-beta , msedge-canary , msedge-dev
- 기본값: chrome
--caps <caps> : 활성화할 기능 목록을 쉼표로 구분하여 표시합니다. 가능한 값은 다음과 같습니다: tabs, pdf, history, wait, files, install. 기본값은 all입니다.
--cdp-endpoint <endpoint> : 연결할 CDP 엔드포인트
--executable-path <path> : 브라우저 실행 파일의 경로
--headless : 브라우저를 헤드리스 모드로 실행합니다(기본적으로 headed 모드)
--port <port> : SSE 전송을 수신할 포트
--user-data-dir <path> : 사용자 데이터 디렉토리 경로
--vision : 스크린샷을 사용하는 서버를 실행합니다(기본적으로 Aria 스냅샷이 사용됩니다)
--record : 브라우저 상호작용을 비디오로 녹화합니다(새로운 기능)
--record-path <path> : 녹음 파일을 저장할 경로(기본값: ./recordings)
--record-format <format> : 녹음 형식, 가능한 값: mp4, webm(기본값: mp4)

사용자 데이터 디렉토리

Playwright Record MCP는 다음 위치에 새 프로필을 추가하여 브라우저를 시작합니다.

Windows: %USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
macOS: ~/Library/Caches/ms-playwright/mcp-chrome-profile
리눅스: ~/.cache/ms-playwright/mcp-chrome-profile

모든 로그인 정보는 해당 프로필에 저장됩니다. 오프라인 상태를 지우려면 세션 간에 해당 정보를 삭제할 수 있습니다.

헤드리스 브라우저(GUI 없는 브라우저) 실행

이 모드는 백그라운드 또는 일괄 작업에 유용합니다.

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

비디오 녹화 사용

비디오 녹화 기능을 사용하려면 --record 플래그를 사용하세요.

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

녹음 파일 저장 경로를 지정하려면:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/record-mcp@latest",
        "--record",
        "--record-path", "./my-recordings"
      ]
    }
  }
}

녹음 형식을 지정하려면:

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

DISPLAY 없이 Linux에서 Headed Browser 실행

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

npx @playwright/record-mcp@latest --port 8931

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

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

도커

참고: Docker 구현은 현재 헤드리스 Chromium만 지원합니다.

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "--init", "mcp/playwright-record"]
    }
  }
}

Docker로 빌드하려면:

docker build -t mcp/playwright-record .

도구 모드

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

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

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

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

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

사용자 정의 전송을 통한 프로그래밍 방식 사용

import http from 'http';

import { createServer } from '@playwright/record-mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';

http.createServer(async (req, res) => {
  // ...

  // Creates a headless Playwright Record MCP server with SSE transport
  const mcpServer = await createServer({ headless: true, record: true });
  const transport = new SSEServerTransport('/messages', res);
  await mcpServer.connect(transport);

  // ...
});

스냅샷 기반 상호작용

브라우저 스냅샷
- 설명: 현재 페이지의 접근성 스냅샷을 캡처합니다. 스크린샷보다 낫습니다.
- 매개변수: 없음
브라우저 클릭
- 설명: 웹 페이지를 클릭합니다.
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - ref (문자열): 페이지 스냅샷의 정확한 대상 요소 참조
브라우저 드래그
- 설명: 두 요소 사이에서 드래그 앤 드롭을 수행합니다.
- 매개변수:
  - startElement (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 소스 요소 설명
  - startRef (문자열): 페이지 스냅샷의 정확한 소스 요소 참조
  - endElement (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 대상 요소 설명
  - endRef (문자열): 페이지 스냅샷의 정확한 대상 요소 참조
브라우저_호버
- 설명: 페이지의 요소 위에 마우스를 올려 놓으세요
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - ref (문자열): 페이지 스냅샷의 정확한 대상 요소 참조
브라우저_유형
- 설명: 편집 가능한 요소에 텍스트를 입력합니다.
- 매개변수:
  - element (문자열): 요소와 상호 작용할 수 있는 권한을 얻는 데 사용되는 사람이 읽을 수 있는 요소 설명
  - ref (문자열): 페이지 스냅샷의 정확한 대상 요소 참조
  - text (문자열): 요소에 입력할 텍스트
  - submit (부울, 선택 사항): 입력한 텍스트를 제출할지 여부(제출 후 Enter 키 누름)
  - slowly (부울, 선택 사항): 한 번에 한 글자씩 입력할지 여부입니다. 페이지에서 키 핸들러를 트리거하는 데 유용합니다. 기본적으로 전체 텍스트가 한 번에 채워집니다.

비디오 녹화 도구(새로운 기능)

브라우저_레코드_시작
- 설명: 브라우저 상호작용 기록 시작
- 매개변수:
  - path (문자열, 선택 사항): 녹음 파일을 저장할 경로
  - format (문자열, 선택 사항): 녹음 형식(mp4 또는 webm)
브라우저 기록 중지
- 설명: 브라우저 상호작용 녹화 중지 및 저장
- 매개변수: 없음
브라우저 기록 일시 중지
- 설명: 현재 녹음을 일시 중지합니다.
- 매개변수: 없음
브라우저_기록_이력서
- 설명: 일시 정지된 녹음을 다시 시작합니다.
- 매개변수: 없음
브라우저_레코드_목록
- 설명: 현재 녹음 파일 목록을 반환합니다.
- 매개변수: 없음

예시

비디오 녹화 시작 및 중지

// Start video recording
await mcpServer.invoke('browser_record_start', {
  path: './my-recordings/test-recording.mp4',
  format: 'mp4'
});

// Perform browser navigation
await mcpServer.invoke('browser_navigate', {
  url: 'https://example.com'
});

// Interact with the page
const snapshot = await mcpServer.invoke('browser_snapshot');
// Find elements in the snapshot...

// Stop video recording
await mcpServer.invoke('browser_record_stop');

지원되는 브라우저

크롬
파이어폭스
웹킷
마이크로소프트 엣지

요구 사항

Node.js 18 이상
필수 브라우저를 설치해야 합니다(또는 browser_install 도구를 사용하여 설치해야 합니다)

특허

Apache-2.0 라이센스

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

LLM이 구조화된 접근성 스냅샷을 통해 웹 페이지와 상호 작용할 수 있도록 하는 모델 컨텍스트 프로토콜 서버로, 스크린샷이나 시각적으로 조정된 모델이 필요 없이 브라우저 자동화 기능을 제공합니다.

Related MCP Servers

Puppeteer MCP Server
twolven
-
security
A
license
-
quality
A Model Context Protocol server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment.
Last updated -
3
Python
Apache 2.0
MCP Web Tools Server
surya-madhav
-
security
A
license
-
quality
A Model Context Protocol server that allows LLMs to interact with web content through standardized tools, currently supporting web scraping functionality.
Last updated -
Python
MIT License
BrowserCat MCP Server (Browser Automation)official
browsercat
-
security
F
license
-
quality
A Model Context Protocol server that provides browser automation capabilities using BrowserCat's cloud browser service. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment without needing to install browsers locally.
Last updated -
39
Playwright MCP Serverofficial
microsoft
A
security
A
license
A
quality
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Last updated -
21
70,036
12,393
TypeScript
Apache 2.0

View all related MCP servers

Playwright MCP