Playwright MCP: Microsoft의 브라우저 자동화 MCP 서비스

2.9K 00

일반 소개

극작가 MCP 은 Microsoft에서 개발하여 GitHub에서 호스팅하는 오픈 소스 도구입니다. 이 도구는 모델 컨텍스트 프로토콜(MCP) 프로토콜을 통해 웹 페이지를 열고, 요소를 클릭하고, 텍스트를 입력하는 등의 방식으로 AI 모델이 브라우저를 직접 제어할 수 있도록 해줍니다. 이 도구는 Playwright 프레임워크를 기반으로 하며 Chromium, Firefox, WebKit과 같은 브라우저를 지원합니다. 빠르고 가벼우며 스크린샷이나 시각적 모델에 의존하지 않고 구조화된 데이터를 생성하는 것이 핵심 기능이며, 특히 자동화된 테스트나 데이터 추출 등 웹 페이지 상호 작용이 필요한 AI 애플리케이션에 적합한 것이 Playwright MCP의 특징입니다. 공식 문서는 2025년 3월까지 업데이트되며, 이 프로젝트는 개발자들 사이에서 활발하고 인기 있는 프로젝트입니다.

같은 이름의 프로젝트입니다:MCP Playwright: 브라우저 자동화 작업을 제공하는 MCP 서비스

기능 목록

브라우저 제어 지원: 웹 페이지 열기, 페이지 탐색, 요소 클릭 등의 기능을 지원합니다.
구조화된 데이터 생성: 스크린샷 없이도 접근성 스냅샷을 통해 데이터를 출력할 수 있습니다.
기본 스냅샷 모드와 비전 모드의 두 가지 모드가 제공됩니다.
스크린샷 및 저장: 페이지의 스크린샷을 찍거나 PDF 파일로 저장할 수 있습니다.
입력 및 조작: 입력 텍스트, 키 입력, 드래그 앤 드롭 및 기타 기능을 지원합니다.
헤드리스 모드와 호환: 인터페이스를 표시하지 않고 백그라운드에서 브라우저를 실행할 수 있습니다.

도움말 사용

Playwright MCP는 설치와 사용이 간단합니다. 다음은 두 가지 모드의 구체적인 기능을 포함하여 이 도구의 설치 및 작동 방법에 대한 자세한 설명입니다.

설치 프로세스

환경 준비하기
먼저 Node.js를 설치합니다(최신 LTS 버전(예: v22)을 권장). 버전을 확인합니다:

node -v

아직 설치되어 있지 않다면 공식 Node.js 웹사이트를 방문하여 다운로드하여 설치하세요.

Playwright MCP 설치
터미널에서 다음 명령을 실행합니다:

npm install -g @playwright/mcp

또는 최신 버전을 사용하세요:

npx @playwright/mcp@latest

서버 시작
시작하려면 명령을 입력합니다:

npx @playwright/mcp@latest

기본값은 헤더 모드(브라우저 창 표시)입니다. 헤더 없는 모드를 사용하려면 매개 변수를 추가하세요:

npx @playwright/mcp@latest --headless

AI 클라이언트 구성
AI 도구가 MCP를 지원하는 경우(예: 일부 대형 모델 클라이언트) 구성 파일을 편집해야 합니다. 예시:

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

저장되면 AI는 MCP를 통해 브라우저를 호출할 수 있습니다.

모니터가 없는 환경을 위한 구성
Linux 모니터가 없는 환경에서는 클라이언트-서버 모드를 사용할 수 있습니다. 먼저 모니터가 있는 컴퓨터에서 실행하세요:

npx playwright run-server

출력에는 다음과 같은 웹소켓 주소가 표시됩니다. ws://localhost:port/. 를 클릭한 다음 MCP 구성에 추가합니다:

{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:port/"
}
}
}
}

주요 기능 사용 방법

Playwright MCP에는 스냅샷 모드와 시각적 모드의 두 가지 모드가 있습니다. 아래에서 별도로 설명합니다.

스냅샷 모드(기본값)

