Imported from ldaehi0205/claude-post-demo (.claude/skills/e2e-test/SKILL.md). Install upstream with npx skills add ldaehi0205/claude-post-demo --skill e2e-test. Copyright stays with the author.

E2E 테스트 (Playwright MCP)

Playwright MCP를 사용해 브라우저를 직접 조작하여 테스트합니다.

사전 조건

• 개발 서버 실행 중: npm run dev (localhost:3000)
• Playwright MCP 설정됨: .mcp.json

테스트 시나리오

1. 로그인 테스트

1. localhost:3000/login 열기
2. 이메일 입력: test@example.com
3. 비밀번호 입력: password123
4. 로그인 버튼 클릭
5. 헤더에 사용자 이름 표시 확인

2. 게시글 작성 테스트

1. 로그인 상태 확인 (필요시 로그인)
2. /posts/new 이동
3. 제목 입력: "테스트 게시글"
4. 내용 입력: "테스트 내용입니다."
5. 작성 버튼 클릭
6. 게시글 상세 페이지로 이동 확인

3. 게시글 수정 테스트

1. 로그인 상태 확인 (작성자 계정)
2. 게시글 상세 페이지 이동
3. 수정 버튼 클릭
4. 제목/내용 수정
5. 저장 버튼 클릭
6. 변경사항 반영 확인

4. 게시글 삭제 테스트

1. 로그인 상태 확인 (작성자 계정)
2. 게시글 상세 페이지 이동
3. 삭제 버튼 클릭
4. 확인 다이얼로그 처리
5. 목록 페이지로 이동 확인

5. 권한 테스트

1. 비로그인 상태에서 /posts/new 접근 → /login 리다이렉트 확인
2. 다른 사용자 게시글 수정 페이지 접근 → 접근 거부 확인

화면별 확인 포인트

헤더 (공통)

• 로고 "게시판" 표시
• GNB: 홈, 게시글 목록, 글쓰기(로그인시만)
• 로그인/로그아웃 버튼

로그인 페이지 (/login)

• 이메일 입력 필드
• 비밀번호 입력 필드
• 로그인 버튼
• 에러 메시지 표시

게시글 목록 (/posts)

• 게시글 카드 목록
• 제목, 작성자, 날짜 표시

게시글 상세 (/posts/[id])

• 제목, 내용, 작성자 표시
• 수정/삭제 버튼 (작성자만)
• 목록으로 버튼

게시글 작성/수정 (/posts/new, /posts/[id]/edit)

• 제목 입력 필드
• 내용 입력 필드
• 저장 버튼
• 취소 버튼

사용 예시

/e2e-test 로그인
/e2e-test 게시글 작성
/e2e-test 전체 흐름
/e2e-test 모바일 화면 확인

디버깅

• 스크린샷 찍기: 각 단계별 화면 캡처
• 콘솔 에러 확인: JavaScript 에러 체크
• 네트워크 요청 확인: API 호출 검증