Playwright MCP란(Claude Code)

Playwright MCP는 LLM이 자연어 명령으로 실제 브라우저를 제어할 수 있게 해주는 도구이다.
스크린샷 대신 접근성 트리를 사용하여 빠르고 정확한 웹 자동화를 구현한다.

개발자라면 누구나 이런 불안감과 딜레마를 겪습니다. End-to-End(E2E) 테스트는 제품의 품질을 보장하는 가장 확실한 방법이지만, 작성하고 유지보수하는 데 너무나 많은 시간과 노력이 필요하기 때문이죠.

E2E Test는 애플리케이션이 예상대로 동작하는지 확인하는 테스트를 말한다. 

사용자 사용 시나리오을 시뮬레이션하며 제품의 동작을 테스트 하는 것! 

이 작업을 AI가 대신 해줄 수 없을까? 라는 생각을 해본 적이 있다면 Playwright MCP가 바로 그답이 될 수 있다. Playwright MCP는 AI가 실제 브라우저를 직접 조작할 수 있게 해주는 도구이다.

개발자가 자연어로 이 사이트에 가서 로그인하고 데이터를 확인해줘 라고 말하면 AI가 실제로 브라우저를 열어서 그 작업을 수행한다.

https://github.com/microsoft/playwright-mcp

1. Playwright 설치: 프로젝트에 Playwright 라이브러리를 설치합니다.
2. pnpm add -D @playwright/test playwright
3. MCP 등록: Claude에게 Playwright MCP의 존재를 알려줍니다.
4. claude mcp add playwright npx -- @playwright/mcp@latest

이렇게 순서대로 터미널창에 입력합니다.

그러면 playwright가 올바르게 연결이 된 것을 볼 수 있습니다.

간단하게 playwright 예시로 Prompt로 지금까지 만든 project에다 

"네가 만든 테스트를 playwright MCP를 사용해서 직접 실행해줘. 테스트 결과를 나에게 보고해줘. 만약 테스트가 실패한다면, 실패한 지점의 스크린샷과 함께 에러 메시지를 알려줘."

라고 이 명령을 실행하면 실제 웹브라우저 창이 나타나게 됩니다. 그리고 테스트에 사용했던 실패 스크린샷 결과 보고서등 출력하게됩니다.

보면 스샷 차례대로 명령어 프롬프트를 이력하고 palywright가 실행되면서 로컬 화면이 자동으로 뜨면서 테스트진행하게됩니다. 

그리고 마지막스샷을 보시면 여러 에러기록과 스크린샷 그리고 동영상?도 있네요? ㅎㅎㅎ

이렇게 AI 에게 테스트코드를 짜고 실행하는걸  간단하게 playwright MCP로 자동화 테스트 진행해봤습니다.