playwright test로 E2E 테스트 하기(vs. Cypress)

들어가기

이 글은 @Playwright/test를 활용해 e2e테스트를 작성해본 경험기이다. Cypress를 통한 E2E 테스트는 현업에서 오래 작성해봤고 전반적으로 만족스러운 경험이였지만 뭔지 모를 답답함이 분명 존재했었다. 그러던 와중에 playwright test가 2021년 6월 처음으로 1.x 버전이 등장했고 ‘비교해 봐야지’라는 생각이 들어 코드를 작성해봤다.

⚠️ 읽기 전에..

• 이 글은 둘 중 어떤 것이 우위에 있는지를 말하는 글이 아니다.
• 예제는 이 저장소(https://github.com/jung-han/test-cypress-playwright)에서 확인할 수 있다. 각각 playwright, cypress라는 이름으로 브랜치를 만들어뒀으니 확인할 수 있다. 예제 코드는 분명히 개선의 여지가 있다. 예제의 목적은 cypress와 playwright를 비교하는데 있다고 생각했기 때문에 굳이 바꾸지 않았다.
• Cypress 사용은 충분히 익숙한데 비해 Playwright test는 아직 그만큼 익숙하지 않은 상태에서 비교를 했기 때문에 ‘어 그거 아닌데!’ 할 수 있다. 그럴때는 댓글을 꼭 남겨주면 너무 고마울 것 같다.

Playwright?

로고가 뭔가 하회탈 같아서 좋다

먼저 Playwright가 뭔지 간단하게 설명을 하고 넘어가도록 하겠다. Playwright는 마이크로 소프트웨어 개발하고 있는 Node.js오픈소스 라이브러리로 단일 API로 Chromium, Firefox , WebKit을 자동화한다.

puppeteer를 사용해보고 playwright를 사용해보면 이 두 개의 API 사용방법이나 UI 부분에서 상당히 흡사하게 느껴질 것이다. 초기에는 구글의 한 팀에서 puppeteer를 개발했지만 좀 더 다양한 렌더링 엔진에 대한 개발에 의견이 있어 Microsoft로 넘어와 playwright를 개발했다고 한다. 관련된 내용이 궁금한 분들은 이 링크로 들어가 좀 더 읽어보길 바란다.

즉, Playwright 자체는 cypress처럼 테스트를 위해 만들어진 도구는 아니다. 이 글(Puppeteer로 회사 경매에서 득템하기) 처럼 사이트를 크롤링하거나 브라우저내에서 여러가지 동작들을 실제와 비슷하게 자동화 할 수 있다.

@playwright/test?