프론트엔드 E2E 테스트 도입기 - Playwright를 선택한 이유

회사에 있는 다양한 프로젝트 안에 백엔드 테스트 코드는 많았지만, 프론트엔드 테스트 코드가 부족한 상태였다. 검수 과정에서 동일한 작업이 반복되는 문제가 있어, 이를 해결하기 위해 E2E 테스트 코드 도입을 제안했고, 그 과정에서 정리한 내용을 공유하려 한다.

E2E 테스트란?

E2E(End-to-End) 테스트는 사용자의 실제 행동을 시뮬레이션하여 애플리케이션이 예상대로 동작하는지 확인하는 테스트 방법으로, UI 및 네트워크 상호작용을 포함한 전체 애플리케이션 흐름을 테스트할 수 있다.

조사했던 후보로는 Playwright, Cypress, Selenium 등이 있었다.

---

E2E 테스팅 툴 특징 정리

Playwright

특징

• Chromium, Firefox, WebKit 지원 → 크로스 브라우저 테스트 가능
• 병렬 실행 지원으로 빠른 테스트 속도
• 네트워크 요청 가로채기(Mock API) 기능 제공

설치 및 실행

npm install -D @playwright/test
npx playwright install
npx playwright test

기본 코드 예제

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

test('Example Page 테스트', async ({ page }) => {
  await page.goto('https://example.com');
  expect(await page.title()).toBe('Example Domain');
});

---

Cypress

특징

• 설치가 간편하고 개발 환경에서 사용하기 쉬움
• Chrome 계열 브라우저만 지원
• 병렬 실행 미지원

설치 및 실행

npm install cypress --save-dev
npx cypress open

🔹 기본 코드 예제

describe('Example Page 테스트', () => {
  it('제목이 Example Domain인지 확인', () => {
    cy.visit('https://example.com');
    cy.title().should('eq', 'Example Domain');
  });
});

---

Selenium

특징

• 거의 모든 브라우저 지원 (Chrome, Firefox, Edge, Safari 등)
• 다양한 프로그래밍 언어 지원 (Java, Python, C#, JavaScript 등)
• 병렬 실행 가능하지만 설정이 복잡함
• 자동 대기(Auto-Waiting) 기능이 없어 직접 추가해야 함
• 속도가 느리고 설정이 복잡하여 최신 프로젝트에서는 잘 사용되지 않음

설치 및 실행 (JavaScript 예제)

const { Builder, By, until } = require('selenium-webdriver');
(async function example() {
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('https://example.com');
    let title = await driver.getTitle();
    console.log(title);
  } finally {
    await driver.quit();
  }
})();

---

E2E 테스팅 툴 비교 요약

기능	Playwright	Cypress	Selenium
크로스 브라우저 지원	✅ Chromium, Firefox, WebKit	❌ Chrome 계열만 지원	✅ 거의 모든 브라우저 지원
병렬 실행(Parallel Execution)	✅ 가능	❌ 불가능	✅ 가능
네트워크 요청 가로채기(Mock API)	✅ 지원	✅ 지원	❌ 미지원
속도	🚀 빠름	중간	느림
언어 지원	TypeScript, JavaScript	JavaScript, TypeScript	Java, Python, C#, JavaScript 등

---

회사에서 Playwright를 선택한 이유

사실 조사 이전엔 이전 회사에서 사용했던 Selenium을 채택하려고 했지만 조사를 하면 할수록 Playwright가 가진 장점들이 꽤 괜찮아 보였고 결국 Playwright를 선택하게 되었는데, 이유는 아래와 같다.

병렬 실행 지원

사실 이게 가장 큰 이유였는데, Cypress에서는 병렬 실행을 하기 위해선 유료 결제를 해야 했는데 Playwright에선 이 기능을 무료로 제공해주고 있었다.

그리고 병렬 실행으로 인한 테스팅 시간 차이는 프로젝트가 커질 수록 꽤 크게 느껴진다는 글들을 보고 마음을 좀 굳히게 되었다.

TypeScript 친화적

현재 회사 내 프로젝트는 전부 TypeScript로 되어 있었고 Cypress도 TypeScript를 지원하긴 하지만 그래도 JavaScript 위주로 짜여 있었고 추가 설정이 필요한 것으로 보였다.

Auto-Waiting

예전에 Selenium으로 테스트 코드를 작성했을 땐 wait에 관련한 코드를 작성했던 걸로 기억하는데,

Playwright에선 따로 코드를 작성할 필요 없이 자동으로 로드, 요청 등을 기다려 개발자가 크게 신경 쓰지 않아도 안정적인 테스팅이 가능하였다.