Playwright E2E 테스트 솔직 후기

Cypress가 느려서 갈아탔다

E2E 테스트를 Cypress로 돌리고 있었는데, 테스트 42개 실행에 7분 38초가 걸렸다. CI에서 이 시간이 병목이었다. PR 올릴 때마다 8분을 기다려야 하는 건 좀 아니었다.

Playwright가 빠르다는 얘기를 듣고 전환을 결심했다. 같은 테스트를 Playwright로 옮기니까 2분 12초. 3.5배 빨라졌다. 병렬 실행이 기본이라 그렇다.

마이그레이션은 생각보다 수월했다

Cypress와 Playwright의 API가 비슷해서 기계적으로 변환할 수 있는 부분이 많았다. cy.get('.button').click()이 page.locator('.button').click()으로 바뀌는 정도. 42개 테스트를 옮기는 데 이틀 걸렸다.

근데 cy.intercept() 같은 네트워크 모킹 부분은 Playwright의 page.route()로 바꿔야 했는데, API가 미묘하게 달라서 여기서 시간을 좀 먹었다.

자동 대기가 진짜 좋다

Cypress도 자동 대기를 하지만 Playwright의 auto-waiting이 더 세밀하다. click()을 하면 요소가 보이는지, 클릭 가능한지, 애니메이션이 끝났는지까지 자동으로 확인한다. Cypress에서 cy.wait(1000) 같은 하드코딩 대기를 넣었던 곳이 8군데 있었는데, Playwright에서는 전부 필요 없어졌다.

flaky test가 확 줄었다. Cypress에서 10번 돌리면 1-2번 실패하던 테스트가 Playwright에서는 50번 돌려도 전부 통과했다.

(flaky test 잡느라 쓴 시간을 생각하면 진작 옮길 걸.)

근데 불편한 점도 있다

디버깅 경험이 Cypress보다 떨어진다. Cypress는 브라우저에서 시간 여행 디버깅이 된다. 각 스텝에서 DOM 상태를 스냅샷으로 볼 수 있다. Playwright의 Trace Viewer도 있긴 한데, 별도로 trace를 활성화해야 하고 파일을 열어서 봐야 한다.

그리고 Playwright는 headless가 기본이다. 테스트가 뭘 하는지 눈으로 보고 싶으면 --headed 옵션을 줘야 한다. 디버깅할 때마다 옵션을 추가로 쳐야 하는 게 약간 귀찮다.

크로스 브라우저 테스트

Playwright의 강점 중 하나가 크로스 브라우저 테스트다. Chromium, Firefox, WebKit을 한 번에 테스트할 수 있다. 근데 솔직히 이걸 실제로 쓰는 프로젝트가 많을까? 우리도 Chromium에서만 돌리고 있다. 다른 브라우저까지 돌리면 CI 시간이 3배로 늘어나니까.

WebKit에서만 터지는 버그를 한 번 경험하면 생각이 바뀔 수도 있는데, 아직 그런 일은 없었다.

결론적으로

Cypress에서 Playwright로 옮기길 잘했다. 속도와 안정성 면에서 확실히 낫다. 근데 Cypress가 나쁜 도구라는 건 아니다. 디버깅 경험은 Cypress가 여전히 좋고, 학습 곡선도 Cypress가 완만하다.

새 프로젝트라면 Playwright를 추천한다. 기존 Cypress 프로젝트를 옮길 만한 가치가 있는지는... 테스트가 30개 이상이고 CI 시간이 고통스러우면 옮기고, 아니면 굳이 안 해도 될 것 같다.