claude desktop, playwright-mcp을 사용한 E2E 테스트

0. 시작하며 

이전 프로젝트에서 playwright으로 E2E 테스트 도구로 사용한 경험이 있다. 그런데 테스트 코드를 작성하는게 굉장히 번거로웠다.  

페이지에 접속하고, 버튼을 클릭하고, 기대하는 값이 출력되었는지 확인하는 흐름을 모두 코드로 작성해야했다. 

LLM으로 이를 자동화할 수 있기를 기대했는데, 드디어 유사한 기능이 출시되었다. 

 

1. playwright-mcp이란? 

playwright-mcp 를 사용하면, 위의 동작을 프롬프트로 쉽게 제어할 수 있다. 

다음 글에서는 claude desktop을 mcp client으로 사용하여, 프롬프트로 E2E 테스트를 진행하는 방법을 설명하고자 한다. 

 

GIF으로 살펴보는 시뮬레이션 

위의 시뮬레이션은 "검색 페이지"에 접속하여, "검색" 이벤트를 실행한 후, 결과 화면을 캡쳐해달라고 요청한 사례이다. 기대하는 QA 케이스를 프롬프트로 작성하면, claude desktop이 playwright-mcp를 사용하여 브라우저를 제어한다. 

 

셋팅 방법

0. claude desktop 다운로드

https://claude.ai/download 

1. node 설치 후, playwright-mcp 라이브러리 설치

npm install -g playwright-mcp

2. 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"
      ]
    }
  }
}

 

3. 프롬프트 작성

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

사용한 프롬프트는 다음과 같다. 

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

이 명령어를 실행하면, claude가 playwright-mcp를 사용하여 브라우저를 제어했다. 브라우저 제어가 필요할때면 이를 허용할건지 물어보는 알럿이 떴다. 

마치며

MCP 서버가 편리하지만, 로컬 컴퓨터의 제어권을 넘기는 것은 신중해야겠다는 생각이 들었다. 악성 코드가 포함되어 있을 수 있으니, 사용하기 전에 로컬 코드를 살펴보거나, 신뢰할 수 있는 오픈소스를 사용하는게 좋을 것 같다.  

 

참고

https://insight.infograb.net/blog/2025/05/28/playwright-mcp/#1-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%9A%94%EC%B2%AD-%ED%94%84%EB%A1%AC%ED%94%84%ED%8A%B8-%EC%9E%85%EB%A0%A5