SPA 자동화 테스트를 작성한 경험

오디오 플레이어 SPA인 Réécoute는 Playwright와 실제 브라우저로 앱 전체를 테스트하며, 개별 단계보다 핵심 기능을 끝까지 수행하는 사용자 여정에 중점을 둠 테스트마다 환경을 격리하는 대신 같은 데이터베이스에서 각자 데이터를 생성하고, 다른 테스트의 데이터는 건드리지 않으며 생성한 데이터를 삭제하지 않음 완전 병렬 실행과 Chromium 단독 실행으로, 팬리스 M3 MacBook Air에서 테스트 모음이 20초 조금 넘게 걸림 SPA 브라우저 테스트의 불안정성에는 CI 재시도로 대응하고, 하이드레이션 중 입력 손실은 React 컴포넌트가 준비될 때까지 입력 필드를 비활성화해 방지함 CI 실패 시 독립 실행형 HTML 보고서와 실행 추적으로 문제를 조사할 수 있으며, 커버리지 수치는 측정하지 않지만 주요 기능의 정상 경로와 가장 중요한 사용자 여정은 테스트함 테스트 대상과 사용자 여정 Réécoute는 보통 2~3시간 길이의 녹음에 최적화된 오디오 플레이어로, 서버 렌더링만으로 구현할 수 없는 여러 상호작용 기능을 갖춘 SPA임 React 기반 클라이언트가 단일 서버와 HTTP를 통해 JSON을 주고받음 속도와 SEO, JavaScript를 비활성화한 사용자를 위해 서버 렌더링도 사용하지만, 주요 기능에는 클라이언트 렌더링이 필요함 복잡성이 백엔드와 클라이언트 JavaScript에 대략 절반씩 나뉘어 있어, 양쪽의 통신까지 현실적으로 검증하도록 실제 브라우저에서 앱 전체를 테스트함 별도의 백엔드 전용 테스트도 일부 있음 테스트 코드는 오픈소스가 아니지만, 다른 프로젝트에도 적용할 수 있는 설계와 구현 경험은 공유함 주 테스트 모음은 Playwright로 작성했으며, 약 20개 파일에 각각 1~4개 테스트가 들어 있음 개별 동작을 잘게 나누기보다 전체 사용자 여정을 담은 긴 테스트를 선호함 전자상거래라면 장바구니에 상품 추가, 가입, 결제 페이지 이동, 실제 구매까지 이어지는 흐름이 해당함 가입처럼 작은 범위의 전용 테스트도 작성하지만, 사업에 중요한 종단 간 흐름을 더 중시함 데이터 격리 대신 독립적인 데이터 소유 테스트는 동일한 데이터베이스를 사용하며, 운영 환경의 사용자처럼 각자 필요한 객체를 생성함 기존 데이터에 의존하지 않고, 자신이 만들지 않은 데이터는 수정하지 않음 생성한 데이터를 정리하지 않아 데이터가 계속 쌓임 공개 데이터가 없는 Réécoute 같은 앱에서 이 방식이 잘 작동함 테스...