[TIL] Claude Code 설정 #3 - Playwright MCP 활용해서 E2E 검증하기

https://helloahram.tistory.com/257 

[TIL] Claude Code 설정 #1 - 자주 사용하는 명령어, 유용한 서비스

https://helloahram.tistory.com/259

[TIL] Claude Code 설정 #2 - Super Claude 설치하고 사용하기

 

.mcp.json 설정 - Playwright MCP 등록 

Playwright 기반 E2E 자동화를 Claude Code 에서 직접 다루기 위해서 

.mcp.json 에 Playwright MCP 서버를 등록해 준다 

 

🐣 처음에는 ExecuteAutomation Playwright MCP를 사용했는데

(Claude Code 한테 Playwright MCP 설치하라니까 저걸로 설치해줌)

동작도 어벙하고 말도 안 들어서 @playwright/mcp로 변경했다 🐣

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y", "@upstash/context7-mcp"
      ]
    },
    "sequential-thinking": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
    },
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ],
      "env": {}
    }
  }
}

 

Super Claude 대신 Plan Mode 사용 

SuperClaude 는 이전 글에서 언급한 것처럼,

행동 지침/ 워크플로/ 명령어를 주입하는 프레임워크이다 

나는 Super Claude 를 안 쓸 거니까, Plan Mode 로 대체했다 

강의에서는 아래와 같은 명령어를 사용해서 "설계만" 요청했다 

/sc:design 이 프로젝트에서 Playwright 를 사용한 E2E 테스트를 작성할건데 테스트 코드는 작성하지 말고 세팅만 해줘

 

commands 

.claude/commands 아래에 커스텀 명령어를 만들어

E2E 테스트 생성 전용 페르소나를 주입한다 

create-e2e-test.md  

요소 정의 -> 테스트 실행 -> 실패 보정 까지 한 흐름으로 자동화하는 용도

# E2E 테스트 생성기
너는 지금부터 Playwright 로 E2E 테스트를 생성하는 QA 전문가야

## 테스트 방식 
- $ARGUMENT 로 입력한 테스트 요소들을 잘 이해해줘 
- Playwright MCP 를 사용해서 테스트를 진행해줘
- 테스트가 전부 끝나면 E2E 테스트를 작성해줘
- 작성한 테스트들을 전부 실행하고, 실패하는 테스트가 있다면 성공할 때까지 개선해줘

 

find-e2e-text.md

"무엇을 테스트해야 하는지" 를 먼저 뽑기 위한 페르소나도 만들었다 

Slash Command 로 잘 활용하면 된다 

# E2E 테스트 생성기

너는 지금부터 Playwright 로 E2E 테스트를 기획하는 QA 전문가야 

## 테스트 방식
- $ARGUMENT 로 입력한 페이지에 접속해줘
- Playwright MCP 를 사용해서 어떤 요소들을 테스트하면 좋을지 나열해줘
- 조사가 끝나면 요소들을 자연어로 마크다운 형태로 정리해줘

 

🐣 공식 문서/ 가이드에서는 보통 $ARGUMENTS 를 예시로 많이 쓴다고 하는데 

강의에서는 $ARGUMENT 로 쓰길래 나도 걍 $ARGUMENT 를 썼다

실수인지 고의인지는 모르겠다 🐣

전체 폴더/ 파일 구조

최종적으로 사용하는 구조는 아래와 같다 

<project-root>/
├─ .claude/
│  ├─ CLAUDE.md
│  └─ commands/
│     ├─ create-e2e-test.md
│     └─ find-e2e-text.md
├─ .mcp.json
├─ playwright.config.(ts|js)
├─ package.json
└─ tests/
   └─

 

한 줄 정리

Claude Code + MCP + Slash Command 조합만 잘 잡아두면
Playwright E2E 자동화의 “기획 → 설계 → 실행” 흐름을 거의 대화로 처리할 수 있다 

 

참고한 영상

https://www.youtube.com/watch?v=feognUBShqI