Playwright로 E2E 테스트 자동화

1. Playwright 소개

Playwright는 브라우저 자동화를 위한 Node.js 라이브러리입니다. 이는 Cypress와 비교하여 더 빠르고 효율적인 테스트를 제공합니다. 또한 다양한 브라우저를 지원하며, Headless 모드와 GUI 모드를 모두 지원합니다.

Playwright를 사용하면 개발자들은 브라우저 상에서 다양한 시나리오를 자동화할 수 있습니다. 이를 통해 개발자들은 더 효율적으로 테스트를 작성하고, 유지보수할 수 있습니다.

const playwright = require('playwright');  // Playwright 라이브러리 불러오기
(async () => {
  const browser = await playwright.chromium.launch();  // Chromium 브라우저 실행
  const page = await browser.newPage();  // 새로운 페이지 열기
  await page.goto('https://example.com');  // 페이지 이동
  await browser.close();  // 브라우저 닫기
})();

Playwright의 특징

• 다양한 브라우저 지원: Chromium, Firefox, WebKit
• Headless 모드와 GUI 모드 지원
• 빠르고 효율적인 테스트 제공

2. Playwright 설치 및 설정

Playwright를 설치하기 위해서는 npm을 사용할 수 있습니다. 다음 명령어를 실행하면 Playwright를 설치할 수 있습니다.

npm install -D playwright

Playwright를 사용하기 위한 기본 설정은 간단합니다. 다음 예제 코드를 통해 Playwright의 기본 사용법을 설명합니다.

const playwright = require('playwright');  // Playwright 라이브러리 불러오기
(async () => {
  const browser = await playwright.chromium.launch();  // Chromium 브라우저 실행
  const page = await browser.newPage();  // 새로운 페이지 열기
  await page.goto('https://example.com');  // 페이지 이동
  await browser.close();  // 브라우저 닫기
})();

3. E2E 테스트 작성

Playwright를 사용하여 E2E 테스트를 작성하는 방법은 간단합니다. 다음 예제 코드를 통해 실제 테스트를 작성하는 방법을 보여줍니다.

const playwright = require('playwright');  // Playwright 라이브러리 불러오기
(async () => {
  const browser = await playwright.chromium.launch();  // Chromium 브라우저 실행
  const page = await browser.newPage();  // 새로운 페이지 열기
  await page.goto('https://example.com');  // 페이지 이동
  await page.click('text="Login"');  // 로그인 버튼 클릭
  await page.fill('input[name="username"]', 'username');  // 아이디 입력
  await page.fill('input[name="password"]', 'password');  // 패스워드 입력
  await page.click('text="Submit"');  // 제출 버튼 클릭
  await browser.close();  // 브라우저 닫기
})();

E2E 테스트의 구조

• 브라우저 실행
• 페이지 이동
• 요소 클릭
• 폼 입력
• 제출 버튼 클릭

4. Playwright의 고급 기능

Playwright는 다양한 고급 기능을 제공합니다. 다음 예제 코드를 통해 고급 기능을 사용하는 방법을 보여줍니다.

const playwright = require('playwright');  // Playwright 라이브러리 불러오기
(async () => {
  const browser = await playwright.chromium.launch();  // Chromium 브라우저 실행
  const page = await browser.newPage();  // 새로운 페이지 열기
  await page.goto('https://example.com');  // 페이지 이동
  await page.click('text="Login"');  // 로그인 버튼 클릭
  await page.fill('input[name="username"]', 'username');  // 아이디 입력
  await page.fill('input[name="password"]', 'password');  // 패스워드 입력
  await page.click('text="Submit"');  // 제출 버튼 클릭
  await page.waitForSelector('text="Welcome"');  // 페이지 로딩 대기
  await browser.close();  // 브라우저 닫기
})();

Playwright의 고급 기능

• 페이지 로딩 대기
• 요소 클릭
• 폼 입력
• 제출 버튼 클릭