목차
1. E2E 테스트 도입 개요
2. 테스트 종류
3. 비교 분석 목록
4. cypress에서 playwright으로 전환한 사례
E2E 테스트 도입 개요
배포를 할 때마다 기존의 기능들이 잘 동작을 하는지 검증을 하고 싶었다. 그래서 테스트의 종류를 알아보았고 그 중에서 사용자가 실제로 애플리케이션을 사용할 때 발생하는 일에 대한 테스트가 가능한 E2E 테스트를 진행할 것이다. 현재 vue3과 타입스크립트로 마이그레이션을 진행하고 있어서 vue3 공식문서에서 테스트 관련 문서를 읽었다.
vue3 공식문서에는 playwright와 cypress를 추천한다. 
npm trends로 확인했을 때 playwright이 최근 1년간 압도적인 수치를 보여줬다.
하지만 cypress는 그동안 축적해온 리소스가 방대하기에 cypress와 playwright 을 모두 사용해보고 비교 분석할 거다. 
테스트 종류
유닛 테스트
함수, 클래스, 컴포서블, 모듈 등 하나의 작은 코드 테스트. 일반적으로 유닛테스트는 함수로직에 에러가 있는지 확인한다.
In general, unit tests will catch issues with a function’s business logic and logical correctness.
vue, vite환경에서는 vitest 를 추천한다.
컴포넌트 테스트
컴포넌트 테스트는 props, events, slots, styles, classes, lifecycle hooks 등을 검사합니다.
Component tests should catch issues relating to your component’s props, events, slots that it provides, styles, classes, lifecycle hooks, and more.
E2E 테스트
사용자가 실제로 애플리케이션을 사용할 때 발생하는 일에 대한 커버리지를 제공합니다.
비교 분석 목록
- 라이브러리에 대한 러닝커브
- 빗버킷 자동화 파이프라인 구축
- 자동화 구축이 얼마나 쉬운지
- 자동화 시 테스트 소요 시간
- 차이점
⚠️라이브러리 설치 전 최소 node, npm 버전을 확인하고 진행할 것.
| 항목 | Cypress (기존에 많이 쓰이던) | Playwright (라이징스타로 Microsoft에서 제작) |
|---|---|---|
| 라이브러리에 대한 러닝커브 | 공식 문서를 참고하여 install부터 test까지 어려움이 없었음 메서드에 대한 이해가 필요하나 cypress 설치 시 제공해 주는 예제를 읽으면 쉽게 이해 가능 초기 난이도: 하 | 공식 문서를 참고하여 install부터 test까지 어려움이 없었음 메서드가 직관적이어서 쉽게 이해 가능 초기 난이도: 하하 |
| 빗버킷 자동화 파이프라인 구축(로컬) 자동화 구축이 얼마나 쉬운지 | 난이도: 쉬움 bitbucket-pipelines.yml에 관련 설정 추가 단, 공식문서에 나와있지 않은 추가 로직이 필요하여 구축 난이도 자체는 쉽지만 조금의 검색 능력이 필요함 | 난이도: 쉬움 bitbucket-pipelines.yml에 관련 설정 추가 단, 공식문서에 나와있지 않은 추가 로직이 필요하여 구축 난이도 자체는 쉽지만 조금의 검색 능력이 필요함 |
| 빗버킷 자동화 파이프라인 구축(로컬) 자동화 시 테스트 소요 시간 | 4개 테스트 평균: 약 1m 11초 | 4개 테스트 평균: 약 1m 34초 |
| 공통점 | 공식 문서를 참고하여 install부터 test까지 어려움이 없었음 | 공식 문서를 참고하여 install부터 test까지 어려움이 없었음 |
| 차이점 - 명령 방식 | 메서드 위주의 명령 + 문자열 명령 | 메서드 위주의 명령 |
| 차이점 - 소스코드 확인 | 소스코드를 보기 위해 외부 프로그램 사용 | Playwright 내부에서 소스코드 확인 가능 |
| 차이점 - 실행 방식 | 터미널 명령어 입력 후 - 실행창 - 테스트창 | 터미널 명령어 입력 후 - 테스트창 |
| 차이점 - VSCode 확장 | 없음 | VSCode에서 익스텐션 제공하여 간단히 테스트를 실행할 수 있다 |
| 차이점 - 디버깅 기능 | headless에서 오류 발생 시 오류 발생지점의 스크린샷을 자동으로 기록한다 console.log()를 이용할 수 있다 | 오류파악을 위한 기본적인 디버그 기능만 제공함 |
| 차이점 - 테스트 속도 | 같은 로직일 경우 Cypress의 구조가 더 간결하고 테스트 속도도 빠름 CI에서도 빠를까? 간단한 로직(페이지 이동, 페이지에 문자열 확인, 유효성 메시지 확인)으로 테스트 시 headless, unHeadless, CI 모두 Cypress가 빨랐다. 하지만 이는 실제 소스코드를 기반으로 한 것이 아니기 때문에 신뢰성이 떨어짐 | - |
| 차이점 - UI 모드 브라우저 테스트 | UI 모드로 테스트 시 여러 브라우저를 한번에 테스트하는 것이 불가능 | UI 모드로 테스트 시 여러 브라우저를 한번에 테스트하는 것이 가능 |
| 차이점 - 병렬 실행 | 병렬적 실행은 sorry-cypress 외부 라이브러리 필요 또는 병렬 실행을 위해 Cypress Cloud 유료 구독이 필요 | 병렬 실행 무료 지원 |
| 차이점 - Codegen | Codegen: experimental 기능으로 Cypress Studio가 있다 | Codegen: locator 자동 생성 npx playwright codegen [주소] |
| 차이점 - 리포트 | 리포트: 테스트 결과를 파일로 하나의 파일로 내보내기 위해서는 추가적인 npm 설치와 설정이 필요 | 리포트: config파일에 속성을 추가하여 파일 내보내기 가능 |
cypress에서 playwright으로 전환한 사례
위의 사례에서 cypress에서 playwright로 마이그레이션 한 이유는 동일했다.
자동화 소요시간을 줄이기 위해. 근데 Cypress의 병렬실행은 유료다.
마이그레이션의 원인은 cypress를 사용하던 유저들의 bitbucket, github에서 제공하는 CI 테스트 시간은 제한적인데 E2E가 CI 시간에 많은 비중을 차지하였고 제한적인 시간 안에 빠르게 테스트하기 위해 병렬실행을 무료로 제공해주는 playwright으로 마이그레이션했다.
어떤 이는 미약하게 테스트 속도가 빨라졌다고 했지만 결론적으로, 모든 유저가 테스트 속도가 빨라진 것을 경험했다고 한다.
참고
E2E란?