E2E 테스트 구현 (Cypress)
Next.js App Router를 사용하는 애플리케이션에서 Cypress를 활용한 엔드-투-엔드(E2E) 테스트는 전체 사용자 경험을 검증하는 강력한 도구입니다.
이 절에서는 Cypress를 사용한 E2E 테스트 구현 방법, 그 중요성, 그리고 효과적인 테스트 시나리오 설계에 대해 알아보겠습니다.
Cypress 설치 및 설정
- Cypress 설치
npm install --save-dev cypresspackage.json에 스크립트 추가
{
"scripts": {
"cypress": "cypress open",
"test:e2e": "cypress run"
}
}- Cypress 초기화
npx cypress open이 명령어를 실행하면 Cypress가 필요한 폴더와 파일을 생성합니다.
기본적인 E2E 테스트 작성
Next.js App Router 프로젝트의 기본적인 E2E 테스트 예제
describe('Home Page', () => {
it('successfully loads', () => {
cy.visit('/')
cy.get('h1').should('contain', 'Welcome to Next.js!')
})
})사용자 시나리오 기반 테스트 케이스 설계
실제 사용자 행동을 시뮬레이션하는 테스트 케이스를 설계하는 것이 중요합니다.
예를 들어, 로그인 프로세스를 테스트하는 시나리오
describe('Login Process', () => {
it('allows a user to log in', () => {
cy.visit('/login')
cy.get('input[name="username"]').type('testuser')
cy.get('input[name="password"]').type('password123')
cy.get('button[type="submit"]').click()
cy.url().should('include', '/dashboard')
cy.get('h1').should('contain', 'Welcome, testuser!')
})
})CI/CD 파이프라인에 E2E 테스트 통합
CI/CD 파이프라인에 Cypress 테스트를 통합하면 배포 전 자동으로 E2E 테스트를 실행할 수 있습니다.
GitHub Actions를 사용한 예제
name: E2E Tests
on: [push]
jobs:
cypress-run:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Cypress run
uses: cypress-io/github-action@v2
with:
build: npm run build
start: npm start
wait-on: 'http://localhost:3000'15장 배포와의 연결
E2E 테스트는 15장에서 다루는 배포 과정과 밀접하게 연관됩니다.
배포 전 E2E 테스트를 실행하여 주요 기능이 제대로 작동하는지 확인할 수 있습니다.
또한 프로덕션 환경에 대한 E2E 테스트를 구성하여 배포 후 주요 기능의 정상 작동 여부를 지속적으로 모니터링할 수 있습니다.
실습 : E2E 테스트 시나리오 구현
Next.js App Router를 사용하는 전자상거래 웹사이트의 핵심 프로세스를 테스트하는 E2E 테스트 시나리오를 구현해보겠습니다.
describe('Full Order Process', () => {
it('allows a new user to register, browse products, add to cart, and complete an order', () => {
// 1. 사용자 등록
cy.visit('/register')
cy.get('input[name="username"]').type('newuser' + Date.now())
cy.get('input[name="email"]').type('newuser' + Date.now() + '@example.com')
cy.get('input[name="password"]').type('securepassword123')
cy.get('button[type="submit"]').click()
cy.url().should('include', '/dashboard')
// 2. 제품 탐색
cy.visit('/products')
cy.get('[data-testid="product-item"]').first().click()
cy.url().should('include', '/products/')
// 3. 장바구니에 추가
cy.get('button').contains('Add to Cart').click()
cy.get('[data-testid="cart-count"]').should('contain', '1')
// 4. 장바구니 확인
cy.visit('/cart')
cy.get('[data-testid="cart-item"]').should('have.length', 1)
// 5. 체크아웃 프로세스
cy.get('button').contains('Proceed to Checkout').click()
cy.url().should('include', '/checkout')
// 6. 배송 정보 입력
cy.get('input[name="address"]').type('123 Test Street')
cy.get('input[name="city"]').type('Test City')
cy.get('input[name="zipCode"]').type('12345')
// 7. 결제 정보 입력 (가상의 결제 시스템 가정)
cy.get('input[name="cardNumber"]').type('4111111111111111')
cy.get('input[name="expiryDate"]').type('12/25')
cy.get('input[name="cvv"]').type('123')
// 8. 주문 완료
cy.get('button').contains('Place Order').click()
cy.url().should('include', '/order-confirmation')
cy.get('h1').should('contain', 'Thank you for your order!')
// 9. 주문 히스토리 확인
cy.visit('/order-history')
cy.get('[data-testid="order-item"]').should('have.length.at.least', 1)
})
})이 E2E 테스트 시나리오는 다음 단계를 포함합니다.
- 새 사용자 등록
- 제품 페이지 탐색
- 제품을 장바구니에 추가
- 장바구니 확인
- 체크아웃 프로세스 시작
- 배송 정보 입력
- 결제 정보 입력
- 주문 완료
- 주문 히스토리 확인
이 테스트는 웹사이트의 핵심 기능을 종합적으로 검증하며, 실제 사용자의 경험을 시뮬레이션합니다.
Next.js App Router를 사용하는 프로젝트에서 Cypress를 활용한 E2E 테스트는 애플리케이션의 전체적인 기능과 사용자 경험을 검증하는 강력한 도구입니다.
Cypress를 사용하면 복잡한 사용자 시나리오를 쉽게 시뮬레이션할 수 있으며, 이는 애플리케이션의 안정성과 신뢰성을 크게 향상시킵니다.
E2E 테스트를 작성할 때는 다음 사항을 고려해야 합니다.
- 실제 사용자 시나리오를 반영하는 테스트 케이스 설계
- 데이터-테스트 속성(
data-testid)을 사용하여 테스트의 안정성 향상 - 페이지 로드 및 비동기 작업에 대한 적절한 대기 시간 설정
- 다양한 디바이스 및 화면 크기에 대한 테스트 수행
CI/CD 파이프라인에 E2E 테스트를 통합함으로써 지속적인 품질 관리가 가능해지며, 이는 최종 사용자에게 더 나은 경험을 제공하는 데 도움이 됩니다.
효과적인 E2E 테스트 전략은 개발 프로세스의 핵심 부분이며, 애플리케이션의 전반적인 품질을 보장하는 데 중요한 역할을 합니다.