Angular E2E 테스트, Protractor에서 Cypress로 전환한 경험기

Protractor에서 Cypress로 전환한 배경

기존 Angular 공식 지원 라이브러리인 Protractor는 2022년 개발 중단과 함께 JavaScript 표준 변경으로 인해 비동기 처리 등 기존 기능이 불필요해져 마이그레이션이 필요했다. 이에 따라 Angular 문서에서 권장하는 Cypress를 선정했다. Cypress의 Automatic Waiting 기능은 비동기 코드 작성을 간소화하고 간헐적인 렌더링 실패 문제를 해결해 테스트 신뢰도를 높였다. 또한 Headless 모드 등을 통해 빠른 실행 시간을 확보할 수 있었다.

테스트 전략 및 구현 방식

시각적 테스트(Visual Regression)의 유지보수 부담을 줄이기 위해 DOM 트리를 탐색하는 기능적 테스트를 채택했다. Page Object 패턴 대신 data-cy 속성을 활용해 DOM을 탐색하도록 변경했으며, 빌드 시 해당 속성이 노출되지 않도록 Webpack 플러그인으로 제거했다. API 호출이 어려운 상황에서는 Cypress의 Intercept 기능을 활용해 응답을 대기하거나 Mocking을 적용했다.

시나리오 구성 및 성과

테스트는 페이지 단위의 8개 독립 시나리오로 구성했으며, 시나리오 내에서는 의존성을 허용하되 시나리오 간에는 독립성을 유지하도록 설계했다. 이를 통해 파일 단위 테스트 실행이 가능해져 개발 효율성이 향상되었다. Cypress 도입으로 테스트 실패 빈도가 감소하고 유지보수 리소스가 절감되었으나, 초기 학습 부족으로 인한 리팩토링 시행착오가 있었으므로 사전 학습 시간 확보의 중요성을 강조했다.