FrontEnd 개발 과정에 Integration Test 더하기

간단 소개

FrontEnd 개발에 통합 테스트를 도입하여 효율성을 높이고, Playwright를 활용한 테스트 방법 및 적용 과정을 설명한다.

AI Summary

FrontEnd 개발과정의 테스트 도입
- FrontEnd 개발에서 **HMR(Hot Module Replacement)**로 인해 테스트 필요성을 느끼지 못했으나, 다양한 테스트 케이스 대응의 필요성 증가.
- 개발 과정에서 테스트를 통해 개발 완성도를 높이고 QA 과정에서 발생할 수 있는 이슈를 줄이는 것이 목표.
통합 테스트(Integration Test)의 중요성
- 단위 테스트, 통합 테스트, E2E 테스트 중 통합 테스트가 현재 상황에 가장 적합하다고 판단.
- 페이지의 기획서 대로의 동작 여부, 모듈 간/페이지 간 흐름의 정상 동작 여부 검증이 중요.
Playwright 도입 및 적용
- 다양한 브라우저 지원 및 테스트 실행 기능 고려하여 Playwright를 선택.
- Playwright 설정 및 테스트 진행 결과 확인, headless 모드 설정 변경, UI 활용, 모바일 웹뷰 환경 테스트 설정 등의 적용 과정을 거침.