login spec anatomy
Cypress 스펙 구성 원칙
로그인 예제의 긴 코드도 같은 패턴으로 읽으면 단순해집니다. 먼저 화면을 열고, 사용자의 입력을 재현한 뒤, URL과 문구로 결과를 확인하고, 다음 테스트에 상태가 남지 않게 분리합니다.
행동
`cy.get`, `type`, `click`으로 실제 사용자가 폼을 채우는 동작을 재현합니다.
관찰
`cy.url`과 `cy.contains`로 라우팅과 화면 문구가 기대 상태인지 검증합니다.
격리
성공, 실패, 로그아웃 시나리오를 나누어 한 테스트의 상태가 다음 테스트를 흐리지 않게 합니다.
테스트 실행
npm run dev
cypress:open
login.cy.ts
assertions
E2E 테스트는 구현 함수보다 사용자의 관찰 가능한 결과를 기준으로 작성합니다. 그래서 DOM 선택자는 안정적으로, 어설션은 사용자가 실제로 확인하는 상태에 맞춰 둡니다.