Playwright MCP와 Copilot을 활용한 코드 접근 없이 테스트 생성
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- QA 테스터, 외부 웹사이트 테스트 담당자, 제한된 코드 접근 환경의 개발자
- 중급 이상의 테스트 자동화 경험자 (Playwright, GitHub Copilot 사용 가능)
핵심 요약
- Playwright MCP(Model Context Protocol)를 통해 GitHub Copilot이 브라우저와 직접 상호작용 가능
@playwright/test기반 테스트 생성 가능- 자연어 지시어로 테스트 생성 가능 (예: "Garfield 영화 검색 테스트 생성")
- ARIA 스냅샷, 페이지 DOM 분석을 통한 UI 요소 자동 식별
page.getByRole('textbox', { name: 'Search Input' })와 같은 Playwright API 활용
섹션별 세부 요약
1. 기존 Copilot의 한계
- 소스 코드 접근 필요
- 브라우저 UI 동작 분석 불가
- UI 상호작용 정보 부족
- 정확한 테스트 생성 어려움
2. Playwright MCP 도입
- MCP 역할
- 브라우저와의 연결, ARIA 스냅샷 수집, DOM 분석
- Copilot과의 협업
Playwright MCP를 통해 실시간 브라우저 세션 실행page.goto()등 Playwright API 자동 생성
3. 테스트 생성 프롬프트 예시
.github/prompts/generate.prompt.md파일 활용- 지시사항:
You are a playwright test generatorDO run steps one by one using the tools provided by the Playwright MCP- 테스트 파일 생성 위치
tests/디렉토리에 저장
4. 실제 테스트 실행 예시
- 명령어 실행 시
Cloud 3.5 Sonnet모델을 통해 브라우저 실행- 검색 필드 위치 분석
page.snapshot()활용- 생성된 테스트 코드
```typescript
await page.getByRole('textbox', { name: 'Search Input' }).fill('Garfield');
await page.getByRole('textbox', { name: 'Search Input' }).press('Enter');
await expect(page.getByRole('heading', { name: 'The Garfield Movie', level: 2 })).toBeVisible();
```
결론
- MCP + Copilot 활용 시
- 코드 접근 없이 자연어로 테스트 생성 가능
@playwright/test기반 테스트 자동 생성 및 실행- 실무 적용 팁
.github/prompts/generate.prompt.md에 상세한 지시사항 정의- GitHub MCP를 통한 Pull Request 자동 생성 가능
- 동영상 튜토리얼 참고 (YouTube 링크 확인)