이 모드는 빠르고 안정적인 액세스 가능한 스냅샷으로 작동합니다. 일반적으로 사용되는 도구는 다음과 같습니다:

웹 페이지 열기

지침:browser_navigate "https://example.com"
동작: 브라우저가 지정된 URL을 엽니다.
출력: 페이지 로딩 상태를 반환합니다.

요소 클릭

지침:browser_click "登录按钮" "ref123"
작업: 표시된 스냅샷을 클릭합니다. ref123 를 입력합니다(요소 설명 및 인용 필요).
참고: 참조는 스냅샷 데이터에서 가져온 것입니다.

입력

지침:browser_type "用户名输入框" "ref456" "myuser" true
작동: 다음에서 ref456 입력 상자에 입력한 다음 Enter(true (제출을 표시합니다).

PDF로 저장

지침:browser_save_as_pdf
동작: 현재 페이지를 PDF 파일로 저장합니다.

대기 시간

지침:browser_wait 5
작동: 5초(최대 10초) 기다립니다.

시각적 패턴

프라이밍 --vision 매개변수:

npx @playwright/mcp@latest --vision

이 모델은 스크린샷과 좌표로 작동하며 시각적 모델에 적합합니다. 일반적으로 사용되는 도구:

인터셉트 페이지
- 지침:browser_screenshot
- 작업: 현재 페이지의 스크린샷을 생성합니다.
좌표를 클릭합니다.
- 지침:browser_click 100 200
- 동작: 좌표(100, 200)를 클릭합니다.
드래그 앤 드롭 작업
- 지침:browser_drag 50 50 150 150
- 동작: (50, 50)에서 (150, 150)으로 드래그합니다.
입력
- 지침:browser_type "hello" true
- 작업: "hello"를 입력하고 Enter 키를 누릅니다.

작업 흐름의 예

웹사이트에 로그인하려고 한다고 가정해 보겠습니다:

서버를 시작합니다:

npx @playwright/mcp@latest --headless

로그인 페이지를 엽니다:

지침:browser_navigate "https://example.com/login"

사용자 이름과 비밀번호를 입력합니다(스냅샷 모드):

지침:browser_type "用户名" "ref1" "myuser" false
지침:browser_type "密码" "ref2" "mypassword" true

로그인(시각적 모드)을 클릭합니다:

모드 전환: 서버 재시작하기와 플러스 --vision
지침:browser_click 300 400

검사 결과:

지침:browser_snapshot(스냅샷 모드) 또는 browser_screenshot(시각적 모드).

주의

스냅샷 모드는 시각적 모드보다 안정적이지만 요소 참조가 필요합니다.
시각적 모델은 좌표가 있는 AI 모델에 적합합니다.
헤더리스 모드는 배치 작업에 적합하며 헤더 모드는 디버깅을 용이하게 합니다.

애플리케이션 시나리오

웹 탐색 및 양식 작성
AI가 자동으로 웹 페이지를 열고 양식을 작성하여 제출하므로 대량 등록이나 로그인 테스트에 적합합니다.
데이터 추출
가격이나 리뷰와 같은 동적 웹 페이지에서 구조화된 데이터를 가져옵니다.
자동화된 테스트
버튼 클릭이나 페이지 이동 등 페이지가 제대로 작동하는지 확인합니다.
지능형 에이전트 상호 작용
AI가 브라우저를 작동시켜 온라인 쇼핑과 같은 복잡한 작업을 완료할 수 있도록 하세요.

QA

스냅샷 모드와 시각적 모드의 차이점은 무엇인가요?
스냅샷 모드는 구조화된 데이터로 작동하며 빠르고 안정적이며, 비주얼 모드는 스크린샷과 좌표를 사용하며 시각적 AI에 적합합니다.
지원되는 브라우저는 무엇인가요?
크롬, 파이어폭스, 웹킷이 지원됩니다.
코드를 작성해야 하나요?
필요 없습니다. 간단한 명령만 보내면 AI가 작동합니다.