
playwright로 시작하는 웹 자동화 입문

playwright란 무엇인가요?
playwright는 다양한 브라우저에서 웹 자동화를 쉽게 할 수 있도록 도와주는 오픈소스 라이브러리입니다. 개발자나 테스터는 사람 대신 브라우저를 조작하는 프로그램을 만들 수 있어, 반복되는 테스트나 데이터를 수집하는 작업에 자주 사용됩니다.

플레이라이트의 주요 특징
playwright는 크롬, 파이어폭스, 사파리 등 여러 브라우저를 한 번에 지원합니다. 모바일 환경까지 시뮬레이션 가능하며, 속도가 빠르고, 비동기 작업도 편리하게 처리할 수 있습니다. 네트워크 상태 조작, 파일 다운로드·업로드, 화면 캡처 등도 지원합니다.
playwright 설치 방법
node.js가 필요하며, 아래 명령어로 쉽고 빠르게 설치할 수 있습니다.
npm install -D playwright설치 후에는 원하는 브라우저까지 자동으로 다운로드됩니다.
프로젝트 준비와 환경 설정
작업을 시작할 폴더를 만들어 npm 초기화 후 playwright를 설치합니다.
mkdir my-playwright-project
cd my-playwright-project
npm init -y
npm install -D playwright테스트 코드 파일(.js 또는 .ts)을 새로 만듭니다.
브라우저 실행과 페이지 열기
playwright를 통해 매우 간단하게 브라우저를 띄울 수 있습니다. 예시 코드입니다:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await browser.close();
})();요소 선택과 상호작용
웹페이지 안의 특정 요소를 쉽게 선택할 수 있습니다. '클릭', '텍스트 입력', '값 읽기' 등 다양한 동작을 지원합니다.
await page.click('button#submit');
await page.fill('input[name="user"]', '홍길동');
const text = await page.textContent('div.result');자동화 스크립트 작성 예제
아래 코드는 입력창에 값을 넣고, 버튼을 클릭한 뒤 결과를 확인하는 전형적인 자동화 예시입니다.
const { webkit } = require('playwright');
(async () => {
const browser = await webkit.launch();
const page = await browser.newPage();
await page.goto('https://example.com/login');
await page.fill('#username', 'testuser');
await page.fill('#password', 'testpassword');
await page.click('#login');
await page.screenshot({ path: 'login_result.png' });
await browser.close();
})();실전 활용 팁
개발 단계에선
headless: false로 브라우저가 실제로 나타나게 하여 동작을 눈으로 확인할 수 있습니다.요소 탐색 시, 반드시 페이지가 로드되었는지 확인하는 것이 안전합니다.
에러 발생 시 적절히 try/catch를 활용하여 디버깅하기 좋습니다.
자동화 테스트에서는 환경별(브라우저, OS) 차이를 고려해야 합니다.
주의할 점
웹페이지 구조가 자주 바뀌면 자동화 스크립트도 함께 수정해야 한다는 점을 기억하세요. 또한 로그인 등 인증이 필요한 웹사이트에서는 쿠키나 세션 관리에 신경 써야 합니다.
더 배우고 싶다면
playwright 공식 문서(https://playwright.dev/)에서 더 다양한 기능과 예제, 자주 쓰는 질문까지 확인할 수 있습니다. 실전에서는 다양한 조합으로 script를 작성해 보며 익숙해지는 것이 중요합니다.