초보자가 가장 흔히 틀리는 셀렉터는 무엇인가요?

자동 생성 클래스명·DOM 깊이에 의존한 selector입니다. data-* 속성이나 role 기반 쿼리로 의미를 고정하세요.

should('be.visible')가 느리게 실패해요.

요소는 있지만 z-index, overflow, 애니메이션, 모달 뒤에 가려진 경우가 많습니다. 실제로 클릭 가능한지, 스크롤/포커스가 맞는지 확인하세요.

fixture와 fixture 폴더는 어떻게 나누나요?

정적 JSON은 fixture로 두고, 환경별로는 환경 변수나 cy.intercept로 응답을 바꿉니다. 하드코딩된 production URL은 피합니다.

E2E만으로 품질을 담보할 수 있나요?

E2E는 핵심 시나리오·회귀용이지 전부를 대체하긴 어렵습니다. API·단위와 역할을 나누는 것이 실무에서 더 안정적입니다.

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

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

이 글의 핵심

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

이 글의 핵심

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

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

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

실무에서 마주치는 문제들

매번 수동으로 클릭해야 해요

회귀 테스트에 2시간 걸립니다. Cypress는 10분입니다. 브라우저 호환성 테스트가 어려워요

Chrome, Firefox, Safari를 일일이 테스트합니다. Cypress는 자동화합니다. 버그를 놓쳐요

사람이 테스트하면 실수가 있습니다. Cypress는 일관성 있게 테스트합니다.

1. Cypress란?

핵심 특징

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

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

2. 설치

npm install -D cypress

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

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

3. 첫 번째 테스트

// 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

// ❌ 나쁜 예 (변경에 취약)
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')

커스텀 명령어

// 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

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

// 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. 인증

세션 저장

// 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

# .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. 독립적인 테스트

// ❌ 나쁜 예 (의존성 있음)
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. 명시적 대기

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

심화: Cypress 아키텍처·intercept·커버리지·프로덕션

인-브라우저 실행 모델

Cypress는 전통적인 원격 WebDriver와 달리, 애플리케이션과 테스트 제어를 브라우저 이벤트 루프에 가깝게 맞추는 방향으로 설계되어 왔습니다(세부 구현은 버전별로 문서를 확인). 실무적으로는 명령 큐와 자동 재시도 덕분에 단언이 안정적으로 붙는 경우가 많지만, 순수 Promise와 커맨드를 섞는 안티패턴은 플레이크를 유발합니다.

`cy.intercept`와 네트워크 스텁

cy.intercept는 XHR/fetch 경로를 가로채 고정 응답·지연·에러를 시뮬레이션합니다. as('alias')와 cy.wait('@alias')로 네트워크 동기화를 하면 cy.wait(5000) 같은 고정 대기보다 안정적입니다.

커버리지

Cypress로 프런트 계측 커버리지를 모으는 구성도 가능하지만, 일반적으로 Vitest/Jest에서 임계값을 관리하고 E2E는 핵심 여정 검증에 두는 편이 비용 대비 효과가 좋습니다.

프로덕션

E2E 스위트는 스테이징·프리뷰가 기본이며, 프로덕션에는 합성 헬스 체크와 관측(RUM·APM) 으로 보완합니다. 영문 심화 요약은 [Cypress E2E Testing Guide (English)](/en/blog/cypress-e2e-testing-guide/를 참고하십시오.

정리 및 체크리스트

핵심 요약

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

구현 체크리스트

같이 보면 좋은 글

Cypress E2E Testing Guide (English)
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 테스트로 사용합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

이 글의 핵심

이 글의 핵심

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

실무에서 마주치는 문제들

사람이 테스트하면 실수가 있습니다. Cypress는 일관성 있게 테스트합니다.

1. Cypress란?

핵심 특징

2. 설치

3. 첫 번째 테스트

4. 셀렉터

Best Practices

커스텀 명령어

5. API 모킹

cy.intercept

Fixture

6. 인증

세션 저장

7. CI/CD 통합

GitHub Actions

8. Best Practices

1. 독립적인 테스트

2. data-testid 사용

3. 명시적 대기

심화: Cypress 아키텍처·intercept·커버리지·프로덕션

인-브라우저 실행 모델

cy.intercept와 네트워크 스텁

커버리지

프로덕션

정리 및 체크리스트

핵심 요약

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

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

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

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

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

이 글이 도움이 되셨나요?

`cy.intercept`와 네트워크 스텁