E2E 테스트와 Cypress 그리고 Playwright

E2E 테스트란?

E2E(End-to-End) 테스트는 실제 사용자가 제품을 사용하는 시나리오를 자동화하여 테스트하는 방식이다.
UI 상호작용부터 서버 응답까지 전체 흐름을 점검하므로, 실제 서비스 환경에 가장 근접한 테스트 방식이다.

예를 들어 로그인 버튼을 눌렀을 때, 입력한 계정으로 인증되고, 피드 페이지로 이동되는지 테스트

 

왜 E2E 테스트가 필요한가?

사용자 중심	실제 브라우저 환경에서 테스트되므로 사용자 행동을 가장 잘 반영함
시스템 통합 확인	프론트-백엔드-DB까지 전반적인 통합 흐름 테스트
배포 안전망	중요한 기능이 망가졌는지 사전에 확인 가능 (회귀 테스트)
QA 비용 절감	수동 테스트 반복 작업을 줄여줌

 

현업에서 가장 많이 쓰는 대표적인 도구는 Cypress와 Playwright다.

 

---

 

Cypress – 프론트엔드 개발자에게 가장 인기 많은 선택

장점

• 브라우저에서 테스트가 돌아가서 UI 디버깅이 매우 직관적
• React/Next 기반 프로젝트와 궁합이 뛰어남
• 자동 스크린샷, 테스트 녹화 기능
• 커뮤니티와 에코시스템이 탄탄함

설치

npm install cypress --save-dev
npx cypress open

 

디렉토리 구조 예시

cypress/
├── e2e/
│   └── login.cy.ts
├── fixtures/
├── support/
└── cypress.config.ts

 

예제 테스트 코드

describe('로그인 흐름', () => {
  it('올바른 자격 정보로 로그인한다', () => {
    cy.visit('/login');
    cy.get('input[name=email]').type('test@a.com');
    cy.get('input[name=password]').type('1234');
    cy.get('button[type=submit]').click();
    cy.url().should('include', '/feed');
  });
});

 

---

Playwright – 속도와 확장성, 멀티브라우저를 원한다면

장점

• 멀티 브라우저 지원 (Chromium, Firefox, WebKit)
• Headless 환경에서 매우 빠르게 작동
• 복잡한 시나리오 (인증 흐름, 쿠키 조작 등)에 강력
• 병렬 테스트, 모바일 시뮬레이션, API mocking 등 기능 풍부

설치

npm install -D @playwright/test
npx playwright install

 

디렉토리 구조 예시

tests/
├── login.spec.ts
playwright.config.ts

 

예제 테스트 코드

import { test, expect } from '@playwright/test';

test('로그인 성공 테스트', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await page.fill('input[name="email"]', 'test@a.com');
  await page.fill('input[name="password"]', '1234');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL(/.*feed/);
});