들어가기 전에.. (vs. Cypress)

Cypress에서 Playwright로 왜 넘어갔나??

Cypress 개발 시 어려움 점

• 테스트 환경 로딩, 테스트 수행 시 너무 많은 시간이 소요한다는 느낌을 받았습니다.
• 테스트 환경에서 엘리먼트를 Cypress 선택 시 못 찾는 경우가 다수 발생했고, 원인을 찾을 수 없었습니다.
• Cypress 만에 문법이 FE 개발자분들에게 익숙하지 않았습니다.
• 테스트 속도 개선을 위해서 병렬 테스트 하고 싶어도 추가적인 금액을 지불해야하는 어려움이 있었습니다.

→ 해당 어려움을 극복하기 위해서 다른 테스트 라이브러리를 찾아보게 되었고, 찾던 중에 위에 어려움점을 해결해 줄 수 있는 라이브러리를 하나를 발견하게 되었습니다. 바로, 마이크로소프트에서 만든 Playwright 입니다.

Cypress vs Playwright

• 테스트 속도 비교

  • e2e 테스트 고립을 위해서 링크 이동부터 진행 할 경우 spec 1개 기준으로는 볼 경우 Cypress 보다는 엄청 빠르진 않았다.
    • 단, 병렬로 실행할 경우 case 가 많아 질 경우 테스트 속도가 빨라지는 걸 느낄 수 있었다.
    • https://emewjin.github.io/playwright-vs-cypress/#테스트-속도가-cypress보다-진짜-더-빠를까
  • Playwright beforeAll 함수를 제공하고 있어서 SPA 구조로 되어 있는 웹에서는 초기에 링크 이동 후 page.goBack() 이동 시 beforeEach 대비해서 테스트 속도가 빨라지는 걸 느낄 수 있었다.(단, beforeAll에서는 page 얻어올 수 없어서 새로 만들어야하는데 그럴 경우 병렬 실행을 할 수가 없었다)
  • 회사에 프로젝트에 추가해 본 결과 대략 5배 정도 빨리진다는 걸 알 수 있었습니다.

• 테스트 지원 환경

  • Playwright
    • 크로미움 기반 브라우저, 파이어폭스, 사파리 지원
    • 모바일 브라우저 제공
    • 실험모드: 안드로이드 크롬/웹뷰, Electron 지원예정
  • Cypress
    • 크로미움 기반의 브라우저, 파이어폭스 2가지만 지원

• 병렬 테스트 지원

  • Playwright
    • 모든 테스트를 병렬로 진행
    • 최대 4개까지 worker thread 세팅 가능
      • 단 worker thread 지정 시 테스트 단위로 고립해서 작성이 필수!!
  • Cypress
    • 모든 테스트를 직렬로 진행
    • 단, 병렬 테스트 진행 시 유료 플랜을 가입해야지 CI/CD 환경에서 별렬 테스트를 수행 가능 → 돈을 내야해요ㅜㅜ)

• 많은 이벤트 지원

  • hover, drag 지원(cypress 미지원)

• 문법

  • 지원하는 언어에 대한 순수 문법을 지원한다.(cypress에서는 자체 문법을 제공)

  

Playwright 소개

Playwright는 MS에서 만든 오픈소스 웹 테스트, 자동화 라이브러리 입니다. 하나의 API로 Chromium, Firefox, WebKit, 모웹(Chromium, Safari등)까지 테스트 할 수 있습니다.(Next 버전에서는 ADB를 이용한 Android Chrome, Electron )도 지원하는 걸로 보입니다)