극작가 기록 MCP

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

주요 특징

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

Related MCP server: Playwright MCP Server

사용 사례

웹 탐색 및 양식 작성
구조화된 콘텐츠에서 데이터 추출
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 라이센스

Playwright MCP