Playwright vs Cypress: e2e 테스팅 툴 비교 - Playwright가 압도적 승자인 이유

엔드 투 엔드(e2e) 테스팅은 현대 웹 개발에서 필수적인 단계로 자리 잡았습니다. 이 과정에서 Playwright와 Cypress는 가장 주목받는 도구들입니다. 두 툴 모두 다양한 기능들을 지원하고 많은 사용자가 있습니다. 하지만 현재시점에서 playwright이 압도적인 승자입니다. 이번 글에서는 api의 완성도, 디버깅 기능, 테스트 성능 세 가지 측면에서 두 도구를 비교해 보겠습니다.

1. 명시적인 api 문법 지원

1-1) 로케이터 구문

cypess의 경우

cy.get("input.post-title").type("My First Post");
cy.contains("button", "생성").click();

playwright의 경우

await page.getByLabel("게시판 제목").fill("My First Post");
await page.getByRole("button",{ name: "생성" }).click();

게시판의 제목을 입력한 후 게시판을 생성하는 예제입니다.
cypress의 경우 기본적으로 css선택자를 중심으로 필요에 따라 텍스트 선택자를 활용합니다. 반면에 playwright은 getByLabel이라는 인풋 전용 api와, getByRole이라는 웹의 role 기반 선택자를 지원합니다. A11y의 롤이라는 개념이 물론 생소하겠지만, 결국 자주 쓰이는건 button, link 같이 몇개 되지 않습니다.

1-2) 어셜션 구문

cypess의 경우

cy.url().should('include', '/commands/actions');

playwright의 경우

await expect(page).toHaveURL(/.*\.commands\/actions/);

해당 페이지가 특정 url을 갖고 있는지 확인하는 예제입니다.

cypress의 경우 should의 첫번째 인자로 'include'라는 문자열을 입력받는 방식이지만, playwright의 경우 expect가 인자에 따른 다양한 메소드를 지원합니다(page인 경우, locator인 경우 등 타입을 인식해서 맞춤 메소드 제공)

위의 로케이터와 어셜션 구문에서 보듯 playwright이 더 안전하고 명시적인 api문법을 제공한다고 생각합니다.

2. IDE에 통합된 디버깅 지원

cypress의 경우

cy.get('a').debug().should('have.attr', 'href')

보면 "반드시" 코드에 debug() 혹은 pause()같은 메소드를 작성해야 합니다. 또한 전용 테스트 러너에서만 확인 가능합니다.

playwright의 경우 코드상의 수정 없이 디버깅을 지원합니다.

npx playwright test --debug

이런식으로 cli 옵션에 디버그를 주면 자동으로 await 구문을 기준으로

스텝오버로 하나씩 진행 가능합니다.

뿐만아니라 ide 내에서도

보시는 바와 같이 breakpoint와 스텝오버 (await 단위로 진행), 스텝인(브레이크 포인트 단위로 진행), 스텝 아웃(브레이크 포인트 단위로 되돌리기)을 지원합니다.

3. 테스트 성능(속도)

3-1) 테스팅 툴 성능비교

playwright, cypress를 포함한 5개의 테스팅툴의 가장 간단한 시나리오부터 가장 복잡한 시나리오까지 비교한 결과입니다. 보면 cypress가 항상 최하위인 것을 확인 할 수 있습니다.

하지만 실제 차이는 더 큽니다.

3-2) 이유 1 병렬 처리 미지원

playwright의 경우 기본적으로 병렬처리입니다. 하지만 cypress는 직렬테스트만 지원합니다.

3-3) 이유2 headless 최적화 차이

playwright의 경우 브라우저 외부에서 해당 브라우저의 네이티브 디버깅 프로콜을 활용해서 통신합니다. 따러서 병렬처리도 가능하고, ui 랜더링도 생략 가능합니다. 이를 통해 최적의 속도를 냅니다.

반면 cypress는 브라우저 내부에서 실행하기 때문에 병렬처리가 제한적입니다. 또한 ui랜더링 생략 최적화도 부족합니다.

3-4) 가장 크게 체감 되는 순간은 대량 테스트를 할때

우리가 앱을 테스트로 관리할때 가장 테스트 속도가 체감되는 순간이 언제일까요? 보통 배포 전에 전체 테스트를 할때일겁니다. e2e에서는 병렬로 적어도 headless로 테스트할 확률이 높죠. 그렇기 때문에 실제로 체감되는 성능차이는 더 클 수 밖에 없습니다.

4. 결과로 보여지는 npmtrend

아무리 성능이 좋아도 그게 결과로 이어지는 경우는 극히 드뭅니다. 결국 기술도 시장논리에서 벗어날 수 없기 때문이죠. 하지만 최근 5년간 npmtrend를 보면 cypress는 선두주자였지만 정체되었고. playwright은 더 가파르게 성장하고 있습니다.

프론트엔드 개발자로 한 단계 성장하고 싶다면?

>>Nextjs와 playwright, vitest로 TDD 입문하기<<를 확인해보세요