Playwright 웹 자동화 및 테스트 프레임워크

Playwright는 최신 웹 자동화 및 테스트 프레임워크로, 다양한 브라우저(Chromium, Firefox, WebKit)를 지원하며 빠르고 안정적인 테스트 환경을 제공합니다. 개발자를 위해 Playwright의 기본 개념부터 실습 코드까지 단계별로 설명해 드릴게요.

---

1. Playwright 설치 및 기본 환경 설정

📌 설치 방법

Playwright를 사용하려면 Node.js가 설치되어 있어야 합니다.
아래 명령어로 Playwright를 설치하세요.

npm init -y  # package.json 생성 (처음 프로젝트를 시작하는 경우)
npm install --save-dev playwright  # Playwright 설치

또는 모든 브라우저(Chromium, Firefox, WebKit)를 설치하려면 아래 명령어를 실행합니다.

npx playwright install

---

2. Playwright 기본 코드 작성

Playwright는 브라우저를 실행하고, 페이지를 열고, 특정 동작을 수행하는 방식으로 동작합니다.

📌 기본적인 Playwright 스크립트 (Google 검색 예제)

아래 코드를 search.js 파일로 저장하고 실행해 봅시다.

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

(async () => {
    // 1. Chromium 브라우저 실행
    const browser = await chromium.launch({ headless: false }); // headless: false는 브라우저를 눈으로 볼 수 있게 함
    const page = await browser.newPage();

    // 2. Google 페이지 열기
    await page.goto('https://www.google.com');

    // 3. 검색창에 'Playwright' 입력 후 검색 실행
    await page.fill('textarea[name="q"]', 'Playwright');
    await page.keyboard.press('Enter');

    // 4. 결과 페이지가 로드될 때까지 대기
    await page.waitForTimeout(2000);

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

💡 설명

1. chromium.launch({ headless: false }) → 브라우저 실행 (GUI 환경에서 볼 수 있도록 headless: false 설정)
2. await page.goto(url) → 특정 웹사이트 열기
3. await page.fill(selector, value) → 입력 필드에 값 입력
4. await page.keyboard.press('Enter') → 키보드 입력 이벤트 실행
5. await page.waitForTimeout(ms) → 일정 시간 대기 (로딩을 기다릴 때 유용)
6. await browser.close() → 브라우저 종료

실행 방법:

node search.js

---

3. Playwright를 활용한 로그인 자동화

로그인 테스트는 웹 자동화에서 가장 많이 사용되는 기능 중 하나입니다.

📌 예제: GitHub 로그인 자동화

GitHub 로그인 페이지에서 아이디와 비밀번호를 입력하고 로그인하는 자동화 스크립트입니다.

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

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

    // 1. GitHub 로그인 페이지 열기
    await page.goto('https://github.com/login');

    // 2. 아이디 및 비밀번호 입력
    await page.fill('input[name="login"]', 'your-username'); // 아이디 입력
    await page.fill('input[name="password"]', 'your-password'); // 비밀번호 입력

    // 3. 로그인 버튼 클릭
    await page.click('input[name="commit"]');

    // 4. 로그인 후 5초 대기 후 종료
    await page.waitForTimeout(5000);
    await browser.close();
})();

💡 설명

• await page.click(selector) → 특정 버튼 클릭
• await page.fill(selector, value) → 입력 필드에 텍스트 입력
• await page.waitForTimeout(ms) → 로그인 후 대기 시간 추가

---

4. 스크린샷 및 HTML 저장

Playwright를 활용하면 특정 페이지의 스크린샷을 찍거나 HTML을 저장할 수도 있습니다.

📌 예제: 네이버 홈페이지 스크린샷

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

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://www.naver.com');

    // 스크린샷 저장
    await page.screenshot({ path: 'naver.png' });

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

실행하면 naver.png 파일이 현재 폴더에 저장됩니다.

📌 HTML 저장

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

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://www.naver.com');

    // HTML 저장
    const content = await page.content();
    fs.writeFileSync('naver.html', content);

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

이 코드를 실행하면 naver.html 파일이 저장됩니다.

---

5. Playwright 테스트 코드 작성 (Playwright Test 활용)

Playwright에는 @playwright/test 라이브러리를 활용한 테스트 자동화 기능이 있습니다.

📌 설치

npm install --save-dev @playwright/test

📌 기본 테스트 코드

아래 코드를 example.test.js 파일로 저장하세요.

const { test, expect } = require('@playwright/test');

test('Google 검색 테스트', async ({ page }) => {
    await page.goto('https://www.google.com');
    await page.fill('textarea[name="q"]', 'Playwright');
    await page.keyboard.press('Enter');

    // 검색 결과가 존재하는지 확인
    await page.waitForSelector('h3');
    const results = await page.$$('h3');
    expect(results.length).toBeGreaterThan(0);
});

📌 테스트 실행

npx playwright test example.test.js

---

6. 추가 기능

Playwright에는 다양한 기능이 포함되어 있습니다.

기능	설명
page.goto(url)	특정 페이지 열기
page.fill(selector, text)	입력 필드에 텍스트 입력
page.click(selector)	버튼 클릭
page.screenshot({ path: 'screenshot.png' })	스크린샷 저장
page.pdf({ path: 'page.pdf' })	PDF로 저장
page.waitForSelector(selector)	특정 요소가 나타날 때까지 대기

---

7. 마무리

Playwright는 강력한 웹 자동화 도구로, 크로스 브라우징 테스트부터 UI 테스트, 성능 모니터링까지 다양하게 활용할 수 있습니다.
처음에는 간단한 검색 및 로그인 자동화부터 시작하고, 점차적으로 API 테스트, 데이터 스크래핑, E2E 테스트 등을 적용해 보세요! 🚀