claudekit / tools / playwright
[ MCP · Development ]

Playwright MCP

Microsoft 공식 MCP 서버. 접근성 트리 기반으로 브라우저를 제어하여 스크린샷 없이도 정확한 웹 자동화를 수행.

microsoft/playwright-mcp ·updated
$ /plugin install playwright copy

Microsoft 공식 MCP 서버

왜 필요한가?

웹 자동화나 E2E 테스트를 위해 브라우저를 제어하려면 복잡한 셀렉터와 스크립트가 필요합니다. Playwright MCP는 접근성 트리(Accessibility Tree) 기반으로 동작하여, 스크린샷이나 비전 모델 없이도 정확하고 결정론적인 브라우저 제어를 제공합니다.

주요 기능

  • 접근성 트리 기반 상호작용 — 픽셀이 아닌 DOM 구조를 기반으로 정확한 요소 탐색 및 조작
  • 비전 모델 불필요 — 구조화된 데이터만 사용하므로 추가 모델 없이 빠르게 동작
  • 결정론적 도구 — 스크린샷 기반의 모호성을 제거하고 일관된 결과 보장
  • 브라우저 자동화 — 페이지 이동, 클릭, 폼 입력, 파일 업로드 등 웹 상호작용 자동화
  • 코드 생성 — 수행한 작업을 Playwright 테스트 코드로 자동 변환

Before / After

Before: 셀렉터 작성 → 브라우저에서 확인 → 스크립트 수정 → 재실행 → 반복

After: “로그인 폼에 테스트 계정으로 로그인해줘” → 접근성 트리로 자동 요소 탐색 → 정확한 자동화 실행

실제 사용 시나리오

  1. 웹 앱의 사용자 시나리오를 자연어로 설명하면 자동으로 E2E 테스트 수행
  2. 폼 입력, 버튼 클릭, 페이지 이동 등을 자동화하여 QA 프로세스 가속화
  3. 수행한 브라우저 작업을 Playwright 테스트 코드로 변환하여 CI/CD에 통합
§ 5

See also

same category · curated
[01]
[Tool] Paseo · 내 컴퓨터에 데몬을 띄우고 데스크톱, 폰, 웹, 터미널 어디서든 접속해 코딩 에이전트를 굴리는 자체 호스팅 오케스트레이터. Claude Code를 비롯한 여러 CLI 에이전트를 손대지 않고 그대로 실행하며, 모바일 앱은 데스크톱과 같은 기능을 제공한다.
tool · claudekit.io / tools / paseo
[02]
[Tool] Orca · 여러 코딩 에이전트를 병렬로 굴리는 ADE(Agent Development Environment) 데스크톱 앱. 각 에이전트를 격리된 git worktree에서 동시에 실행하고, 결과를 나란히 비교해 원하는 것을 골라 머지한다. Claude Code, Codex, Grok 등 30여 개 CLI 에이전트를 자신의 구독으로 그대로 사용한다.
tool · claudekit.io / tools / orca
[03]
[Skill] Matt Pocock's Skills · Matt Pocock이 자기 .claude 디렉토리에서 실제로 쓰는 Claude Code 스킬 모음. 정렬(grilling), 스펙, TDD, 코드 리뷰, 버그 진단, 아키텍처 개선 등 실전 엔지니어링 워크플로를 20여 개 스킬로 묶었다. skills.sh로 편집 가능하게 설치하거나 플러그인으로 읽기 전용 설치한다.
tool · claudekit.io / tools / mattpocock-skills
§ 6

자주 묻는 질문

자주 묻는 질문
§ 6.1
Playwright MCP는 무엇인가요?
Microsoft 공식 MCP 서버로, 접근성 트리(Accessibility Tree) 기반으로 동작해 스크린샷이나 비전 모델 없이도 정확하고 결정론적인 브라우저 제어를 제공합니다.
§ 6.2
어떤 환경에서 동작하나요?
Claude Code, Claude Desktop, VS Code, Cursor에서 동작합니다.
§ 6.3
어떻게 설치하나요?
Claude Code에서 `/plugin install playwright`로 설치합니다. claude-plugins-official 마켓플레이스에 포함되어 있습니다.
§ 6.4
스크린샷 기반 도구와 무엇이 다른가요?
픽셀이 아닌 DOM의 접근성 트리를 기반으로 요소를 탐색·조작하므로, 비전 모델 없이도 빠르고 결정론적으로 동작합니다. 스크린샷 기반의 모호성을 제거해 일관된 결과를 보장합니다.
§ 6.5
주요 기능은 무엇인가요?
접근성 트리 기반 요소 상호작용, 페이지 이동·클릭·폼 입력·파일 업로드 등 브라우저 자동화, 수행한 작업을 Playwright 테스트 코드로 자동 변환을 지원합니다.