오늘의 질문
프론트엔드 E2E 테스트에 대해서 설명해주세요.
내답변
e2e 테스트란 end to end 테스트로 개발물을 사용자 관점에서 테스트 해보는 방식이다. 실질적인 유저 시나리오를 점검해볼 수 있으며 애플리케이션의 전체 흐름을 확인할 수 있다.
안의 기술보다는 실제 사용자가 어떤 방식으로 사용하고 오류 상황시 어떤식으로 나오는지를 고려하고 테스트를 만들어 볼 수 있다
대표적으로 사용하는 라이브러리는 여러가지가 있지만 나는 playwright 를 사용해봤다. 최근 mcp 를 통한 playwright 가 지원되기 때문에 ai 와 자연어로 테스트를 만들어볼 수 있다. 화면을 켜고 그 화면의 동작을 지시하면 그대로 테스트를 만들 수 있기 때문에 속도에 많은 발전이 있었던것 같다.
해당 테스트가 중요한 이유는 내가 버튼의 방식 혹은 동작을 변경했을때 이전에 정의해놓은 시나리오가 그대로 작동하는지를 한번에 확인할 수 있기 때문이다. 항상 유의하게 되는게 사이드 이팩트 인데 해당 테스트를 꼼꼼히 진행해놨다면 사이드 이팩트가 발생하지 않는가에 대해서 전방위적으로 확인이 가능하다.
이전에는 혼자 개발시 테스트까지 하려면 생각보다 많은 시간이 걸렸지만, 이제 ai 를 통한 빠른 동작을 구현할 수 있기 때문에 하루정도의 추가 시간을 들여서 테스트 구현을 하는게 이후의 개선 혹은 수정 작업에서의 많은 이득을 볼 수 있다고 생각한다.
제시된 답변
프론트엔드 E2E 테스트는 애플리케이션의 사용자 경험을 처음부터 끝까지 시뮬레이션하여 테스트하는 방식이다. 단위 테스트나 통합 테스트와는 달리 사용자 관점에서 전체 애플리케이션이 의도한 대로 작동하는지 검증한다.
브라우저 환경에서 실제 사용자 동작을 흉내 내어 다양한 시나리오를 테스트하며, 버튼 클릭 페이지 이동 데이터 입력등을 포함한다.대표적인 도구는 Cypress, Playwright 가 있다.
해당 테스트를 진행하면 사용자와 동일한 방식으로 애플리 케이션을 테스트하므로, 사용자에게 직접적인 영향을 미치는 오류를 조기에 발견할 수 있다. 이는 프로덕션의 안정성을 높히고 , 실제 배포 후 발생할 수 있는 리스크를 줄이는 데 도움이 된다. 중요한 사용자 흐름이나 비즈니스 로직이 포함된 페이지에 적용하면 효과적.
유닛 테스트로도 안정성을 높힐 수 있지 않나요?
유닛 테스트는 개별적인 코드 조각이 제대로 동작하는지는 확인하지만, 전체 시스템의 흐름과 사용자가 실제로 겪는 경험을 확인하지는 않는다. 로그인 기능을 예로 들때 유닛 테스트는 올바른 사용자 정보가 들어왔을때 인증이 성공하는지를 확인하지만, 로그인 이후의 페이지 이동, 세션 유지, 렌더링 등은 확인하지 못한다.
반면 E2E 테스트는 애플리케이션을 사용자 관점에서 검사하기 때문에 모든 시스템이 통합적으로 잘 작동하는지 확인이 가능하다. 사용자가 실제로 겪게 될 시나리오를 점검함으로써 전체 시스템 관점에서의 오류를 조기에 발견할 수 있다.
따라서 유닛테스트와 E2E 테스트를 상호 보완적으로 함께 활용하는게 좋다. 유닛 테스트를 통해 개별 컴포넌트를 신속하고 정확하게 검사하여 디버깅 시간을 줄이고 , 코드의 작은 변화가 의도한 대로 작동하는지 확인한다. 반면 E2E 테스트는 애플리케이션의 사용자 흐름을 점검하여 배포 후 발생할 수 있는 치명적 문제를 예방한다.
