Claude code With MCP - Playwright

서론

요즘 MCP들을 붙이는 재미에 빠져 있다.

어떻게 보면 과하다고 느껴질 수 있는 문장인 “MCP는 마법 그 자체이다.”가 지금은 조금 이해가 된다고 해야 할까?

현재는 MCP Server들이 많이 나와있어 상상으로만 해왔던 노션이나 슬랙 등과 LLM의 연동 작업들을 할 수 있는 환경이 구성 되어있다.

MCP에 대한 국내 레퍼런스들도 많이 생겨나고 있고, 성숙도도 점차 갈 수록 올라가는 느낌이다.

이번 글에서는 내가 주로 사용하는 MCP Server 중 Playwright의 간단한 개념과 설치 방법, 그리고 사용 예시들을 이야기 해보려고 한다.

앞으로도 여유가 된다면 꾸준히 해당 MCP 시리즈를 작성 해보겠다.

MCP 서버 추가 명령어

claude mcp add <이름> <명령어> [인자…]

• -s 또는 —scope 플래그로 설정 저장 위치를 지정할 수 있음.
  • local(기본값) : 현재 프로젝트에서만 사용
  • project : 프로젝트 루트의 .mcp.json 파일을 통해 팀 전체와 공유
  • user : 모든 프로젝트에서 사용
• -e 또는 —env 플래그로 환경 변수를 설정할 수 있다.
  • ex : -e KEY=valude
• 만약 같은 이름의 MCP 서버가 여러 스코프에 있다면 우선 순위는 user, project, local 순이다.

Playwright MCP

개념

Playwright는 웹 브라우저 자동화 프레임워크이며, 크롬/사파리/파이어폭스 같은 브라우저를 열어서 UI 테스트, 스크래핑, 자동화 작업 수행 가능하다.

Playwright MCP는 Playwright 기능을 MCP 서버 형태로 구현한 것이다.

즉, Claude 같은 AI 도구가 Playwright MCP 서버에 연결한다면 웹 페이지 열기, 버튼 클릭, 입력, 드래그 같은 UI 동작 수행, API 호출 (GET, POST 등) 등을 자유롭게 수행 할 수 있게 된다.

Playwright MCP는 웹 브라우저 자동화를 위해 여러 강력한 기능들을 제공 하는데, 자세한 기능들을 다음과 같다.

1. Web 자동화 관련 도구 (UI 기반)

• playwright_navigate: URL로 브라우저 이동.
• playwright_click, playwright_drag, playwright_hover: 페이지 내 요소 클릭, 드래그, 호버 등 인터랙션 수행.
• playwright_screenshot: 화면 캡처 기능.
• playwright_evaluate: 브라우저 콘솔에서 JavaScript 실행.
• Web scraping: 페이지 내용 추출 (HTML 또는 텍스트) 도구 제공.
• Console log monitoring: 콘솔 로그 가져오기.
• Code Generation 도구: 코드 생성 기능 제공

2. Code Generation 관련 도구

• start_codegen_session: 코드 생성 세션 시작 (저장 경로, 주석 포함 등 옵션 설정).
• get_codegen_session: 진행 중인 세션 상태 조회.
• end_codegen_session: 세션 종료 및 테스트 파일 생성.
• clear_codegen_session: 세션 초기화(파일 생성 없이).

3. 웹 API 자동화 도구 (HTTP 요청)

• Playwright_get: GET 요청.
• Playwright_post: POST 요청 (JSON 데이터, 토큰, 헤더 포함 가능).
• Playwright_put: PUT 요청.
• Playwright_patch: PATCH 요청.
• Playwright_delete: DELETE 요청.

더 자세한 사항은 아래 Git 주소를 참고하자.

Playwright MCP Git 주소

설치 및 Claude Code 연결

# 서버 설치
npm install -g @executeautomation/playwright-mcp-server

# Claude Code 연결(project)
claude mcp add playwright -s project -- npx @executeautomation/playwright-mcp-server

사용 예시

가장 간단하게 브라우져 이동과 클릭, 그리고 API 자동화 기능을 사용한 예시이다.

MCP를 사용할 때 클로드 코드가 적절하게 컨텍스트를 파악하여 사용 하는 경우도 있지만, MCP를 사용하게 하고 싶으면 직접 명시하는게 좋다.

먼저 간단하게 브라우져 이동 및 화면 캡쳐 기능을 사용 해보자.

구글 홈페이지에 가서 스크린샷을 찍어줘.

위 명령어를 통해 아래와 같이 실제 스크린샷을 찍어 저장을 시켜준다.

그 다음으로는 조금 더 복잡한 요구사항을 아래와 같이 요청 해보자.

구글 홈페이지에 가서 주어진 정보로 로그인을 하고, 메일함에 들어가서 첫번째 메일의 내용을 알려줘.

위 요구 사항도 무리없이 수행 하는걸 아래 사진을 통해서 확인 할 수 있다.

이 Playwright를 이용하여 활용할 수 있는 부분은 무궁무진 하다.

기능 구현 후 통합 시나리오를 주거나, 기능 명세 PRD를 기준으로 자동 통합 테스트 및 테스트 문서를 같이 도출 할 수도 있다.

아래는 클로드 코드가 Playwright를 사용하여 진행한 통합 테스트간 남긴 문서이며, 테스트 진행 했던 항목들과 해당 상세 페이지에 실제 테스트 영상까지 캡쳐하여 올려주었다.

이걸 보고 육성으로 “미친세상이다…”를 말했다.

또한 위 경우 외에도 피그마 MCP를 추가적으로 사용하여 피그마에 있는 와이어프레임을 기반으로 퍼블리싱을 진행 할 때 스크린샷 기능을 사용하여서 자체적으로 피그마의 와이어프레임의 디자인과 비교하며 디자인을 맞춰갈 수 있도록 작업을 명할 수도 있다.

이 부분은 추후 블로그 글로 작성 하겠다.

웹 개발자에게는 사실 사용을 안할 이유가 없는 MCP라고 개인적으로 생각을 한다.

++ 추가로 /context 슬래시 명령어로 해당 MCP가 어느 정도 token이 지금도 연결간 사용 되고 있는지를 아래와 같이 확인 할 수 있다.