Playwright MCP 튜토리얼 – Claude Desktop에 브라우저 자동화 연결하기

playwright-mcp를 Claude Desktop에 연결하면 모델이 웹 페이지를 읽고 클릭·입력·검증하는 브라우저 에이전트로 동작한다. 이 튜토리얼은 안전한 데모 사이트에서 연결을 확인하고, 실제 팀 업무로 확장하기 전에 필요한 통제 지점을 정리한다.

1. MCP 서버 등록

Claude Desktop의 Settings > Developer > Edit Config에서 설정 파일을 연다. macOS에서는 ~/Library/Application Support/Claude/claude_desktop_config.json이다.

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

--isolated는 작업 간 쿠키와 로컬 스토리지 공유를 피하는 기본 선택이다. 설정을 저장한 뒤 Claude Desktop을 완전히 종료하고 다시 연다.

프로덕션 서비스가 아니라 Playwright TodoMVC 데모를 사용한다.

Playwright MCP 도구가 연결되어 있다면
https://demo.playwright.dev/todomvc/ 를 열고,
"MCP 연결 확인", "입력 테스트", "결과 검증" 세 할 일을 추가한 뒤
세 항목이 보이는지 확인해줘.

에이전트는 페이지 탐색, 접근성 스냅샷 수신, 입력 필드 식별, 텍스트 입력, 결과 확인 순으로 도구를 호출한다. 결과만 보지 말고 호출 로그에서 의도한 페이지와 요소가 선택됐는지 확인한다.

헤드리스 실행이 필요하면 args에 --headless를 추가한다. 사람이 실시간으로 동작을 확인해야 하는 초기 설정과 민감한 흐름에서는 화면이 보이는 실행이 낫다.