Playwright는 Microsoft에서 개발한 오픈 소스 자동화 도구로, Chrome, Firefox, Safari 등 크로스 브라우저를 지원하는 특징.

Playwright의 특징

크로스 브라우저 지원
자동 대기
CSS, XPath, 텍스트 기반 선택자
병렬실행 (workers)
모바일 장치 시뮬레이션
네트워크 제어 (mocking, route)

Playwright의 목적 및 사용 이유

Playwright는 웹 애플리케이션의 엔드투엔드(E2E) 테스트 자동화를 위해 개발되었습니다. 실제 사용자의 동작을 시뮬레이션하여 웹 애플리케이션의 기능과 동작을 검증

다양한 브라우저(Chrome, Firefox, Safari)에서 일관된 테스트 환경을 제공하여 크로스 브라우저 호환성을 보장합니다. 이를 통해 모든 사용자 환경에서 애플리케이션이 정상적으로 작동하는지 확인

자동 대기 기능과 안정적인 요소 선택을 통해 테스트의 신뢰성을 높이고, 불필요한 대기 코드 작성을 줄여줍니다. 이는 유지보수가 쉬운 테스트 코드 작성을 가능

병렬 실행과 빠른 실행 속도로 개발 주기를 단축시키고, CI/CD 파이프라인에 쉽게 통합할 수 있습니다. 이를 통해 배포 전 품질 검증을 자동화

네트워크 제어, 모바일 시뮬레이션, 스크린샷/비디오 캡처 등 풍부한 기능을 제공하여 다양한 테스트 시나리오를 구현

1. 설치

npm init playwright@latest

package.json에 script 등록

"test": "playwright test",
"test:ui": "playwright test --ui",
"test:debug": "playwright test --debug",
"codegen": "playwright codegen",

실행

# 모든 테스트 실행
npx playwright test

# 특정 테스트 파일 실행
npx playwright test tests/login.spec.js

# 특정 브라우저에서만 실행
npx playwright test --project=chromium

# UI 모드에서 실행
npx playwright test --ui

# HTML 보고서 생성
npx playwright test --reporter=html

# 보고서 열기
npx playwright show-report

2. 사용법

기본 구성 파일 (playwright.config.ts)

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  expect: {
    timeout: 5000
  },
  use: {
    headless: false,
    viewport: { width: 1280, height: 720 },
    ignoreHTTPSErrors: true,
    screenshot: 'only-on-failure',
    video: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'webkit',
      use: { browserName: 'webkit' },
    },
  ],
});

playwright 사용 예시 e2e 코드

test.describe.configure({ mode: 'parallel' })

// 페이지 테스트 전 사전동작(쿠키 설정)
test.beforeEach(async ({ page }) => {
    await page.context().addCookies([
        {
            name: 'POPUP_LOG',
            value: 'Y',
            domain: '~~~',
            path: '/',
        },
    ])
})

test.describe('비로그인 상태 테스트', () => {
    // 테스트 정의 전에 test.use() 호출
    test.use({ loginState: 'none' })
    /**
     * 1. 홈 화면에 진입하고 컨텐츠가 표시되어야한다.
     */
    test('메인페이지 렌더링 확인', async ({ page }) => {
        await page.goto('/main')
        await expect(page).toHaveTitle(/하루스토리/)

        // 헤더 영역 확인
        await expect(page.locator('//*[@id="root"]/div/header')).toBeVisible()

        // BNB 영역 확인
        await expect(page.locator('//*[@id="root"]/div/div')).toBeVisible()
    })

    /**
     * 2. 홈 화면에 진입시 상단 프로모션 배너가 표시되어야 하고, 클릭하면 배너에 연결된 페이지로 이동한다.
     */
    test('상단 프로모션 배너 확인', async ({ page }) => {
        await page.goto('/main')
        ...
        ...
        ...
     })

주요함수

test - 테스트 케이스 정의
expect - 검증
page 관련 함수 - 테스트 페이지 조작
locator - 요소 찾기