[기술포스팅 원문] Playwright로 로그인, Lighthouse로 성능을: 인증 페이지 성능측정 자동화

[기술포스팅 요약] 펫프렌즈 커머스개발팀에서는 로그인 기반 페이지의 성능을 정기적으로 측정하고 시각화하기 위해, **Playwright + Lighthouse + AWS CloudWatch + Grafana** 조합으로 자동화된 성능 측정 구조를 구축했습니다.

• Playwright로 로그인 인증 세션을 구성하고, Lighthouse를 활용해 인증이 필요한 페이지의 웹 성능 측정을 자동화함.
• 성능 지표는 FCP, LCP, CLS, TBT 등을 JSON으로 저장하고, AWS CloudWatch로 전송 후 Grafana 대시보드에서 시각화.
• 도구 선택 시, Puppeteer와 Cypress는 로그인 세션 유지/병렬 실행 등의 한계로 제외하고 Playwright를 최종 선택
• Playwright는 쿠키 및 localStorage 제어가 유연하고, VSCode 통합 및 병렬 처리, 멀티 브라우저 테스트 지원이 탁월.

GitHub Actions를 통해 cron 스케줄링 기반으로 하루 2회 자동 실행되며, 로그인을 포함한 전체 흐름을 수행. 로그인 시나리오는 Auth.setup.ts에서 수행되며, 인증 세션을 storage.json으로 저장해 재사용 가능. auth.test.ts는 인증된 세션을 기반으로 Lighthouse 측정을 수행하고, 성능 데이터를 수집. 측정된 JSON 결과는 별도 스크립트를 통해 AWS CloudWatch Metrics/Logs에 전송되며, Grafana에서 시각적으로 추적 가능. 이 구조를 통해 인증 기반 페이지의 성능 저하 감지 및 배포 전후 비교, SLA 지표 관리가 가능해짐.
이 아키텍처는 인증된 사용자 흐름에 가까운 테스트 환경을 구성하고, 측정 자동화부터 시각화까지 연결된 실무형 예시로 많은 QA 및 프론트엔드 개발자들에게 참고가 될 수 있습니다.

이 포스팅은 [펫프렌즈 기술블로그]의 작성 글을 바탕으로 요약되었으며, 정보 공유 목적입니다.