claude desktop + playwright-mcp 체험 후기

예전 프로젝트에서 playwright으로 E2E 테스트 코드를 짰을때 정말 유용했다. 그런데 코드를 작성하기 너무 귀찮았다. 

LLM 으로 자동으로 짤 수 있는 날을 기다렸는데... 드디어 비슷한 기능이 나왔다! 

바로바로 playwright-mcp ! 

claude desktop에 playwright-mcp를 연결한 후, 실행한 화면을 먼저 살펴보자. 

프롬프트로 기대하는 동작을 설명하면, playwright가 자동으로 브라우저에서 기대한 동작을 실행한다. 

 

어떤건지 gif으로 살펴보자!

이번 실험에서는 봇으로 걸려버렸지만, 잘 사용할 수 있어보인다.

어떻게 하는거지? 

1. claude desktop을 설치한다.

https://claude.ai/download 

 

2. node를 설치하고, playwright-mcp 라이브러리를 설치하자 

npm install -g playwright-mcp

 

3. claude_desktop_config.json을 수정하자. 

"claude > 설정 > 개발자 > 설정 편집"을 누르면, claude_desktop_config.json이 있는 finder가 실행된다. 

/Users/americanopeople/Library/Application Support/Claude/claude_desktop_config.json

 

 

claude_desktop_config.json에 mcpServers 정보를 추가한다. 

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

4. 준비 끝~ 

그러고 나면 클로드 프롬프트창에 MCP tools가 뜬다. 

질문해보자! 

"https://www.expedia.co.kr/?locale=ko_KR"에 접속해서, 발리 호텔을 검색해줘. 그리고 나서 검색 결과를 캡쳐해서 보여줘. 너는 나랑 한국어로 대화해야해.

난 이런 프롬프트를 보내봤다. 그랬더니 알아서 playwright 기반으로 작업이 진행되었다.

claude가 내 컴퓨터를 제어하는 상황이 오면, 허용할건지 확인하는 알럿창이 떴다. 

허용할때마다 승인을 하면서 어떻게 진행되는지 지켜봤다. 

 

후기 

mcp 서버를 너무 믿고 쓰면, 나중에 악의적인 프로그램이 실행될 수도 있겠단 생각이 들었다. 그래서 claude desktop에서도 mcp에서 로컬 도구를 사용할 때, 주의하라는 알럿이 뜬다. 

그래서 악의적인 프로그램이 실행되도 상관없는 컨테이너 환경에서 맘편히 AI 프로그램을 실행하고 싶단 생각이 들었다. 

+ 나중에 microsoft/playwright-mcp 의 동작원리도 연구해봐야지! 

GitHub - microsoft/playwright-mcp: Playwright MCP server