Cypress E2E Testing

• 브라우저에서 실행되는 E2E 테스트 프레임워크
• 실시간 테스트 실행: 브라우저에서 테스트 과정을 실시간으로 확인
• 자동 대기: 요소가 나타날 때까지 자동으로 대기하여 안정적인 테스트
• 시간 여행 디버깅: 각 단계별 DOM 스냅샷으로 디버깅 용이
• 네트워크 트래픽 제어: API 응답 모킹과 네트워크 요청 감시
• 스크린샷 & 비디오: 테스트 실패 시 자동으로 증거 수집

테스트 작성 - Commands vs Custom Commands

사용자 행동을 시뮬레이션하는 테스트 명령어 시스템

• Built-in Commands: 기본 제공 명령어

  • cy.visit(), cy.get(), cy.click() 등 핵심 액션
  • cy.should(), cy.contains() 등 검증 명령어
  • 일반적인 웹 인터랙션과 검증에 적합

• Custom Commands: 재사용 가능한 커스텀 명령어

  • cypress/support/commands.js에서 정의
  • 복잡한 워크플로우를 단순한 명령어로 추상화
  • 로그인, 폼 작성 등 반복적인 작업 자동화에 적합

테스트 전략 - Page Object vs App Actions

테스트 코드의 구조화와 유지보수성을 위한 패턴 선택

• Page Object Pattern: 페이지별 객체 모델링

  • 각 페이지의 요소와 액션을 클래스로 캡슐화
  • UI 변경 시 한 곳에서만 수정하면 되는 유지보수성
  • 복잡한 UI와 많은 페이지가 있는 애플리케이션에 적합

• App Actions: 애플리케이션 내부 함수 직접 호출

  • cy.window().its('store').invoke('dispatch') 등으로 상태 직접 조작
  • UI를 거치지 않고 빠른 테스트 설정
  • 복잡한 상태 설정과 성능이 중요한 테스트에 적합

데이터 관리 - Fixtures vs Database Seeding

테스트 데이터 준비와 관리 방식

• Fixtures: 정적 테스트 데이터

  • cypress/fixtures/ 폴더의 JSON 파일로 관리
  • cy.fixture()로 데이터 로드하여 테스트에 활용
  • 일관된 테스트 데이터와 API 모킹에 적합

• Database Seeding: 동적 데이터베이스 설정

  • cy.task()를 통해 Node.js 환경에서 DB 직접 조작
  • 테스트마다 새로운 데이터 생성 및 정리
  • 실제 데이터베이스 상태가 중요한 통합 테스트에 적합

CI/CD 통합 - Headless vs Dashboard

지속적 통합 환경에서의 테스트 실행 방식

• Headless Mode: 백그라운드 테스트 실행

  • cypress run 명령어로 브라우저 UI 없이 실행
  • 빠른 실행 속도와 서버 리소스 절약
  • CI/CD 파이프라인과 자동화된 테스트에 적합

• Cypress Dashboard: 클라우드 테스트 관리

  • 테스트 결과 기록, 스크린샷, 비디오 자동 저장
  • 병렬 실행과 테스트 분석 대시보드 제공
  • 팀 협업과 테스트 결과 추적이 중요한 프로젝트에 적합