E2E 테스트 도입 계기와 도입 후 느낀 점

March 14, 2024

E2E 테스트 도입 계기

서비스 개발이 완료되어 배포되기 전에는 서비스의 동작 테스트를 QA에서 일차적으로 테스트 단계를 거치게 된다.

개발자와 QA 사이의 시간이 늘어나면 서비스 배포에 걸리는 시간이 늘어나게 된다. 이 시간을 줄이기 위해서는 개발 단계에서 테스트를 먼저 진행하여 최대한 오류가 없는 상태로 배포 요청을 하는것이 좋다.

그렇다면 유닛테스트가 아닌 E2E 테스트를 도입하는 이유는 무엇일까?

E2E테스트는 모듈의 무결성과는 상관없이 실제 사용자의 사용 흐름이 오류없이 진행되는 가에 초점이 맞춰져 있다. 결국 서비스는 사용자에게 사용이 되어야하기 때문에, 사용 흐름 중에 발생된 문제가 가장 중요하게 해결되어야 할 문제이다.

따라서 개발 중 실제 사용자의 사용 흐름에 문제가 없는지 확인하기 위해 E2E 테스트를 도입하게 되었다.

테스트 시간이 오래 걸린다.
1. E2E 테스트는 서비스 사용의 흐름을 테스트하기 때문에 테스트에 오래 걸리고, 사용 시나리오가 변경되면 E2E 테스트도 수정되어야 하기 때문에 비용이 많이 발생하게 된다. 따라서 꼭 필요한 테스트만 수행해야 한다.
기존 QA의 업무와 겹치게 된다.
1. 처음 E2E 테스트를 도입할 때 가장 많이 나온 불만이 QA에서 해야할 일을 왜 개발자가 시간을 들여야하는지에 대한 불만이었다. E2E 테스트가 시간 비용이 정말 많이 드는 일이기 때문에 개발자는 E2E테스트를 구축할 때 개발보다는 테스트에 시간을 많이 쓰게 된다. 이에 불만이 많이 생길 수 있다.
2. 한번 시나리오를 써두면 기본적인 테스트를 빠르게 자동으로 돌릴 수 있다. 다만 사용 시나리오가 변경되면 다시 E2E 테스트를 수정해야하고 시간이 많이 들기때문에 이 점에 대해 충분히 고려를 해야한다.

사용자의 사용 흐름에 맞게 테스트한 뒤 배포하기 때문에 코드에 대한 신뢰도가 상승한다. 꼭 필요한 기본 흐름에 대한 테스트가 구축이 되어 있다면 코드 작성 후 사이드 이펙트를 획기적으로 줄일 수 있는 방안이 될 수 있을 거라고 생각해 도입 결정을 하게 되었다.

생각보다 처음 테스트 환경을 구축하는 시간은 오래 걸리지 않는다.
개발 단계에서의 사이드 이펙트를 자동으로 줄일 수 있어, 코드 신뢰성이 향상되고 개발 시간이 단축된다.
하지만 테스트 코드를 작성하는 것은 프로젝트에 따라 아주 오래 걸릴 수 있다.
- 테스트 코드를 작성하는 시간을 줄이기 위해서는
  - 처음부터 테스트 코드를 염두해두고 컴포넌트 단위를 테스트 단위에 맞춰 작성하는 것이 좋고,
  - 모든 코드를 테스트하는 것보다는 사용자 입장에서 사용자가 사용하게 되는 주된 흐름에 대해서만 테스트를 작성하는 것이 좋다.
  - 테스트 코드 작성법에 대한 이해도가 높아질 수록 코드 작성 시간이 줄어들고 테스트에 걸리는 시간도 줄어든다.
E2E 테스트만으로 모든 코드를 테스트하는 것은 효율적이지 않다고 느꼈다.
- 사용자의 주된 사용 흐름이 아닌 부분은 유닛 테스트를 도입하는 것도 고려해봐야겠다는 생각이 들었다.

WebdriverIO
다양한 프레임워크 호환
- 🌐 React, Vue, Angular, Svelte 또는 기타 프론트엔드 프레임워크로 작성된 최신 웹 애플리케이션
- 📱 에뮬레이터/시뮬레이터 또는 실제 장치에서 실행되는 하이브리드 또는 네이티브 모바일 애플리케이션
- 💻 네이티브 데스크톱 애플리케이션 (예: Electron.js로 작성)
- 📦 브라우저에서 웹 구성 요소의 단위 또는 구성 요소 테스트
사용 방법을 위한 Docs와 API 명세서가 풍부하게 제공된다.
테스트 결과를 다양한 Log, Report, Video 등 다양한 형식으로 확인할 수 있다.

FE 테스트 전략과 E2E 테스트와 스토리북의 필요성에 대한 좋은 내용이다.

https://www.youtube.com/watch?v=q9d631Nl0_4&t=345s

참고

https://fe-developers.kakaoent.com/2023/230209-e2e/

https://tech.kakao.com/2022/02/25/angular-e2e-testing-2/

https://webdriver.io/docs/api