Skip to content

PlayWright E2E 테스트 설정

관리인
관리인February 5, 20261 min read
image.png




테스팅 라이브러리 및 에러 수집 라이브러리 도입 배경

  • 인지는 하고 있으나 해결하기 어려운 간헐적 에러 존재: 재현을 위해 사람의 반복작업 필요

  • 사용처에서 발생한 에러 파악의 어려움: 사용처에서 에러와 에러 발생 조건을 명확히 설명해주지 못함으로 인한 에러 파악의 어려움 존재

간헐적 에러에 대한 테스팅 라이브러리: Playwright

playWright (https://playwright.dev/)

: Microsoft에서 개발한 '오픈소스' E2E(End-to-End) 테스트 프레임워크. 브라우저를 프로그래밍 방식으로 제어하여 실제 사용자의 동작(클릭, 입력, 네비게이션 등)을 자동으로 시뮬레이션 할 수 있음.

현재 우리가 QA/디버깅 프로세스에서 겪고 있는 문제들을 개선할 수 있음.

1. 에러 재현의 어려움

간헐적으로 발생하는 버그를 수동으로 재현하는 데 시간이 많이 소요됨. Playwright는 동일한 시나리오를 --repeat-each=100 같은 옵션으로 수백 번 자동 반복할 수 있고, 실패 시 트레이스(네트워크 요청, DOM 스냅샷, 콘솔 로그)를 자동 저장도록 설정 가능. 따라서 기존보다 디버깅이 수월해질 것으로 예상.

2. E2E 테스트 부재

주요 사용자 플로우에 대한 E2E 테스트가 없어서, 배포 후 수동 검증에 의존하고 있음. Playwright를 도입하면 핵심 시나리오를 자동화하고 CI에 연결해서 배포 전 자동 검증이 가능. 여기서의 자동 검증이란, 신규 기능을 추가하거나 기존 기능을 수정하고 PR을 올렸을 때, 기존 기능들에 대한 테스트가 실행되는 것을 의미함.(기존에 성공하던 테스트들이 실패한다면 이상이 있다는 의미)

도입 방안

처음부터 모든 기능에 대한 테스트를 커버할 필요 없이, 핵심 플로우 또는 문제가 존재하는 기능 2~3개부터 시작해서 점진적으로 확대.

에러 수집 라이브러리: Sentry

Sentry(https://sentry.io)

: 실시간 에러 모니터링 및 추적 플랫폼. 프로덕션 환경에서 발생하는 에러를 자동으로 수집하고, 에러 발생 시점의 브라우저 정보, 사용자 행동 경로, 스택 트레이스 등 디버깅에 필요한 컨텍스트를 함께 기록함.

Playwright가 배포 전 단계에서 알려진 시나리오를 검증하는 도구라면, Sentry는 배포 후 실제 사용 환경에서 발생하는 예상치 못한 에러를 감지하는 도구.

사용처 에러 파악의 어려움 해결

현재 사용처에서 에러가 발생하면 구두/문서로 전달받는데, 에러 발생 조건이나 상황이 명확하지 않아 재현과 원인 파악에 시간이 소요됨. Sentry를 도입하면 에러 발생 시 아래 정보가 자동으로 수집됨:

  • 에러 메시지 및 스택 트레이스

  • 에러 발생 직전 사용자 행동 경로(Breadcrumbs)

  • 브라우저, OS, 화면 해상도 등 환경 정보

  • etc.

Slack/이메일 알림 연동

새로운 에러나 급증하는 에러에 대해 Slack 알림을 설정할 수 있어서, 사용처에서 리포트하기 전에 미리 인지하고 대응하는 것이 가능.

도입 방안

무료 플랜(Developer)에서 월 5,000건의 에러 이벤트를 지원하므로, 먼저 무료 플랜으로 시작해서 효과를 확인한 뒤 필요에 따라 확대. 단, 현재, 기능은 정상 작동하지만 경고성으로 발생하는 DOM 에러 등에 대한 처리가 선행되어야 하거나, 센트리 설정에서 제외시켜야 할 필요가 있음(SDK의 beforeSend 콜백이나 Sentry 대시보드의 Inbound Filters를 통해 불필요한 에러를 필터링).

유료 플랜인 Team플랜은 $29부터 시작함. 셀프 호스팅(https://develop.sentry.dev/self-hosted/configuration/)도 가능하지만 아래의 최소 사양을 충족하는 머신이 요구됨

  • 4개의 CPU 코어

  • 16GB RAM + 16GB 스왑

  • 디스크 여유 공간 20GB

  • 데모사이트로 에러 테스트: 에러 목록

    image

  • 데모사이트에서 500에러 발생 리플레이(무료 플랜의 경우 한 달 리플레이 50개 제공)

    00-sentry-replay

요약

  • 테스팅 라이브러리 도입: Playwright를 사용해 배포 전 코드를 테스트하고 간헐적 에러 디버깅 방법 개선

  • 에러 수집 라이브러리(Sentry)를 통해 배포 후 사용처에서의 에러를 수집할 수 있음. 사용처의 에러를 보다 정확하게 파악 가능.

비용

  • Playwright : 무료

  • Sentry: 월 5,000건의 에러까지는 무료(회사에서도 사용 가능. 접근 계정은 1개까지). 팀 플랜은 $29달러부터