셀렉터, 대기, 네트워크, 재사용 명령은 각각 다른 문제를 줄입니다. 기능 목록이 아니라 실패 원인별 대응으로 읽어야 합니다.
문제
Cypress 기능
사용 방법
좋은 신호
요소 선택이 깨짐
data-testid, cy.contains
디자인 문구보다 테스트 전용 속성으로 핵심 버튼을 잡는다.
CSS 변경에도 테스트가 유지된다.
비동기 화면이 늦게 뜸
should, 자동 재시도
임의 지연 대신 화면에 나타날 조건을 기다린다.
느린 로딩에서도 실패가 줄어든다.
외부 API가 불안정함
cy.intercept
요청을 별칭으로 묶고 응답 상태와 화면 결과를 함께 검증한다.
네트워크 차이보다 앱 로직을 안정적으로 본다.
로그인 코드가 반복됨
commands.ts
자주 쓰는 사용자 행동을 커스텀 명령으로 뽑는다.
시나리오 본문에는 비즈니스 흐름만 남는다.
배포 전만 실패함
cypress run, artifacts
CI에서 헤드리스 실행, 스크린샷, 비디오를 같이 남긴다.
실패 원인을 로컬에서 재현하기 쉬워진다.
선택자는 의도DOM 구조가 아니라 사용자가 하는 일을 기준으로 잡는다.
대기는 조건시간을 기다리지 말고 관찰 가능한 화면 상태를 기다린다.
mock은 경계실서비스 검증과 빠른 회귀 검증을 분리한다.