[Test/#222] Playwright E2E 도입

[Seojegyeong]

🚨 관련 이슈

#222

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

Playwright E2E 도입

• @playwright/test, dotenv 추가 및 pnpm test:e2e 스크립트 등록
• Cursor MCP로 탐색한 시나리오를 회귀 테스트로 고정하였습니다.
• .gitignore에 test-results/, playwright-report/ 등 Playwright 산출물 추가

E2E

• smoke.spec.ts - 로그인 페이지 로드
• auth-guard.spce.ts - 비로그인 시 /dashboard -> /login 리다이렉트
• find-email.spec.ts - 로그인 -> 이메일 찾기(휴대폰 인증) 화면 진입
• login.spec.ts - 이메일 로그인 후 /dashboard 유지
• navigation.spec.ts - 로그인 후 통합 대시보드 화면, 사이드바, 헤더 확인

참고

• Cursor MCP로 시나리오를 탐색한 뒤 spec으로 옮긴 흐름은 아래 글에 정리해 두었습니다.
  https://seojegyeong.tistory.com/5

😅 미완성 작업

• CI 파이프라인에 pnpm test:e2e 연동
• 크로스 브라우저(projects) 확장 -> 현재 Chromium만

📢 논의 사항 및 참고 사항

• login, navigation 테스트는 .env에 E2E_USER_EMAIL, E2E_USER_PASSWORD가 있어야 실행됩니다. 없으면 해당 spec은 test.skip 됩니다.
• 로컬 trace가 켜져 있어 test-results/ 용량이 커질 수 있습니다.
• Cursor MCP로 만든 spec은 그대로 쓰기보다, 실제 UI 흐름을 한 번 확인한 뒤 selector·assertion을 다듬는 것을 추천합니다!

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (10)

• .gitignore is excluded by none and included by none
• package.json is excluded by none and included by none
• playwright.config.ts is excluded by none and included by none
• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml and included by none
• tests/auth-guard.spec.ts is excluded by none and included by none
• tests/find-email.spec.ts is excluded by none and included by none
• tests/login.spec.ts is excluded by none and included by none
• tests/navigation.spec.ts is excluded by none and included by none
• tests/smoke.spec.ts is excluded by none and included by none
• tsconfig.node.json is excluded by none and included by none

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3ad37edf-a3d8-48af-91e8-2152746d65e8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch setting/#222

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

📚 Storybook 배포 완료

항목	링크
📖 Storybook	https://69a147b60a56365d9e2185ef-dvwlyjrgiq.chromatic.com/
🔍 Chromatic	https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=293

[jjjsun]

P4: 확인했습니다!