Playwright 개요

Playwright는 Microsoft에서 개발한 E2E(end-to-end) 테스트 자동화 프레임워크로, 다양한 브라우저(Chromium, Firefox, WebKit)를 지원하며 Node.js, Python, .NET, Java에서 사용할 수 있습니다.

설치

Node.js 환경에서 Playwright를 설치하려면 다음 명령어를 실행합니다.

npm install -D playwright

또는 Playwright와 함께 브라우저도 설치하려면:

npx playwright install

기본 사용법

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('<https://example.com>');

  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
})();

주요 메서드 정리

1. 브라우저 관련 메서드

const browser = await chromium.launch(); // 브라우저 실행
await browser.close(); // 브라우저 종료
const context = await browser.newContext(); // 새로운 브라우저 컨텍스트 생성

2. 페이지 탐색 및 조작

await page.goto('<https://example.com>'); // 페이지 이동
await page.reload(); // 페이지 새로고침
await page.waitForTimeout(2000); // 2초 대기

3. 요소 선택 및 상호작용

await page.click('button#submit'); // 버튼 클릭
await page.fill('input[name="email"]', 'test@example.com'); // 입력 필드 채우기
await page.selectOption('select#dropdown', 'optionValue'); // 드롭다운 옵션 선택
await page.check('input[type="checkbox"]'); // 체크박스 체크
await page.uncheck('input[type="checkbox"]'); // 체크 해제

4. 요소 가져오기 및 상태 확인

const text = await page.textContent('h1'); // 텍스트 가져오기
const isVisible = await page.isVisible('#modal'); // 요소 표시 여부 확인
const isChecked = await page.isChecked('input[type="checkbox"]'); // 체크 여부 확인

5. 네트워크 요청/응답 다루기

await page.route('**/*', route => route.continue()); // 요청 가로채기
page.on('request', request => console.log('Request:', request.url())); // 요청 로깅
page.on('response', response => console.log('Response:', response.status())); // 응답 로깅