Playwright E2E 테스트 실행 속도를 높이는 전략

Playwright는 강력한 E2E 테스트 도구이지만, 테스트 수가 많아지면 실행 속도가 느려지는 문제가 발생할 수 있습니다. 이를 해결하기 위해 몇 가지 최적화 전략을 적용할 수 있습니다. 1. 더 많은 워커(Worker) 실행하기 Playwright는 기본적으로 병렬 실행을 지원하며, --workers 옵션을 조정하면 더 많은 테스트를 동시에 실행할 수 있습니다. npx playwright test --workers=4 테스트 환경과 머신 리소스에 따라 최적의 워커 수를 조정하면 실행 속도를 높일 수 있습니다. 2. 가능한 경우 목(Mocking) 활용하기 실제 API 호출을 최소화하면 테스트 속도를 크게 향상할 수 있습니다. Playwright의 request API를 사용해 API 응답을 목(mock) 처리하면 네트워크 요청 대기 시간을 줄일 수 있습니다. page.route('**/api/data', async (route) => { await route.fulfill({ status: 200, body: JSON.stringify({ data: 'mocked response' }), }); }); API 호출이 꼭 필요하지 않은 경우, 목 데이터를 활용해 실행 속도를 최적화하세요. 3. 컴포넌트 테스트 고려하기 전체적인 E2E 테스트를 실행하기 전에, Playwright의 컴포넌트 테스트를 활용하면 특정 UI 컴포넌트만 빠르게 검증할 수 있습니다. 이렇게 하면 불필요한 전체적인 UI 테스트 없이도 주요 기능을 검증할 수 있습니다. npx playwright test --config=playwright.component.config.ts 4. 서브셋 테스트 실행하기 (스모크 테스트) 모든 테스트를 매번 실행하는 대신, 가장 중요한 기능을 검증하는 스모크 테스트(smoke test) 세트를 정의하면 실행 시간을 절약할 수 있습니다. npx playwright test --grep @smoke 테스트 케이스에 @smoke 태그를 추가하고, 주요 기능만 실행하도록 설정하면 빠르게 주요 시나리오를 검증할 수 있습니다. 5. 변경된 코드 기반으로 테스트 실행하기 모든 테스트를 실행하는 대신, 변경된 코드와 관련된 테스트만 실행하면 시간을 단축할 수 있습니다. 예를 들어, git diff를 활용해 변경된 파일을 확인하고, 관련 테스트만 실행하는 스크립트를 만들 수 있습니다. git diff --name-only HEAD~1 | grep "src/" | xargs -I {} npx playwright test --grep="{}" 이 방법을 CI/CD 환경에서 적용하면 테스트 실행 시간을 더욱 단축할 수 있습니다. 실무 프로젝트에 적용 결과 테스트 개수: 10개 기본 실행 환경: 로컬 개발 환경에서 실행 단일 워커(Worker)로 실행 시 평균 소요 시간: 10분 (1개당 1분 소요) 최적화 적용 전후 비교 적용 전략 AS-IS TO-BE 기대 효과 멀티 워커 사용 (4 workers) 10분 약 3분 병렬 실행으로 테스트 분산 API Mocking 적용 10분 약 6~7분 네트워크 대기 시간 단축 컴포넌트 테스트 활용 10분 5분 이하 전체 UI 테스트 감소 스모크 테스트 실행 (3개만 실행) 10분 약 3분 핵심 기능만 검증 변경 코드 기반 테스트 실행 10분 약 2~5분 관련 테스트만 실행 결론적으로, 최적화 전략을 조합하면 10분 → 2~3분 수준으로 단축할 수 있습니다. 특히 멀티 워커 실행 + API Mocking + 스모크 테스트를 함께 적용하면 3배 이상 빠르게 테스트를 완료할 수 있습니다. 마무리하며 Playwright의 E2E 테스트 실행 속도를 최적화하려면 병렬 실행을 활용하고, 목(mock) 처리 및 컴포넌트 테스트를 적극적으로 활용해야 합니다. 또한, 스모크 테스트 전략과 변경된 코드 기반 테스트 실행을 조합하면 더욱 빠르고 효율적인 테스트 환경을 구축할 수 있습니다. 이제 위의 전략을 적용하여 Playwright 테스트 실행 속도를 최적화해 보세요!

page.route('**/api/data', async (route) => {
  await route.fulfill({
    status: 200,
    body: JSON.stringify({ data: 'mocked response' }),
  });
});

Related Posts

Daily JavaScript Challenge #JS-114: Pair Swap In an Array

Mar 1, 2025  0

GaussianBlur in PyTorch (2)

Feb 16, 2025  0

TypeScript object destructuring and you

Jan 29, 2025  0