Last edited: February 24, 2026
E2E 테스트를 작성할 때 가장 번거로운 것은 올바른 Locator를 찾는 것과 실패 원인을 파악하는 것이다.
AI 코딩 어시스턴트(Claude Code 등)가 실제 브라우저를 직접 조작하면서 이 과정을 도와줄 수 있는데, 방법이 두 가지나 있다. Playwright MCP(MCP Server)와 playwright-cli(Skill)다.
| 항목 | playwright-cli (Skill) | @playwright/mcp (MCP Server) | Test Runner |
|---|---|---|---|
| 정체 | AI가 Bash 명령어로 브라우저 제어 | AI가 네이티브 도구로 브라우저 제어 | 기존 Playwright 테스트 실행기 |
| 설치 | Skill 추가만 하면 됨 | MCP 서버 설정 필요 | @playwright/test 패키지 |
| 코드 생성 | 매 액션마다 자동 출력 | --codegen 옵션 필요 | 해당 없음 |
| 스냅샷 | YAML 파일로 자동 저장 | 호출 시에만 | 실패 시 스크린샷 |
| API Mocking | route 명령 한 줄 | 수동 설정 필요 | page.route() 코드 작성 |
| 안정성 | 높음 (독립 프로세스) | MCP 연결 상태에 의존 | 높음 |
| Canvas/SVG | 스크린샷으로 확인 | Vision 모드 지원 | 코드로 처리 |
playwright-cli fill e1 "user@example.com"
# 출력: await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com');
playwright-cli click e3
# 출력: await page.getByRole('button', { name: 'Sign In' }).click();
playwright-cli open http://localhost:3000
playwright-cli snapshot
# → .playwright-cli/page-2026-02-24T10-30-00.yml 자동 저장
playwright-cli route "**/api/users" --body='[{"id":1}]' --content-type=application/json
playwright-cli unroute
playwright-cli cookie-set auth_token my-token-value
playwright-cli state-load ./e2e/.auth/user.json
playwright-cli localstorage-list
Canvas, 복잡한 SVG, 커스텀 렌더링 요소처럼 접근성 트리에 잡히지 않는 시각적 요소를 다룰 때는 MCP의 Vision 모드가 필요하다.
browser_generate_locator, browser_verify_element_visible 같은 전용 검증 도구는 MCP에서만 제공한다.
결론 테이블, 폼, 네비게이션 같은 일반적인 웹 UI는 CLI의 접근성 스냅샷만으로 충분하다. Vision 모드가 필요한 차트/Canvas UI에서만 MCP를 꺼내자.
| 상황 | 추천 도구 | 이유 |
|---|---|---|
| 테스트 코드 작성 | playwright-cli | 매 액션마다 Playwright 코드 자동 생성 |
| Locator 탐색 | playwright-cli | 스냅샷 파일로 구조 파악이 빠름 |
| API Mocking 테스트 | playwright-cli | route 명령 한 줄로 설정 |
| 실패 테스트 디버깅 | playwright-cli | 스냅샷 파일 비교로 상태 추적 용이 |
| Canvas/SVG 검증 | MCP (Vision 모드) | 접근성 트리로 잡히지 않는 요소 처리 |
| 테스트 실행 (전체 스위트) | Test Runner | 안정적, 반복 가능, 리포트 자동 생성 |
| CI/CD 파이프라인 | Test Runner | 헤드리스, 리트라이, 자동화 |
playwright-cli open http://localhost:3000
playwright-cli cookie-set auth_token my-token
playwright-cli goto http://localhost:3000/dashboard
playwright-cli snapshot
playwright-cli click e3
# 출력: await page.getByRole('link', { name: '매출 관리' }).click();
import { test, expect } from '@playwright/test';
test('사이드바에서 매출 관리 페이지로 이동', async ({ page }) => {
await page.goto('/dashboard');
await page.getByRole('link', { name: '매출 관리' }).click();
await expect(page).toHaveURL(/.*revenue/);
});