1. Playwright란?
Playwright란 MS에서 제작한 E2E 테스트 도구로 여러 OS, 브라우저, 개발 언어를 사용할 수 있다. Puppeteer의 개발자들이 MS로 넘어와 제작한 툴인만큼 Headless Chrome을 기반으로 합니다.
E2E : end to end 테스트로 사용자 시나리오를 처음부터 끝까지 테스트 하는 것
Headless Chrome : 사용자 UI 없이 실행되는 Chrome 브라우저 (UI를 사용하지 않기 때문에 사용되는 자원이 적고 속도가 빠름)
2. 특징
- 크로스 브라우저 & 크로스 플랫폼 지원
지원 브라우저 : Chromium (Chrome, Edge), WebKit (Safari), Firefox 등
OS : Windows, macOS, Linux - 동기, 비동기 지원
async/await , sync
- 여러 개발 언어 지원
Python, Js/TS, Java, C#
- 자동 대기(Auto Waiting) 지원
자동 대기 : 테스트 스크립트가 웹 페이지의 요소들이 로드(준비)될 때까지 자동으로 대기하는 기능
- Codegen 지원
실제로 사용자가 수행한 작업을 기반으로 테스트 코드를 생성하는 도구
수동으로 코드 작업을 할 필요없이 브라우저 상의 작업을 기록해 코드로 변환해줌 - Headless, WebSocket 기반으로 빠른 속도
Headless 기반으로 UI도 안띄우고 WebSocket 기반으로 브라우저를 직접적으로 동작 시키지 않으니 타 E2E Tool보다 속도가 빠르다.
- 병렬 실행 지원
여러 테스트 스크립트의 병렬 실행을 기본적으로 지원한다. 이 때문에 규모가 큰 테스트일수록 더욱 빠른 테스트가 가능하다.
3. E2E Tool 비교
E2E Tool에는 대표적으로 Selenium, Puppeteer, Cypress, Playwright가 존재한다.
먼저 근 2년간의 npm trends 사이트에서 확인할 수 있는 다운로드 수 동향 그래프이다.
차트를 통해서 2024년 중반부터 최근까지 Playwright를 사용하는 개발자들이 다른 도구들에 비해 월등히 많아진 것을 볼 수 있다.
- 요약
- Playwright : 최신 E2E Test Tool로 여러 브라우저, OS, 언어를 지원하고 병렬 실행을 기본으로 지원한다. 하지만 너무나 많은 기능으로 인해 사용자 별 러닝 커브가 생길 수 있다.
- Selenium : 가장 오래된 도구로 다양한 정보가 있는 생태계가 존재하고, 다양한 언어와 브라우저를 지원하지만 타 도구들에 비해 느린 속도와 자동 대기와 같은 기능을 구현할 때의 복잡함이 생길 수 있다.
- Puppeteer : Chrome/Chromium 최적화 도구로, 속도와 안정성이 뛰어나지만 다른 브라우저 지원이 제한적이다. 그리고 Puppeteer의 개발자들이 MS로 옮겨서 만든게 Playwright기 때문에 굳이..?
- Cypress : GUI 기반으로 초보자 친화적이지만 대규모 프로젝트에서의 테스트 속도는 병렬 실행을 기본적으로 지원하지 않기 때문에 속도가 느려질 수 있다.
4. 테스트 코드
# playwright test
from playwright.sync_api import sync_playwright
# Playwright 시작
with sync_playwright() as p:
# 브라우저(Chromium) 열기
browser = p.chromium.launch(headless=False) # headless=False는 브라우저가 눈에 보이도록 설정
page = browser.new_page()
# 웹 페이지 열기
page.goto('https://velog.io/@kimpass189/posts')
# 페이지 제목 출력
print(page.title())
# 검색창에 입력 locator("#<id값>")
# search_box = page.locator("#APjFqb")
# search_box.fill("카리나")
# Enter 키 입력하여 검색 실행
# search_box.press("Enter")
# 결과 페이지가 로드될 때까지 대기
# page.wait_for_load_state("networkidle")
print("검색 완료!")
# 로드된 페이지 스크린샷
page.screenshot(path="./screenshot/testing1.png")
# 브라우저 닫기
browser.close()기본적인 명령어
# 브라우저 실행
browser = p.chromium.launch(headless=False)
# 페이지 생성
page = browser.new_page()
# URL 이동
page.goto('https://example.com')
# 현재 페이지 스크린샷
page.screenshot(path='<원하는저장경로>')
# 원하는 버튼 요소 클릭
page.click('<button id값>')
# 원하는 input요소 중 name이 q인 곳에 Playwright를 삽입
page.fill('input[name="q"]', 'Playwright')
# 브라우저 종료
browser.close()
# 해당 요소 나올때까지 대기
page.wait_for_selector('div#result')
# 페이지 1000px 스크롤 JavaScript 코드 기반
page.evaluate('window.scrollBy(0, 1000)')
# route를 통해 네트워크 요청을 가로채고 응답을 수정하거나 로깅할 수 있음
page.on('route', lambda route: route.continue_()) 5. 결론
결국 최근 동향을 보아도, 다른 도구들과 기능적으로 비교해봐도 제공하는 기능, 속도면에서 굉장히 좋은 성능을 보이고 있기 때문에 E2E 테스트 도구로 Playwright를 도입하는게 좋다는 입장이다.
