Playwright - 웹 스크래이핑/크롤링, 웹 UI 테스트 도구

Playwright는 Microsoft에서 개발한 웹 자동화 및 테스트 도구로, Chromium, Firefox, WebKit을 지원합니다. UI 테스트와 웹 스크래핑 작업을 수행할 수 있습니다. JavaScript, Python, Java, .NET 등 다양한 언어로 작성된 스크립트를 활용하여 웹 애플리케이션의 안정성과 성능을 테스트할 수 있습니다. Playwright는 간편하게 설치하고 사용할 수 있어서 웹 개발자 및 테스터에게 효과적인 도구 사랑받고 있습니다.

Playwright - 웹 스크래이핑/크롤링, 웹 UI 테스트 도구
Playwright 웹사이트

Playwright란

처음 Playwright를 접한 계기는 웹 스크래핑이 목적이었습니다.

Web UI 테스트를 목적으로 만들어진 도구라고는 합니다만, 사용 예시를 보면 웹스크래이핑에 대해서 많이 언급되는 상황입니다.

가시적으로 Chromium 브라우저를 띄워서 실제로 클릭하기도 하고 값을 넣기도 할 수 있습니다. 이런 방식으로 자동으로 특정 사이트에 로그인을 하게끔 할 수도 있죠.

그래서 UI 테스트도 가능하고, 웹 스크레이핑도 가능합니다.

Playwright는 사실 구글에서 Puppeteer를 개발하던 사람들이 마이크로소프트로 옮겨가면서 만들게 된 도구라고 합니다.

Playwright vs Puppeteer: The Differences
The distinctions between Playwright and Puppeteer in testing and automation, including web scraping. Find out about usage scenarios and pros & cons in multiple categories.

그래서 Puppeteer를 사용해보신 분이라면 Playwright도 어렵지 않게 적응할 수 있을 겁니다. 저도 두 가지를 다 사용해봤는데, 거의 비슷한 인상입니다.

설치

설치는 아주 간단한 편입니다. node.js 용으로 작성되었기 때문에 그냥 node.js용 라이브러리를 설치하듯 설치하면 됩니다.

npm i playwright

만약 웹 스크래이핑이 목적이 아니라 UI 테스트가 목적이라면,  Boilerplate를 제공하고 있기 때문에 공식 홈페이지 설치 문서를 살펴보시기 바랍니다.

Installation | Playwright
Introduction

간단한 소스

아래는 아주 간단하게 본문 내용을 소개하자면 아래와 같습니다

const { chromium } = require('playwright')

(async () => {
  // 브라우저 시작
  // headless : true일 경우엔 브라우저가 뜨지 않습니다. true가 기본값
  // headless : false일 경우엔 chromium 브라우저가 뜨면서 실제 작동되는 모습을 지켜볼 수 있습니다. 
  const browser = await chromium.launch({headless: false});
    
  // 새 페이지 열기
  const page = await browser.newPage();

  // 웹 사이트 열기 example.com이라는 예시로 넣어두었으나, 실제 사이트 주소를 넣어서 작동하는 모습을 보시길 바랍니다.
  await page.goto('https://example.com');

  // $eval 함수를 사용하여 페이지 내의 JavaScript 실행
  const HTMLContent = await page.$eval('body',(content) => {
    // 여기에 원하는 JavaScript 코드를 작성
    // 예를 들어, 문서의 내용을 가져오려면 다음과 같이 작성할 수 있습니다.
    return content.innerHTML;
  });

  // 콘솔을 통해 출력
  console.log(HTMLContent)

  // 브라우저 종료
  await browser.close();
})();

주석에서 보다시피 아주 간단하게 example.com(예시)이라는 사이트에 들어가서 body태그 안의 모든 HTML 요소를 가져오는 내용입니다.

소스에서는 단순하게 console.log로 출력하는데 그쳤지만, 여기서 파일로 저장하거나 데이터베이스에 바로 저장하거나 하는 등의 추가적인 작업도 할 수 있습니다.

그 뿐 아니라 스크린 샷도 찍어서 기록 할 수 있는 등 다양한 작업이 가능해서 실제로 사람이 하는 것처럼 작업할 수도 있습니다. 원하는 내용을 절차에 맞게 스크립트로 작성해주면 됩니다.

다양한 언어 지원

저는 자바스크립트를 주로 사용하기 때문에 node.js를 예시로 보여드리고 있습니다만, playwright는 Python, Java, .NET 등 다양한 언어/환경을 통해 작동합니다.

더 자세한 내용은 아래 공식 문서를 참고하시기 바랍니다.

Playwright Library | Playwright
Playwright module provides a method to launch a browser instance. The following is a typical example of using Playwright to drive automation: