E2E Testing with Jest & Puppeteer

#testing #jest #puppeteer #e2e

입사후, 온보딩 프로젝트가 끝나고 정식으로 처음맡았던 일이 바로 E2E 테스트 관련 일이었다.

기존에 nightwatch로 동작하던 것을 jest + puppeteer 환경으로 변경하고 Test case를 추가하는 것!!

headless browser란?

A headless browser is a web browser without a graphical user interface.

출처: Wiki

GUI가 없이 작동되는(= 렌더링) 브라우저 라고 이해하면 된다.

jest에 대한 일반적인 내용 보단, Test case를 작성하면서 겪었던 문제와 경험 위주로 작성해보려고 한다.

이슈1: test 시작 전, beforeAll안의 함수들이 모두 실행되지 않고 테스트가 시작되므로 error발생.

beforeAll 안에 workspace에서 로그인후 해당 상담사의 상태를 체크하고, online이 아니라면 online으로 변경해주는 함수가 있었다.

상담사 상태가 온라인이어야만, 그 다음 test case들이 정상적으로 실행되기 때문에 반드시 beforeAll 함수 안에서 실행되어야만 했는데,

기다려주지 않고 다음 case들이 실행되어 그 이후 case들은 당연히 error가 발생하는 문제였다.

 beforeAll(async() => {
    .....
    await lib.login(AGENT.id, AGENT.password);
    await lib.checkUserState();
 });

jest문서에서 해결책을 찾을 수 있었다.

Optionally, you can provide a timeout (in milliseconds) for specifying how long to wait before aborting. The default timeout is 5 seconds.

default timeout이 5초이기 때문에, 아래와 같이 setTimeout 시간을 명시적으로 설정해주면 해결할 수 있었다.

jest.setTimeout(50 * DEFAULT_TIMEOUT);

이슈 2: 각각 다른 브라우저 2개에서 연관된 테스트 실행시, error 발생.

유저와 상담사간 상담이 진행되는 test case이기 때문에 브라우저 2개가 필요했다.

workspace와 채팅앱 화면을 왔다갔다 하며 테스트가 진행되어야 하는데, 채팅앱에서 workspace으로 화면에 접근이 되지 않았다.

알고보니, tc를 진행할 browser에 focus를 줘야 하는 것이었다.

browser를 컨트롤 하는 부분이므로, puppeteer의 bringToFront method를 이용하면 된다.
(각각 다른 브라우저 뿐만 아니라, 한 브라우저 내의 tab 전환도 가능하다.)

입사전 혼자 프로젝트를 진행할 땐, 테스트의 중요성을 잘 깨닫지 못해서 테스트 코드는 우선 순위에서 밀려나 작성하지 않았던 경우가 대부분이었다.

서비스 제품을 개발하는 팀에선, 테스트 코드가 필수인 걸 알게 됐다.
특히, 큰 feature들이 추가되는 경우라면 기존 로직이 동일하게 동작하는지 side effect이 없는지 등 에러를 방지할 수 있기 때문이다.

E2E 테스트와 더불어, unit 테스트 기반의 TDD를 실천하는 우리 개발팀이 될 수 있길 바라며...💪🏻

DEV Community