Playwright MCP가 사이트를 탐색하고 테스트를 생성하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자와 테스트 자동화 담당자에게 유용
• 중급~고급 수준의 이해가 필요 (Playwright 및 자동화 테스트 경험)

핵심 요약

• Playwright MCP(Model Context Protocol)를 사용해 앱을 자동 탐색하고 테스트 코드를 생성 가능
• Edge case 및 버그 탐지 (예: 'Star Wars' 검색 시 'Kill' 결과 오류 발견)
• @playwright/test 기반 테스트 생성 시 역할 기반 로케이터(getByRole) 및 자동 재시도 기능 사용

섹션별 세부 요약

1. MCP 설정 및 프롬프트 준비

• .vscode 폴더 내 mcp.json 파일에서 Playwright MCP 서버 실행

```json

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

```

• .github/generate_tests.prompt.md 파일에 다음 내용 입력:

- tools: ['playwright']

- mode: 'agent'

- 테스트 생성 시 수동 스크립트 작성 금지, 자동 탐색 및 검증 요구

2. Agent 모드 실행 및 탐색

• VS Code에서 Agent 모드 활성화 후 Explore 명령어 입력
• 자동 탐색 과정:

- 검색 기능 테스트 (예: 'Star Wars' 입력 시 'Kill' 오류 발견)

- 다크/라이트 모드 토글 및 네비게이션 링크 클릭

- 탐색 결과 요약: Homepage, Search, Movie Details, Theme Toggle, Navigation

3. 테스트 생성 및 실행

• MCP가 Playwright TypeScript 테스트 파일 생성 (예: test('Search for a movie by title', ...)):

- @playwright/test 모듈 사용

- 역할 기반 로케이터(getByRole) 및 자동 재시도 기능 적용

- 검색 결과 검증: 헤딩, 리스트, 영화 제목 일치 여부 확인

• 생성된 테스트 실행 시 성공 (✅)
• Trace Viewer를 통해 탐색 과정 시각화: 'Star Wars' 검색 → 'Deadpool' 결과 클릭 → 영화 상세 페이지 확인

결론

• Playwright MCP는 수동 스크립트 작성 없이 자동 테스트 생성 가능
• Edge case 및 버그 탐지 (예: 'Star Wars' 검색 오류)와 테스트 커버리지 확보에 효과적
• @playwright/test 기반 테스트 생성 시 역할 기반 로케이터 및 자동 재시도 기능 활용 권장
• Claude Sonnet 3.7 모델 사용 예시로, 다른 모델/버전도 시도 가능 (예: test('Search for a movie by title', ...) 생성)