🧪 E2E 테스트 자동화로 신뢰성 높은 프론트엔드 만들기

프론트엔드 개발에서는 UI가 사용자와 직접 맞닿아 있기 때문에,
전체적인 사용자 흐름이 의도대로 동작하는지 확인하는 것이 매우 중요하다.

이때 사용하는 것이 바로 E2E(End-to-End) 테스트이며,
이를 자동화함으로써 개발 효율과 서비스 신뢰성을 높일 수 있다.

---

📌 E2E 테스트란?

사용자가 실제로 서비스를 사용하는 흐름 전체를 시뮬레이션하는 테스트

단위 테스트(unit test), 통합 테스트(integration test)와 달리, UI를 통해 실제 동작을 검증한다. 프론트와 백엔드, DB가 함께 연동된 상태에서 테스트가 수행된다.

---

🧰 대표적인 E2E 테스트 도구

도구	특징
Cypress	직관적인 API와 빠른 실행 속도
Playwright	다양한 브라우저 지원 (Chrome, Firefox, WebKit)
Puppeteer	Headless Chrome 기반, Google이 개발

---

🚀 Cypress를 활용한 E2E 테스트 자동화 예시

1. 설치

npm install cypress --save-dev

2. 테스트 스크립트 예시 (cypress/e2e/login.cy.ts)

describe('로그인 테스트', () => {
  it('로그인 성공 시 메인 페이지로 이동한다', () => {
    cy.visit('/login');
    cy.get('input[name="email"]').type('user@example.com');
    cy.get('input[name="password"]').type('123456');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/main');
  });
});

3. 실행

npx cypress open  # UI 실행
npx cypress run   # CLI 실행

---

⚙️ 자동화 전략

• CI 환경(GitHub Actions 등)에 Cypress를 통합해 PR마다 테스트 자동 수행
• 테스트 실패 시 Slack/Discord 알림 연동
• 테스트 데이터를 별도로 준비해 테스트의 독립성 확보

---

📌 좋은 E2E 테스트 작성 팁

• 테스트 목적이 명확한 시나리오 작성
• id, data-testid로 셀렉터 명시적 지정 (UI 변경에 영향 적게 받기 위함)
• 공통 로직은 커맨드 또는 함수로 추출하여 재사용성 확보
• 속도보다 신뢰성 우선: 테스트 환경을 기다리는 cy.wait() 대신 명확한 조건 사용

---

🧠 TIL

• 서비스가 커질수록 수동 테스트의 한계는 분명해지고, 자동화는 필수로 자리잡는다.
• E2E 테스트는 단순 검증을 넘어 개발자의 자신감을 보장해주는 안전망이다.
• 시간을 들여 테스트 코드를 작성하는 것이 결국은 빠른 배포와 안정성을 만든다.