Cypress vs Playwright - 2023년에는 어떤 리액트 테스팅 툴을 써야할까? (Feat. Cypress vs Playwright: Which is best for E2E testing)

Cypress는 진짜 좋은 테스팅 툴입니다. testing-library에 비해서 페이지 전체를 화면을 띄워, 직접 유저가 이용하듯이 테스트를 할 수 있어요.

 

그런데 제가 Cypress에서 마주한 이슈들이 몇 개 있었습니다.

- iframe 지원이 미흡

- 멀티 도메인이 안됩니다.

- 일렉트론 기반으로 테스트에서 되는 것이 브라우저 기반의 테스트에서 되지 않는 현상

 

그래서 Cypress말고 어떤게 있을까 생각해봤는데, Microsoft에서 유지보수하는 Playwright를 발견했습니다.

 

Cypress와 Playwright를 비교하자면 이렇습니다

	Cypress	Playwright
장점	배우기 쉬움	크로미움 기반 브라우저, 사파리, 파이어폭스 모두 지원
	간단한 적용이 빠름	멀티 도메인, 멀티탭 지원
	테스팅 대시보드 좋음	JavaScript, TypeScript, Java, Python, .NET 언어 지원
	레코딩 제공(구독 시)	빠름
	파이어폭스, 일렉트론, 크로미움 기반 브라우저 지원	멀티브라우저 동시에 테스트 가능
	E2E 테스팅을 위한 툴	로컬에서도 Parallelization 지원
	지원 좋음 및 꽤 오래됨(커뮤니티 굿)	자바스크립트 퍼스트
		호버 지원
		iframe이 네이티브 지원
		로그인 등 auth를 재사용하면서 테스트 가능 및 로그인 테스트 쉬움
		test runner 선택 가능(예를 들어 Jest, 하지만 @playwright/test라는 기본 테스트러너를 추천)
		완전 무료
		디펜던시 별로 없음
단점	멀티도메인 지원안함	최신 기술이라서 Cypress에 비해 참고자료 부족
	로그인 등 auth를 테스트하기 위해서는 많은 세팅필요(멀티 도메인 지원 안함)	API가 Cypress에 비해 많이 바뀜
	브라우저 멀티 탭 지원안함	automation과 testing framework의 믹스 버전
	사파리 등과 같은 웹킷기반 브라우저는 지원안함	러닝커브가 가파름
	멀티 브라우저를 동시에 테스팅 불가능	대시보드가 부실함
	iframe 지원 한정적
	hover 지원 안함
	syntax chaining
	더 좋은 기능은 돈내야함

 

만약 디자인 시스템을 만든다면 둘 다 사용해도 좋다.

만약 완전한 하나의 페이지를 만들 경우 Playwright를 선택해도 좋을 것 같다.

(왜냐하면 요즘은 소셜로그인으로 인해 멀티도메인 지원이 필요하기 때문)

 

REFERENCE

https://cathalmacdonnacha.com/cypress-vs-playwright-which-is-best-for-e2e-testing

Cypress vs Playwright: Which is best for E2E testing?