Playwright

Playwright는 Microsoft가 만든 오픈 소스 자동화 프레임워크입니다. Chromium, Firefox, WebKit 브라우저를 제어해 주요 브라우저 엔진에서 테스트, 스크린샷, 웹 자동화를 실행합니다.

Playwright로 할 수 있는 일

Playwright는 Chromium, Firefox(Gecko), WebKit이라는 세 주요 렌더링 엔진을 하나의 API로 자동화합니다. 같은 스크립트를 크게 바꾸지 않고 세 엔진에서 실행하는 교차 브라우저 지원이 핵심입니다.

주요 기능은 다음과 같습니다.

• 교차 브라우저 자동화 — 스크립트 하나를 Chrome 계열, Firefox, WebKit에서 실행합니다. Playwright CLI가 브라우저 바이너리를 설치하고 버전에 맞춰 관리합니다.
• 스크린샷 캡처 — 페이지를 PNG나 JPEG로 저장하고 전체 페이지나 특정 요소만 캡처하며 뷰포트와 기기 에뮬레이션을 설정합니다.
• PDF 생성 — 렌더링한 페이지를 크기, 여백, 배율을 지정한 PDF로 내보냅니다.
• 네트워크 가로채기 — 테스트와 데이터 수집을 위해 네트워크 요청을 감시하거나 모의 응답으로 바꾸거나 수정합니다.
• 브라우저 컨텍스트 — 쿠키, 저장소, 상태를 공유하지 않는 시크릿 창 같은 격리 세션을 만듭니다. 브라우저를 다시 시작하지 않고 여러 사용자 상태로 페이지를 캡처할 수 있습니다.
• 여러 언어 지원 — JavaScript/TypeScript, Python, Java, .NET 공식 바인딩을 제공합니다.

자동 대기 기능도 유용합니다. Playwright는 조작 전에 요소가 DOM에 연결되고 화면에 보이며 안정적인 상태가 되기를 기다립니다. 직접 대기 코드를 반복하는 일을 줄이고 불안정한 테스트를 줄입니다.

스크린샷에 Playwright 사용하기

page.screenshot() 메서드로 출력 결과를 세밀하게 제어합니다. 화면에 보이는 뷰포트, 스크롤 가능한 전체 페이지, locator로 지정한 DOM 요소를 캡처할 수 있습니다.

기기 에뮬레이션은 뷰포트 크기, 기기 배율, 사용자 에이전트를 한 번에 설정합니다. 스마트폰과 태블릿 프리셋이 있는 기기 레지스트리로 iPhone, Pixel, iPad에 가까운 화면을 캡처하기 쉽습니다.

지연 로딩 페이지에서는 대기 조건으로 이미지와 동적 콘텐츠가 로드될 시간을 확보해야 합니다. 전체 페이지 아래쪽의 지연 요소는 자동 대기만으로 활성화되지 않으므로 캡처 전 스크롤 단계도 넣으세요. 쿠키 배너나 채팅 위젯을 숨기고 스타일을 조절할 CSS를 주입할 수도 있습니다.

Playwright는 WebKit을 지원해 Chromium과 Firefox뿐 아니라 WebKit 렌더링 차이도 비교할 수 있습니다. 다만 Playwright WebKit은 브랜드 Safari 자체가 아니며 운영체제별 미디어 코덱 같은 차이가 있을 수 있습니다.

같은 페이지를 여러 브라우저, 경로, 로그인 상태에서 반복 캡처한다면 Playwright가 수동 브라우저 조작을 명시적인 절차로 바꿉니다. 모니터링과 QA 파이프라인에 자주 쓰이는 이유입니다.

Playwright와 Puppeteer 비교

두 라이브러리 모두 헤드리스 브라우저 자동화에 쓰지만 범위와 API 설계가 다릅니다.

브라우저 범위 — Playwright는 Chromium, Firefox, WebKit을 일관된 API로 지원합니다. Puppeteer는 Chrome for Testing과 Firefox를 지원하지만 WebKit은 지원하지 않습니다. WebKit 결과까지 필요하면 Playwright를 사용합니다.

자동 대기 — Playwright는 요소가 동작 가능한 상태가 되기를 기본으로 기다립니다. Puppeteer도 대기 API를 제공하지만 waitForSelector, waitForNetworkIdle 같은 조건을 더 명시적으로 작성하는 경우가 많습니다.

브라우저 컨텍스트 — Playwright의 컨텍스트는 브라우저 인스턴스 하나 안에서 여러 격리 세션을 쉽게 운영하도록 설계됐습니다. 사용자 상태별 테스트나 캡처를 만들 때 리소스를 아낍니다.

생태계 — Puppeteer는 2017년부터 사용돼 커뮤니티 자료가 많습니다. Playwright는 2020년에 시작했고 교차 엔진 테스트와 폭넓은 기능을 중심으로 빠르게 발전했습니다.

스크린샷 작업에서는 필요한 엔진에 따라 고르는 경우가 많습니다. Chrome과 Firefox 캡처는 두 도구 모두 지원하지만 WebKit까지 비교하려면 Playwright가 필요합니다.

흔한 실수

• 브라우저 바이너리를 설치하지 않습니다. Playwright 패키지를 추가한 뒤 CLI 설치 명령으로 브라우저도 받아야 합니다. 이 단계를 건너뛰면 'browser not found' 오류가 납니다.
• 자동 대기의 한계를 무시합니다. 자동 대기에도 기본 제한 시간이 있습니다. 페이지가 느리면 콘텐츠가 준비되기 전에 시간이 끝날 수 있으므로 무거운 페이지에 맞춰 값을 조절하세요.
• 지연 콘텐츠가 로드되기 전에 캡처합니다. 자동 대기는 페이지 끝까지 스크롤하지 않습니다. 지연 로딩 전체 페이지를 찍으려면 캡처 전에 스크롤 단계를 추가하세요.
• 용도에 맞지 않는 브라우저만 사용합니다. Chromium만 쓰면 빠르지만 Firefox와 WebKit의 렌더링 차이를 놓칩니다. 여러 브라우저 사용자가 보는 결과를 맞춰야 할 때는 교차 브라우저 캡처를 사용하세요.
• 브라우저 컨텍스트를 닫지 않습니다. 캡처 뒤 컨텍스트를 닫지 않으면 오래 실행되는 스크립트에서 메모리가 누적됩니다. 작업을 마치면 컨텍스트와 브라우저 인스턴스를 항상 닫으세요.