Playwright로 로그인을, Lighthouse로 성능을: 인증 페이지 성능측정 자동화

간단 소개

Playwright와 Lighthouse를 활용하여 인증 페이지 성능 측정 자동화 시스템을 구축하고, CloudWatch와 Grafana를 통해 성능을 시각화하는 방법을 소개합니다.

AI Summary

Playwright 선택 이유
- Puppeteer와 Cypress의 한계를 극복하고, 로그인 기반 페이지의 Lighthouse 성능 측정 자동화에 최적화됨
- 세션 제어, VSCode 확장, 병렬 처리, 멀티 브라우저 지원 등 다양한 기능 제공
자동화 작업 흐름
- GitHub Actions를 통해 주기적 실행 (Cron 스케줄링)
- Playwright로 로그인 상태 구성 후 인증된 페이지 성능 측정 (Playwright Lighthouse)
- CloudWatch 연동을 통해 성능 지표 및 결과 전송
- Grafana로 성능 지표 시각화하여 실시간 모니터링 환경 구축
주요 구현 사항
- playwright.config.ts 파일에서 setup과 chromium 프로젝트 간 의존성 설정
- Auth.setup.ts 파일에서 이메일 로그인 자동화, 세션 정보 추출 및 로컬 스토리지 구성, storage.json 저장
- Auth.test.ts 파일에서 저장된 세션을 불러와 인증 상태 복원 후 Lighthouse 측정 실행