[2026] Cypress E2E 테스팅 완벽 가이드 | 자동화·API 모킹·CI/CD·Best Practices

2026년 4월 7일 · 18분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Cypress로 E2E 테스트를 구축하는 완벽 가이드입니다. 설치부터 테스트 작성, 셀렉터, API 모킹, CI/CD 통합, Best Practices까지 실전 예제로 정리했습니다.

실무 경험 공유: 수동 QA를 Cypress로 자동화하면서, 테스트 시간을 2시간에서 10분으로 단축하고 버그 발견율을 3배 높인 경험을 공유합니다.

들어가며: “수동 테스트가 너무 오래 걸려요”

실무 문제 시나리오

시나리오 1: 매번 수동으로 클릭해야 해요
회귀 테스트에 2시간 걸립니다. Cypress는 10분입니다. 시나리오 2: 브라우저 호환성 테스트가 어려워요
Chrome, Firefox, Safari를 일일이 테스트합니다. Cypress는 자동화합니다. 시나리오 3: 버그를 놓쳐요
사람이 테스트하면 실수가 있습니다. Cypress는 일관성 있게 테스트합니다.

1. Cypress란?

핵심 특징

Cypress는 현대적인 E2E 테스팅 프레임워크입니다. 주요 장점:

빠른 실행: Selenium보다 빠름
자동 대기: 요소가 나타날 때까지 대기
Time Travel: 각 단계 확인
실시간 리로드: 코드 변경 즉시 반영
스크린샷/비디오: 자동 캡처

2. 설치

npm install -D cypress

아래 코드는 json를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// package.json
{
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
  }
}

아래 코드는 bash를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

# GUI 모드
npm run cy:open
# Headless 모드
npm run cy:run

3. 첫 번째 테스트

다음은 typescript를 활용한 상세한 구현 코드입니다. 에러 처리를 통해 안정성을 확보합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// cypress/e2e/login.cy.ts
describe('Login', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/login');
  });
  it('should login successfully', () => {
    cy.get('[data-testid="email"]').type('test@example.com');
    cy.get('[data-testid="password"]').type('password123');
    cy.get('[data-testid="submit"]').click();
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome back').should('be.visible');
  });
  it('should show error for invalid credentials', () => {
    cy.get('[data-testid="email"]').type('wrong@example.com');
    cy.get('[data-testid="password"]').type('wrongpassword');
    cy.get('[data-testid="submit"]').click();
    cy.contains('Invalid credentials').should('be.visible');
  });
});

4. 셀렉터

Best Practices

아래 코드는 typescript를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// ❌ 나쁜 예 (변경에 취약)
cy.get('.btn-primary')
cy.get('#submit-button')
cy.get('button:nth-child(2)')
// ✅ 좋은 예 (안정적)
cy.get('[data-testid="submit"]')
cy.get('[data-cy="submit"]')
cy.contains('Submit')

커스텀 명령어

아래 코드는 typescript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// cypress/support/commands.ts
Cypress.Commands.add('login', (email: string, password: string) => {
  cy.visit('/login');
  cy.get('[data-testid="email"]').type(email);
  cy.get('[data-testid="password"]').type(password);
  cy.get('[data-testid="submit"]').click();
});
// 사용
cy.login('test@example.com', 'password123');

5. API 모킹

cy.intercept

다음은 typescript를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

describe('Posts', () => {
  beforeEach(() => {
    cy.intercept('GET', '/api/posts', {
      statusCode: 200,
      body: [
        { id: 1, title: 'Post 1', content: 'Content 1' },
        { id: 2, title: 'Post 2', content: 'Content 2' },
      ],
    }).as('getPosts');
    cy.visit('/posts');
  });
  it('should display posts', () => {
    cy.wait('@getPosts');
    cy.contains('Post 1').should('be.visible');
    cy.contains('Post 2').should('be.visible');
  });
});

Fixture

아래 코드는 json를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// cypress/fixtures/users.json
[
  { "id": 1, "name": "John", "email": "john@example.com" },
  { "id": 2, "name": "Jane", "email": "jane@example.com" }
]

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');

6. 인증

세션 저장

다음은 typescript를 활용한 상세한 구현 코드입니다. 비동기 처리를 통해 효율적으로 작업을 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// cypress/support/commands.ts
Cypress.Commands.add('loginByApi', (email: string, password: string) => {
  cy.request('POST', 'http://localhost:8000/api/login', {
    email,
    password,
  }).then((response) => {
    window.localStorage.setItem('token', response.body.token);
  });
});
// 사용
beforeEach(() => {
  cy.loginByApi('test@example.com', 'password123');
  cy.visit('/dashboard');
});

7. CI/CD 통합

GitHub Actions

다음은 yaml를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

# .github/workflows/cypress.yml
name: Cypress Tests
on: [push, pull_request]
jobs:
  cypress:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm ci
      - name: Start server
        run: npm start &
      - name: Wait for server
        run: npx wait-on http://localhost:3000
      - name: Run Cypress tests
        uses: cypress-io/github-action@v6
        with:
          browser: chrome
          record: true
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
      - name: Upload screenshots
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: cypress-screenshots
          path: cypress/screenshots

8. Best Practices

1. 독립적인 테스트

다음은 typescript를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// ❌ 나쁜 예 (의존성 있음)
it('should create user', () => {
  cy.get('[data-testid="name"]').type('John');
  cy.get('[data-testid="submit"]').click();
});
it('should edit user', () => {
  // 이전 테스트에 의존
  cy.contains('John').click();
});
// ✅ 좋은 예 (독립적)
it('should edit user', () => {
  cy.loginByApi('test@example.com', 'password123');
  cy.visit('/users/1');
  cy.contains('Edit').click();
});

2. data-testid 사용

<!-- HTML -->
<button data-testid="submit-button">Submit</button>

// Test
cy.get('[data-testid="submit-button"]').click();

3. 명시적 대기

아래 코드는 typescript를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// ❌ 나쁜 예
cy.wait(5000);
// ✅ 좋은 예
cy.get('[data-testid="loading"]').should('not.exist');
cy.get('[data-testid="content"]').should('be.visible');

정리 및 체크리스트

핵심 요약

Cypress: 현대적인 E2E 테스팅
자동 대기: 요소가 나타날 때까지
API 모킹: cy.intercept
Time Travel: 각 단계 확인
CI/CD: GitHub Actions 통합
Best Practices: 독립적 테스트

구현 체크리스트

같이 보면 좋은 글

Playwright E2E 테스팅 가이드
Vitest 완벽 가이드
GitHub Actions CI/CD 가이드

이 글에서 다루는 키워드

Cypress, E2E Testing, Testing, Automation, CI/CD, Quality Assurance

자주 묻는 질문 (FAQ)

Q. Cypress vs Playwright, 어떤 게 나은가요?

A. Cypress가 더 사용하기 쉽습니다. Playwright가 더 빠르고 기능이 많습니다. 초보자는 Cypress, 고급 사용자는 Playwright를 권장합니다.

Q. 유닛 테스트도 Cypress로 하나요?

A. 아니요, E2E 테스트만 Cypress를 사용하세요. 유닛 테스트는 Vitest나 Jest를 사용하세요.

Q. 실제 API를 호출해야 하나요?

A. 아니요, cy.intercept로 모킹하는 것을 권장합니다. 더 빠르고 안정적입니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 많은 기업에서 프로덕션 배포 전 E2E 테스트로 사용합니다.