What is Playwright Mcp Tutorial

Playwright MCP Tutorial is an automation testing project designed to test user registration and login processes on the AutomationExercise website using the Playwright MCP (Model Context Protocol) tool.

Use cases

Use cases include automating user registration and login tests for web applications, verifying user flows, and ensuring the functionality of web applications across different browsers.

How to use

To use the Playwright MCP Tutorial, clone the repository, install the dependencies using npm or yarn, and install the Playwright browsers. You can run tests in various modes including headless, headed, UI, and debug modes.

Key features

Key features include multi-browser support (Chrome, Firefox, Safari), parallel execution for performance optimization, automatic screenshot/video capture on failure, slow mode for demonstrations and debugging, and popup/ad blocking for a stable testing environment.

Where to use

Playwright MCP Tutorial can be used in web development and testing environments where automated testing of user interactions, such as registration and login, is required.

Playwright MCP Tutorial

AutomationExercise 웹사이트에서 회원가입 및 로그인 테스트를 위한 Playwright 자동화 테스트 프로젝트입니다.

📋 프로젝트 개요

이 프로젝트는 Playwright MCP(Model Context Protocol) 도구를 활용하여 실제 웹사이트에서 사용자 회원가입부터 계정 삭제까지의 전체 플로우를 자동화 테스트하는 튜토리얼 프로젝트입니다.

🎯 테스트 대상

• 웹사이트: AutomationExercise

🚀 시작하기

필수 요구사항

• Node.js (v20 이상)
• npm 또는 yarn

설치

1. 저장소 클론

git clone <repository-url>
cd playwright-mcp-tutorial

2. 의존성 설치

npm install

3. Playwright 브라우저 설치

npx playwright install

🧪 테스트 실행

기본 테스트 실행

# 헤드리스 모드로 테스트 실행
npm test

# 브라우저를 보면서 테스트 실행
npm run test:headed

# UI 모드로 테스트 실행 (대화형)
npm run test:ui

# 디버그 모드로 테스트 실행
npm run test:debug

느린 모드 테스트 (시연용)

# 1초 지연으로 Chrome에서 실행
npm run test:slow

# 느린 모드 + UI
npm run test:slow:ui

# 느린 모드 + 디버그
npm run test:slow:debug

📁 프로젝트 구조

playwright-mcp-tutorial/
├── tests/                          # 테스트 파일들
│   ├── user-registration-login.spec.ts  # Playwright MCP 테스트 (TypeScript)
│   └── signup-login.spec.js            # 예제 테스트 (JavaScript)
├── scenario/                       # 테스트 시나리오 문서
│   └── signup-login.md             # 회원가입/로그인 시나리오
├── test-results/                   # 테스트 결과 (자동 생성)
├── playwright-report/              # HTML 리포트 (자동 생성)
├── playwright.config.ts            # Playwright 설정
├── package.json                    # 프로젝트 설정 및 의존성
└── README.md                       # 프로젝트 문서

🔧 설정

Playwright 설정 (playwright.config.ts)

• 멀티 브라우저 지원: Chrome, Firefox, Safari
• 병렬 실행: 성능 최적화
• 스크린샷/비디오: 실패 시 자동 캡처
• 느린 모드: 시연 및 디버깅용
• 팝업/광고 차단: 안정적인 테스트 환경

🛠️ 개발 가이드

디버깅 팁

# 특정 테스트만 실행
npx playwright test user-registration-login.spec.ts

# 브라우저 개발자 도구와 함께 실행
npx playwright test --debug

# 특정 브라우저에서만 실행
npx playwright test --project=chromium

📊 리포트

테스트 실행 후 HTML 리포트가 자동으로 생성됩니다:

# 리포트 보기
npx playwright show-report

리포트에는 다음이 포함됩니다:

• 테스트 결과 요약
• 실패한 테스트의 스크린샷
• 실행 비디오 (실패 시)
• 상세한 실행 로그