[매일메일] 프론트엔드 E2E 테스트란? (FE.250117/BE.250107)

테스트 코드가 필요한 이유

버그를 조기에 발견하고, 리팩토링을 수행할 때 유용함

개발 속도를 향상시키고, 코드에 대한 문서로서 역할을 수행할 수 있음

 

프론트엔드 E2E(End-to-End) 테스트(=기능 테스트, 브라우저 테스트)

1. 개념

- 어플리케이션의 사용자 경험을 처음부터 끝까지 시뮬레이션하여 테스트하는 방식

- 사용자 관점에서 전체 어플리케이션이 의도한 대로 작동하는지 검증함

- 테스트 과정에서 실제 사용자 동작을 흉내내어 시나리오를 테스트 함(버튼 클릭, 페이지 이동, 데이터 입력)

- 예시) Cypress, Playwright

 

2. 장점

- 사용자와 동일한 방식으로 작동시키기 때문에 사용자에게 직접적인 영향을 미치는 오류 조기 발견 가능

- 프로덕트의 안정성 높이고, 실제 배포 후 발생하는 리스크 줄이는 데 도움이 됨

- main user flow나 business logic(결제 등)이 포함된 부분을 검증하는데 적용하면 효과적임

 

통합 테스트(Integration Test)

1. 개념

- 다양한 구성 요소가 상호작용하여 전체 또는 일부 시스템이 예상대로 작동하는지 검증

- 실제 값에 접근해서 테스트함(실제 데이터베이스, 네트워크 등 외부 시스템)

 

2. 장점

- 여러 구성 요소 간의 상호작용을 검증하는 데 초점을 맞춤(시간은 단위 테스트보다 길어질 수 있음)

- E2E 테스트보다는 빠른 검증이 가능(실제 시나리오를 모두 검증하지는 않기 때문). 개발 초기 단계 테스트에 적합.

 

유닛 테스트(Unit test, 단위 테스트)

1. 개념

- 가능한 가장 작은 모듈이 의도한 대로 작동하는지 검증하는 방식

- 함수, 메서드, 클래스, 모듈과 같은 가장 작은 테스트 가능한 코드 조각

- 외부 모듈과 직접 값을 주고받는 것이 아닌 Mock을 사용해 테스트함(예상 외의 값이 개입하지 않음)

 

2. 장점

- 작은 단위라서 빠르게 테스트 할 수 있음. 자주 일어나는 버그를 잡을 때 좋음

- 코드 설계 구조가 명확하지 않으면 유닛 테스트가 어렵기 때문에 코드 구조 개선에도 도움 됨

 

유닛 테스트와 E2E 테스트의 비교

- 유닛테스트는 개별적인 동작은 확인하지만, 전체 시스템의 흐름과 사용자의 실제 경험을 확인하지 않음

    - 로그인 기능 유닛 테스트

      - 올바른 사용자 정보를 입력했을 때 인증이 성공하는지 확인.

      - 그러나 로그인 후 페이지 이동, 세션 유지, 렌더링은 확인하지 않음

 

- E2E 테스트: 애플리케이션을 사용자 관점에서 처음부터 끝까지 검사, 모든 시스템이 통합적으로 작동하는지

  - UI 상호작용, API 호출, 화면 전환 등 여러 구성요소 함께 작동 과정에서 발생할 수 있는 문제 탐지

  - 사용자가 실제로 겪게 될 시나리오 점검해 전체 시스템 관점에서 오류 조기에 발견

 

- 유닛테스트와 E2E 테스트를 상호 보완적으로 활용하면 좋음

   - 유닛테스트: 개별 컴포넌트 신속 정확 검사. 디버깅 시간 줄임.

   - E2E 테스트: user flow 점검해 배포 후 발생가능한 치명적인 문제 예방.

 

신뢰도: E2E>통합>유닛, 효율성: 유닛>통합>E2E

 

 

슬라이스 테스트

특정 레이어(controller, service, repository)에 대한 테스트

어플리케이션의 특정 슬라이스가 올바르게 작동하는지 확인하기 위해 작성

스프링의 특정 컴포넌트만 로드해서 테스트하므로 상대적으로 빠름

관련 어노테이션: @WebMvcTest, @DataJpaTest

---

 

출처

[1] 매일메일. 250117. 프론트엔드 E2E 테스트에 대해서 설명해주세요. 52번째. https://maeil-mail.kr

[2] Unit 테스트, 단위 테스트

https://velog.io/@seongwon97/Unit-Test-%EB%8B%A8%EC%9C%84-%ED%85%8C%EC%8A%A4%ED%8A%B8

 

[3] 유닛테스트, 통합테스트, 기능테스트란?

https://velog.io/@mon99745/%EC%9C%A0%EB%8B%9B-%ED%85%8C%EC%8A%A4%ED%8A%B8Unit-Test-%ED%86%B5%ED%95%A9-%ED%85%8C%EC%8A%A4%ED%8A%B8Integration-Test-%EA%B8%B0%EB%8A%A5-%ED%85%8C%EC%8A%A4%ED%8A%B8Funcional-Test%EB%9E%80

 

[4] 프론트엔드 통합 테스트로 더 안전한 웹 서비스 개발하기

https://techblog.woowahan.com/19509/

 

[5] GPT에게 E2E 테스트에 대해 질문

 

[6]  매일메일. 250107. BE. 단위테스트와 통합 테스트의 차이점은 무엇인가요? 83번. https://maeil-mail.kr