Member-only story
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?
@playwright/test는 playwright에서 구동되는 테스트 프레임워크다. 대부분의 E2E 테스트 러너나 프레임워크들이 제공하는 기능들이 제공된다. 자체적인 assertion 또한 존재하며 Cypress처럼 외부의 chai나 Mocha, Jest같은 assertion library나 서드 파티 테스트러너를 사용할 수 있다.
(관련 링크: https://playwright.dev/docs/test-runners#playwright-test)
스펙 비교
본격적으로 코드를 작성하기 전에 먼저 지원 브라우저나 커뮤니티 규모, 가이드 문서를 비교해보자. (시간이 없는 분들은 지원 브라우저 정도만 보고 넘어가도 괜찮다.)
지원 브라우저
Cypress의 경우 크로미움 기반의 브라우저(에지나 일렉트론, 크롬 등등..)과 파이어폭스 두 브라우저를 지원한다. 추가적으로 여러 브라우저를 지원할 예정이라고 말을 하고 있지만..몇 년째 소식은 없다. 관련된 내용은 여기에서 확인할 수 있다.
Playwright 또한 크로미움 기반의 브라우저와 파이어폭스, 그리고 사파리같은 Webkit 기반 브라우저를 지원한다. 관련된 내용은 여기서 확인할 수 있다.특징적인 것으로는 실제 모바일 브라우저 환경을 제공하려는 여러 움직임을 Playwright에서 확인할 수 있다. 안드로이드 크롬이나 안드로이드 웹뷰는 실험 모드로 이미 제공하고 있다. Cypress는 모바일 환경을 제공하려는 움직임이 없고 ionic을 활용해 테스트를 하라고 안내하고 있어 비교가 될 수 밖에 없다. 또한, 테스트하고자 하는 브라우저를 선택해서 해당 브라우저만 다운 받을 수 있다.(링크…
