20221121 TIL e2e 테스트 도구 장단점 비교하기

 

기존에 Cypress와 Playwright을 사용했던 경험이 있었고, 

이번 강의에서는 CodeceptJS를 사용해서 e2e테스트를 작성했기 때문에

각각의 장단점을 비교해보면 좋겠다는 생각이 들었다.

 

먼저, e2e테스트는 서비스가 사용자 시나리오대로 잘 작동되는지 확인하기 위한 테스트이다.

유닛 테스트는 각각의 부분이 제대로 동작하는지 체크하는 것에 중점을 둔다면,

e2e테스트는 그 모든 것이 다 어우러진 실제 서비스가 사용자가 시나리오대로 문제없이 잘 돌아가는지 확인하게 된다.

 

유닛테스트가 통과한 것만으로 안심하면 아래와 같은 일이 발생할 수 있다.

https://cdn-media-1.freecodecamp.org/images/8NtBfj6HITU093EGaYhfynsMecih3civAcEY

e2e테스트를 작성해두게 되면 매번 수동으로 코드를 수정할 때마다 다시 확인해 볼 필요없이 

e2e테스트를 돌려서 수동으로 돌리는 것보다 훨씬 빠르게 확인해볼 수 있다.

물론 자동화된 테스트만 믿을 수는 없지만, 매번 모든 것을 수동으로만 테스트하는 것에 비해 많은 수고를 덜 수 있다.

 

e2e테스트를 작성하는 툴에 여러 가지가 있는데, 오늘은 내가 경험해 본 Cypress, Playwright, Codecept을 비교해보고자 한다.

 

Cypress는 GUI가 매우 잘 되어 있었다.

매 단계마다 스냅샷이 찍히고, 선택된 요소를 확인할 수 있기 때문에 무슨 일이 일어나는지 쉽게 확인해서 디버깅하기가 편했다.

그리고 비동기 방식으로 작동해서 잠깐 기다려줘야 하는 부분들을 자동으로 기다려준다.

즉, 테스트가 즉시 실패하더라도 바로 넘어가지 않고, 다시 확인을 해준다.

이는 동작이 정말로 실패했을 때도 설정된 시간이 지나가기까지 기다리게 되면서

전체 테스트 시간이 매우 길어지게 되어 때로는 단점으로 작동할 수도 있지만,

cypress.json의 defaultCommandTimeout을 조절해서 기다리는 시간을 조절할 수 있기 때문에 

오히려 기다리기 위한 코드를 덜 작성해서 깔끔한 코드를 작성할 수 있다는 장점이 있었다.

하지만 다수의 브라우저나 다수의 탭을 동시에 테스트할 수 없다는 단점이 있다.

그리고 브라우저에서 테스트가 돌아가기 때문에 typescript나 javascript로만 테스트를 작성할 수 있다는 단점도 있다.

 

Playwright을 이용하면 cypress의 단점인 여러 페이지를 동시에 테스트할 수 없는 부분을 해결할 수 있다.

https://www.youtube.com/watch?v=fncL63KRA-0

그리고 cypress와 달리 typescript나 javascript외에 Java같은 다른 언어들도 지원한다.

하지만 debug모드로 Playwright Inspector를 켜서 cypress GUI와 비슷하게 디버깅을 할 수 있지만,

cypress GUI가 디버깅을 하기 조금 더 쉬웠던 것 같다.

(npx playwright show-report에서 확인할 수 있는 정보들을 cypress는 테스트를 돌리면서 한 번에 확인할 수 있는 느낌!)

https://playwright.dev/docs/debug

const { test, expect } = require('@playwright/test');

test('homepage has Playwright in title and get started link linking to the intro page', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);

  // create a locator
  const getStarted = page.getByRole('link', { name: 'Get started' });

  // Expect an attribute "to be strictly equal" to the value.
  await expect(getStarted).toHaveAttribute('href', '/docs/intro');
});

그리고 코드를 위와 같이 async await을 이용해서 작성해야 해서

많은 await을 써야하고, 실수로 await을 쓰지 않은 경우를 주의해야 했던 기억이 있다.

 

CodeceptJS는 코드숨을 수강할 때 CodeceptJS로 작성된 e2e테스트를 돌려보기만 했었다가 처음 써봤는데,

가장 두드러진 특징은 개발자가 아닌 사람도 쉽게 코드를 이해할 수 있을 것 같다는 점이다.

I.amOnPage('https://github.com');
I.click('Sign in', '//html/body/div[1]/header');
I.see('Sign in to GitHub', 'h1');
I.fillField('Username or email address', 'something@totest.com');
I.fillField('Password', '123456');
I.click('Sign in');
I.see('Incorrect username or password.', '.flash-error');

코드임에도 불구하고 거의 영어 문장과 흡사한 것을 확인할 수 있다.

프로그래밍을 잘 모르는 사람과 함께 인수테스트를 확인하며 협업하기에는 CodeceptJS가 셋 중 가장 좋을 것 같았다.

그리고 Cypress에 비하면 조금 부족하지만 CodeceptJS도 GUI가 있다.

 

어떤 e2e테스트 툴을 사용하는 게 제일 좋을지는 상황마다 다를 것 같고,

결정을 내릴 때는 각각의 장단점을 비교해서 가장 좋은 도구를 선택하면 될 것 같다.

각각의 장단점을 비교하는 것이 시간도 꽤 걸리고 새로운 툴을 익히는 것이 시간이 조금 들지만,

어떤 결정을 할 때 나의 의견을 피력하려면 많이 경험해보고, 실험을 해서 장단점을 파악해둬야할 것 같다.

매번 같은 방식을 이용하지 말고 여러 방식을 이용해보고, 나의 의견을 정리하는 활동을 꾸준히 해보자!