Introduction

테스트는 번거롭습니다. 중간에 코드가 변경되면 계속 수정보완해야 하죠. 하지만 이제 막 배포한 서비스에 생각지도 못한 장애요소가 있었다면, 그 결과 사용자 경험이 망가지고 서비스 이탈로까지 이어진다면, 생각만 해도 끔찍합니다.

테스트 케이스를 설계하고 관련 코드를 작성하는 데에는 시간과 에너지가 필요합니다. 하지만 매번 배포할 때마다 테스트하는데 걸리는 시간과 리스크를 줄여준다면 결국 더 효율적인 프로세스라 볼 수 있습니다.

이번에 회사에서 Next.js로 개발하고 있는 서비스의 첫 번째 MVP를 런칭하기 전 효율적인 테스팅 프로세스를 도입하려고 고민했던 부분을 기록으로 남기고자 합니다.

테스트를 도입하기 전 고려사항

E2E 테스트에 대해 검색해보면 생각보다 많은 후기들을 찾아볼 수 있습니다. 유명한 구글 테스팅 블로그의 글과 댓글들을 보면 흔히 E2E 테스팅을 도입할 때 다음과 같은 일들이 벌어지는 걸 예상할 수 있습니다.

• 테스트의 효율성 : E2E 테스트는 통과 여부는 알려주지만 실패 이유는 직접 코드를 살펴봐야 알 수 있습니다. 테스트 코드가 제대로 관리되지 않는 경우 문제가 없는데도 테스트가 실패하는 일도 생기게 됩니다.
• 속도의 문제: E2E는 브라우저를 통해 서비스와 API를 직접 테스트하기 때문에 시간이 오래 걸립니다.

E2E 테스트를 효율적으로 하려면

Reference: https://fe-developers.kakaoent.com/2023/230209-e2e/#3-테스트-속도

위 그림처럼 E2E 테스트로 모든 버그를 잡아내려면 시간과 비용이 많이 소모됩니다. 구글 테스팅 블로그에서는 70/20/10 법칙을 추천하는데요. Unit, Integration 테스트로 촘촘하게 코드를 체크하고 E2E 테스트는 서비스의 사용자 시나리오에 따라 구성해야 합니다. E2E 테스트는 서비스를 기획할 때 계획했던 use case를 기반으로 전체 테스트 비중의 10% 수준을 유지하는 것이 바람직합니다.

느린 테스트 속도 개선하기

E2E는 기본적으로 시간이 걸릴 수 밖에 없기 때문에 모든 테스트를 순차적으로 진행하면 답이 없습니다. 그래서 대표적인 테스트 라이브러리인 Cypress와 Playwright은 모두 병렬 실행 옵션을 제공합니다.

Reference: https://docs.cypress.io/guides/cloud/smart-orchestration/parallelizationg

차이점이라면 Cypress는 테스트를 실행할 때 명령어 옵션으로 실행해야하는 반면 Playwright는 코드 레벨에서도 적용이 가능합니다.

How to run your Playwright test in parallel or in serial mode

따라서 E2E 테스트를 진행하기 전에

• 테스트 시나리오를 잘 설계해서 E2E 테스트에 너무 의존하지 않도록 하고
• 병렬 기능을 활용해 테스트 시간을 줄여나간다면

배포 프로세스에서 발생할 수 있는 에러를 방지하는 데 충분히 효과가 있다고 예상해 볼 수 있습니다.

Cypress vs Playwright

자 그렇다면 Cypress와 Playwright, 둘 중 어느쪽을 선택할 것인가. 본격적으로 비교해보겠습니다.

Cypress 12버전은 매 주 520만 가까운 다운로드를 기록하고 있습니다. 오랜 기간 발전되어왔고 관련 자료도 많습니다. 패키지 용량이 5MB인데 E2E뿐 아니라 다른 Unit 테스트까지 지원하기 때문에 그렇지 않나 생각합니다. Playwright은 주간 다운로드가 130만이 넘고 1.36버전이 최신입니다. 패키지 용량이 24KB밖에 차지하지 않는 것이 장점이라고 볼 수 있겠네요.

클라우드 기능을 사용하지 않는다면 Cypress도 Playwright처럼 오픈소스로 모든 기능을 비용 없이 사용할 수 있습니다. 둘 다 CI/CD 기능을 제공하고, github action과 연동이 가능합니다.

가장 큰 차이점: 실행환경

기능 상으론 큰 차이점이 없어보이는 두 라이브러리는 사실 근본적인 차이점을 가지고 있습니다. 바로 테스팅이 실행되는 환경 자체가 다르다는 점인데요. Cypress는 Electron App이고 Playwright는 Chrome DevTools Protocol을 사용합니다. 이로 인해 상당히 많은 개발자 경험이 달라지게 된다고 생각하는데요.

Cypress E2E 테스팅은 크롬, 파이어폭스, 일렉트론 3가지 브라우저에서 테스팅이 가능합니다.

Reference: https://images.app.goo.gl/JNKmZDMSPAHpk3h76

Cypress로 테스팅을 실행하면 위 이미지처럼 브라우저가 임베디드된 형태에서 왼쪽 사이드바로 테스트 결과를 확인할 수 있습니다.

Playwright는 마이크로소프트 소유이다보니 vscode와의 연동이 뛰어난데요. 익스텐션으로 설치하면 바로 사용할 수 있습니다.

위 스크린샷과 같이 애플 사파리 브라우저 테스팅도 지원하고요. 어떤 언어로 된 프레임워크든 상관없이 E2E 테스트를 진행할 수 있습니다. vscode와 너무 잘 연동되어 있어서 편했는데요, 특히 감탄했던 기능은 Record 기능이었습니다. 자세한 데모는 아래 영상에서 확인해볼 수 있구요.

Generating Playwright Tests in VS Code

결론

Cypress와 Playwright는 각자 장점을 가지고 있는 훌륭한 테스팅 라이브러리입니다. 저는 지난 팀 미팅에서 Playwright을 도입하는 걸 제안했는데요. 테스트할 엘리먼트를 선택하는 과정에서 Playwright의 개발자 경험이 훨씬 좋았기 때문입니다. 앞으로 MVP를 시장에 런칭하기 전 본격적으로 E2E 테스트를 작성하면서 관련 내용들 업데이트 해보도록 하겠습니다.