프론트엔드
에이닷 웹서비스팀의 E2E 테스트 도입기
두줄요약
에이닷 웹서비스팀이 QA 자동화를 위해 E2E 테스트를 도입하고 Playwright와 Cursor로 효율을 높인 과정을 공유했습니다. 크로스 브라우저 지원, 셀렉터 전략, 코드 자동 생성과 디버깅 활용법도 함께 정리했습니다.
핵심 내용
- QA 자동화를 위해 E2E 테스트를 도입한 과정
- Playwright와 Cursor를 활용한 테스트 코드 작성·검증 효율화
- 크로스 브라우저 지원, 병렬 처리, CI/CD 연동을 고려한 Playwright 선택
- data-testid 기반 셀렉터, 단일 Repo 관리, UI 모드와 watch mode 활용
선택 이유
- Cypress보다 Safari/WebKit 포함 범용 브라우저 지원이 우수
- Selenium보다 초기 설정과 실행, 병렬 처리 측면에서 대규모 테스트에 유리
- 코드 자동 생성과 디버깅 기능을 함께 활용하기 쉬운 점
주의할 점
- E2E 테스트는 실행 속도와 유지보수 비용이 큼
- 빠른 입력은 로그인 플로우에서 봇 탐지를 유발할 수 있음
- class, id, DOM 구조보다 안정적인 셀렉터 전략 필요
적용해볼 점
- 중요도 높은 사용자 시나리오 중심으로 테스트 범위 설정
- product 코드와 테스트 코드를 함께 관리하는 구조 검토
- 랜덤 wait, 스크린샷, 녹화, codegen 활용을 통한 작성·디버깅 자동화