Playwright MCP(Model Context Protocol)

2025. 7. 3. 16:02ㆍAI/Claude ai

Playwright MCP(Model Context Protocol)에 대해 설명에 대해서 클로드 AI에게 물어본 내역입니다.

단계별 분석

먼저 Playwright MCP의 현재 상태를 파악하고, 어떤 기능들이 제공되는지 조사해보겠습니다.더 구체적인 기능 목록을 확인해보겠습니다.GitHub에서 더 구체적인 기능 목록을 확인해보겠습니다.이제 추가로 ExecuteAutomation 버전의 특별한 기능들을 확인해보겠습니다.## Playwright MCP의 주요 기능 분석

조사한 내용을 바탕으로, Playwright MCP는 두 가지 주요 구현체가 있습니다:

1. Microsoft 공식 Playwright MCP (@playwright/mcp)

2. ExecuteAutomation 버전 (@executeautomation/playwright-mcp-server)

🎯 핵심 개념

Playwright MCP는 Model Context Protocol을 사용하여 브라우저 자동화 기능을 제공하는 서버로, LLM이 실제 브라우저 환경에서 웹 페이지와 상호작용할 수 있게 해줍니다.

주요 특징:

  • 접근성 트리 기반: 스크린샷 대신 브라우저의 접근성 트리를 사용하여 빠르고 가볍게 동작
  • LLM 친화적: 비전 모델 없이도 구조화된 데이터로만 작동
  • 결정적 도구 적용: 스크린샷 기반 접근법의 모호함을 피함

🔧 Microsoft 공식 버전의 주요 기능

브라우저 상호작용 도구

Microsoft 공식 버전은 다음과 같은 브라우저 상호작용 도구들을 제공합니다:

기본 상호작용:

  • browser_click: 웹 페이지 요소 클릭
  • browser_hover: 요소 위에 마우스 호버
  • browser_drag: 두 요소 간 드래그 앤 드롭
  • browser_type: 편집 가능한 요소에 텍스트 입력
  • browser_select_option: 드롭다운 옵션 선택

페이지 캡처 및 분석:

  • browser_snapshot: 현재 페이지의 접근성 스냅샷 캡처
  • browser_take_screenshot: 페이지 스크린샷 촬영
  • browser_console_messages: 콘솔 메시지 반환

내비게이션:

  • browser_navigate: URL로 이동
  • browser_navigate_back: 이전 페이지로 이동
  • browser_navigate_forward: 다음 페이지로 이동

탭 관리:

  • browser_tab_list: 브라우저 탭 목록
  • browser_tab_new: 새 탭 열기
  • browser_tab_select: 인덱스로 탭 선택
  • browser_tab_close: 탭 닫기

고급 기능:

  • browser_file_upload: 파일 업로드
  • browser_pdf_save: 페이지를 PDF로 저장
  • browser_wait: 지정된 시간 대기
  • browser_resize: 브라우저 창 크기 조정
  • browser_handle_dialog: 브라우저 대화상자 처리

비전 모드 도구 (옵션)

--vision 플래그를 사용하면 스크린샷 기반 시각적 상호작용을 위한 추가 도구들을 사용할 수 있습니다:

  • browser_screen_move_mouse: 마우스를 특정 위치로 이동
  • browser_screen_capture: 스크린샷 캡처
  • browser_screen_click: 좌표 기반 클릭
  • browser_screen_drag: 좌표 기반 드래그
  • browser_screen_type: 텍스트 입력

🚀 ExecuteAutomation 버전의 추가 기능

API 자동화 도구

ExecuteAutomation 버전은 브라우저 자동화 외에도 API 테스팅 기능을 제공합니다:

HTTP 메소드 지원:

  • playwright_get: GET 요청 수행
  • playwright_post: POST 요청 수행 (Bearer 토큰 및 커스텀 헤더 지원)
  • playwright_put: PUT 요청 수행
  • playwright_patch: PATCH 요청 수행
  • playwright_delete: DELETE 요청 수행

API 테스팅 특징:

  • JSON 응답 데이터 반환
  • HTTP 상태 코드 확인
  • Bearer 토큰 인증 지원
  • 커스텀 헤더 설정 가능

🛠️ 설치 및 설정

Microsoft 공식 버전

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

ExecuteAutomation 버전

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

🎭 운영 모드

1. 스냅샷 모드 (기본)

  • 브라우저의 접근성 트리를 사용하여 빠르고 가벼운 동작
  • 구조화된 텍스트 데이터로 작업
  • 대부분의 웹 자동화 작업에 권장

2. 비전 모드

  • 스크린샷 기반 시각적 상호작용 지원
  • 좌표 기반 상호작용 가능
  • 접근성 트리로 처리하기 어려운 복잡한 UI에 유용

3. 프로파일 관리

  • 지속적 프로파일: 로그인 정보 등이 브라우저 프로파일에 저장되어 세션 간 유지
  • 격리 모드: 각 세션이 독립적으로 실행되어 상태가 세션 간 공유되지 않음

🔄 실제 사용 시나리오

E2E 테스팅

사용자는 평문 영어 명령으로 브라우저 동작과 API 호출을 자동화할 수 있어, 복잡한 스크립팅 없이도 테스트를 작성할 수 있습니다.

자동화된 테스트 생성

에이전트 모드에서 MCP가 자율적으로 웹사이트를 탐색하고 주요 기능을 발견하여 실행 가능한 테스트를 생성할 수 있습니다.

통합 환경 지원

  • Claude Desktop
  • VS Code (GitHub Copilot과 연동)
  • Cursor IDE
  • Cline

📈 장점과 한계

장점:

  • 자연어 명령으로 브라우저 자동화 가능
  • 접근성 트리 기반으로 빠르고 안정적
  • 다양한 브라우저 지원 (Chromium, Firefox, WebKit)
  • API 테스팅 통합 지원 (ExecuteAutomation 버전)

현재 한계:

  • OAuth, 멀티파트 폼, 바이너리 입력 등 복잡한 API 요청은 아직 지원하지 않음
  • 일부 고급 브라우저 기능은 제한적

Playwright MCP는 AI 기반 브라우저 자동화 및 테스팅의 혁신적인 도구로, 특히 자연어 명령을 통한 직관적인 테스트 작성과 자동화된 웹 상호작용을 가능하게 합니다.

댓글 0

티스토리툴바