Next.js E2E 테스트 구현

시나리오 선택

가장 비싼 회귀인 가입, 로그인, 작성, 결제 같은 사용자 흐름을 고른다.

사용자 흐름

Cypress 실행 전 Next dev 또는 preview server가 같은 baseUrl에서 떠 있어야 한다.

dev server

사용자처럼 클릭, 입력, 이동을 수행하고 URL과 화면 상태를 확인한다.

spec

실패 시 screenshot, video, trace를 남겨 원인을 재현할 수 있게 한다.

debug artifact

범위

모든 세부 UI보다 핵심 경로의 연결을 검증한다. 세부 컴포넌트 조건은 단위·통합 테스트가 더 빠르다.

few critical paths

데이터

테스트 계정과 seed 데이터를 고정해 실행 순서 영향을 줄인다. 운영 데이터에 의존하면 테스트가 불안정해진다.

controlled fixture

서버 시작, 헬스 체크, 테스트 실행, 산출물 업로드 순서가 필요하다. 불안정 테스트는 재시도보다 원인 분류가 먼저다.

안정화 검증 흐름

선택자 스타일 class보다 접근 가능한 role/name 또는 data-testid를 쓴다.

대기 고정 sleep 대신 화면 상태와 네트워크 완료 조건을 기다린다.

격리 테스트마다 데이터 상태가 초기화된다.

start Next preview -> wait-on baseUrl -> cypress run -> upload screenshots/videos