기능 테스트 자동화, 왜 Playwright를 선정했을까? (2)

Selenium, Cypress, Puppeteer, Playwright 자동화 도구 중 Playwright를 선정 한 이유에 대하여 기술합니다.
각 자동화 도구마다 장단점이 있으니 참고용으로 사용해주세요!

이전 글

2024.06.06 - [QA/기능 자동화] - 기능 테스트 자동화, 왜 Playwright를 선정했을까? (1)

 

기능 자동화 테스트 대상 분석

자동화 도구를 선정하기 전 테스트 대상이 어떤 테스트를 원하는지 분석하였습니다.

테스트 대상은 사내 제품인 채팅 상담 솔루션 제품이며, 고객과 상담사간의 대화를 지원하는 프로그램입니다.

테스트 대상인 상담 솔루션 제품은 어떤 테스트를 원할까요?

 

제품이 설치되는 환경은 고객사 환경마다 다르기에 어떤 브라우저를 쓸지 모르는 상태입니다.

그래서 우선적으로 크로스 브라우저 테스트 가능 여부에 대해 생각해봤습니다.

 

자동화 도구 별 크로스 브라우저 지원 현황

Selenium	Chrome, Firefox, Safari, Edge, Internet Explorer, Opera, Brave
Cypress	Chrome, Edge , Firefox, Electron
Puppeteer	Chrome, Edge
Playwright	Chrome, Edge , Firefox, Safari

 

역시 Selenium이 가장 오래된 자동화 도구답게 정말 다양한 브라우저를 지원해주고 있었습니다.

그 다음으로는 Cypress, Playwright였으며, Playwright는 Apple 기기에서 사용하는 Safari를 지원하는 점이 달랐습니다.

가장 지원이 적은 도구는 크롬 테스트 기반인 Puppeteer였습니다. 

 

브라우저 지원 현황으로만 보았을 때, Puppeter < Cypress <= Playwright < Selenium 순서가 될 것 같네요

자료 조사를 하는 도중, 문제점이 발견 되었는데, 고객사에서 IE11로만 사용하는 고객사들이 있어서 IE11테스트를 위해 Selenium을 제외한 다른 자동화 도구의 선정은 불가능 했습니다.

 

하지만 이부분은 기획 & 영업팀과 논의하여 더이상 업데이트 되지 않는 IE11의 지원은 그만하자라는 결론이 나와서 다른 자동화 도구도 확인해볼 수 있었습니다. 그래도 더 많은 브라우저 테스트를 지원하는 자동화 도구를 선정해야 했습니다 :)

 

다음은 테스트 속도 측면을 확인해봤습니다.

해외 사이트에서 4가지 도구에 속도를 비교한 자료가 있어서 첨부하였습니다.

 

 

자동화 도구 별 테스트 동작 시간 (참고자료)

 

첫번째는 단순 로그인 테스트를 비교한 결과입니다.

단순한 로그인 동작만 비교했을 때 Puppeteer의 속도가 가장 빨랐으며 Cypress 도구가 가장 느렸습니다.

도구마다 테스트 시작시간에 필요한 시간이 다르기 때문에 이러한 편차가 발생한 것으로 확인됩니다.

 

 

두번째 시나리오는 아래와 같습니다.

1. Logs in to app.checklyhq.com.
2. Creates an API check.
3. Deletes the check.

 

 

시나리오가 늘어나서 전체 시간이 늘어났으며 Playwright, Puppeteer는 속도가 거의 비슷한 모습을 볼 수 있었습니다.

두번째 테스트에도 가장 느린 항목은 Cypress 도구입니다.

 

 

세번째 테스트는 API 생성 시나리오와, E2E 스크립트가 포함되어있으며, 둘 다 로그인, 생성, 삭제 기능을 가지고 있습닌다.

두 가지 시나리오를 수행했을 때 결과이며, Playwright, Puppeteer, Selenium, Cypress 순서로 빠르게 테스트 수행 된 것을 확인할 수 있었습니다.

 

 

결론적으로 Playwright, Puppeteer, Selenium, Cypress 순서로 빠르게 테스트 된 것을 확인하였습니다.

 

마지막으로 제품은 고객과 상담사가 나뉘어 채팅을 할 수 있습니다.

이는 자동화 도구가 여러 탭으로 나누어 테스트를 지원 할 수 있어야합니다.

 

자동화 도구 다중 탭 지원 여부

Selenium	제한적 (브라우저 인스턴스 추가 필요)
Cypress	지원하지 않음
Puppeteer	지원 함
Playwright	지원 함

 

다중 탭을 지원하지 않는다는 점에서 Cypress는 더 이상 함께 할 수 없게 되었습니다.

 

총 정리를 해보자면 아래와 같습니다.

	지원 브라우저	다중 탭 지원 여부	테스트 속도 순위	출시년도
Selenium	Chrome, Firefox, Safari, Edge, Internet Explorer, Opera, Brave	△	3	2004
Cypress	Chrome, Edge , Firefox, Electron	X	4	2014
Puppeteer	Chrome, Edge	O	2	2017
Playwright	Chrome, Edge , Firefox, Safari	O	1	2020

 

정리된 자료를 기반으로 자동화 도구를 선정한다면, 브라우저 테스트가 수월하고, 속도가 빠르며, 다중 탭을 지원하는 도구이며, 이전 포스팅에 있는 npm trand에서 볼 수 있듯 우상향 그래프를 그리면서 빠르게 성장하고 있는 Playwright 도구를 선정하게 되었습니다.

 

Playwright 의 단점으로는 자료를 찾을 수 있는 커뮤니티가 부족하다는 점이 가장 큰 단점으로 꼽혔습니다.

 

 

하지만 요즘은 세상이 달라졌죠..!  GPT 4.0o에서는 Playwright 전용 GPT가 따로 존재합니다.

기능이나 자동화 아이디어를 GPT에 물어보면 잘 대답해주더라구요! 그래서 자료가 부족하다는 문제는 해결했습니다.

 

현재도 GPT와 협업하여 자동화 테스트 개발을 진행하고 있으며 중간중간 Playwright 관련 포스팅을 더 해볼 생각입니다. 

위 자료들은 제가 수행하는 프로그램에 맞춰 선정한 부분이 있기에, 참고용으로만 확인해주시길 바랍니다 :)

 

 

 

 

 

 

참고자료

https://betterstack.com/community/comparisons/playwright-cypress-puppeteer-selenium-comparison/

Playwright vs Puppeteer vs Cypress vs Selenium (E2E testing) | Better Stack Community

https://www.checklyhq.com/blog/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/

Cypress vs Selenium vs Playwright vs Puppeteer: Speed

https://dev.to/checkly/puppeteer-vs-selenium-vs-playwright-a-speed-comparison-569p

Puppeteer vs Selenium vs Playwright, a speed comparison