By LEE JUNGMIN in Playwright — 25 1월 2025

Playwright 설치 및 기본 설정

Playwright 설치 전 Node.js(LTS 권장)를 준비합니다. npm install playwright로 설치하며 브라우저 선택도 가능합니다. npx playwright init으로 프로젝트를 초기화하고 CLI로 테스트 실행, 코드 생성, 결과 분석을 진행할 수 있습니다. 설정 파일과 환경 변수를 활용해 테스트 환경을 효율적으로 관리하세요.

Playwright 설치

Node.js 설치

Node.js를 설치하려면 아래의 단계를 따라 진행할 수 있습니다. 운영 체제에 따라 약간의 차이가 있으니, 사용하는 운영 체제에 맞는 방법을 참고하세요.

1. Node.js 공식 웹사이트에서 다운로드 (추천 방법)

Node.js 공식 웹사이트로 이동합니다.
화면에 표시된 두 가지 버전 중 선택
- LTS (Long Term Support): 안정적이고 장기 지원 버전 (추천).
- Current: 최신 기능이 포함된 최신 버전.
운영 체제에 맞는 설치 파일을 다운로드합니다.
- Windows: .msi
- macOS: .pkg
- Linux: .tar.gz 또는 패키지 매니저 사용 가능.
다운로드한 파일을 실행하고 설치 마법사의 지침을 따릅니다.

2. 패키지 매니저로 설치 (macOS/Linux 사용자)

macOS

설치 완료 후, 버전 확인

node -v
npm -v

Homebrew가 설치되어 있는 경우

brew install node

Ubuntu/Debian (Linux)

설치 확인

node -v
npm -v

Node.js 설치

sudo apt install -y nodejs

Node.js 설치를 위한 PPA 추가

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

(18.x는 원하는 버전으로 변경 가능)

CentOS/Fedora/RHEL (Linux)

설치 확인

node -v
npm -v

Node.js 설치

sudo yum install -y nodejs

Node.js 저장소를 추가

curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -

3. nvm(Node Version Manager) 사용 (버전 관리 필요 시 추천)

nvm은 Node.js의 여러 버전을 간편하게 관리할 수 있는 도구입니다.

다른 버전 전환

nvm use 18

설치된 Node.js 버전 확인

node -v
npm -v

Node.js 설치

nvm install --lts  # LTS 버전 설치
nvm install 18     # 특정 버전 설치 (예: 18)

설치된 nvm 활성화

source ~/.bashrc

또는

source ~/.zshrc

nvm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

(최신 버전 확인 후 설치 가능)

4. 설치 확인

아래 명령어를 실행하여 설치가 제대로 되었는지 확인하세요.

node -v  # Node.js 버전 출력
npm -v   # npm 버전 출력

이제 Node.js 설치가 완료되었으며, Node.js와 함께 설치된 npm을 사용하여 패키지를 관리할 수 있습니다.

Playwright 패키지 설치

Playwright 패키지를 설치하려면 아래 단계를 따라 진행하세요. Playwright는 Node.js 환경에서 동작하므로, 설치 전에 Node.js가 이미 설치되어 있는지 확인해야 합니다.

1. Node.js 확인

Playwright는 Node.js 기반의 라이브러리입니다. 아래 명령어로 Node.js와 npm이 설치되었는지 확인합니다.

node -v
npm -v

만약 설치되지 않았다면 Node.js 설치 방법을 참고하세요.

2. 새 프로젝트 생성 (선택 사항)

Playwright를 특정 프로젝트에만 사용하려면 새 디렉터리를 생성하여 프로젝트를 준비합니다.

mkdir my-playwright-project
cd my-playwright-project
npm init -y

3. Playwright 설치

Playwright는 npm 또는 yarn 명령어를 통해 설치할 수 있습니다.

기본 설치

npm install playwright

또는

yarn add playwright

설치 옵션 (브라우저 포함)

Playwright는 기본적으로 주요 브라우저를 다운로드합니다. 특정 브라우저만 설치하고 싶다면 아래 명령어를 참고하세요.

Chromium, Firefox, WebKit 중 필요한 브라우저만 선택 가능합니다.

특정 브라우저만 설치 (예: Chrome)

npx playwright install chromium

모든 브라우저 설치

npx playwright install

4. Playwright 설치 확인

Playwright가 정상적으로 설치되었는지 확인하려면 아래 명령어를 실행합니다.

npx playwright --version

Playwright 버전이 출력되면 설치가 완료된 것입니다.

5. 간단한 테스트 코드 실행 (선택 사항)

Playwright가 제대로 작동하는지 테스트하려면 아래 코드를 example.js로 저장한 후 실행하세요.

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  console.log(await page.title());
  await browser.close();
})();

실행 명령어

node example.js

위 코드 실행 후 페이지 제목이 출력되면 Playwright 설치 및 실행이 정상적으로 완료된 것입니다.

6. Playwright 테스트 프레임워크 추가 (선택 사항)

Playwright에는 자체적인 테스트 프레임워크가 포함되어 있습니다. 이를 활용하려면 아래 명령어를 실행하세요.

npm install @playwright/test
npx playwright test

Playwright CLI를 통해 테스트를 자동으로 생성할 수도 있습니다.

npx playwright codegen

Playwright 설치와 초기 실행이 완료되었습니다.

테스트 환경 설정

프로젝트 초기화

Playwright를 사용한 프로젝트 초기화는 Playwright의 테스트 환경을 준비하는 과정입니다. 이 과정에서 프로젝트 디렉터리를 생성하고 필요한 파일과 설정을 자동으로 구성할 수 있습니다. 아래 절차를 따라 프로젝트를 초기화하세요.

1. 프로젝트 디렉터리 생성

먼저 Playwright를 사용할 새 디렉터리를 생성하고 이동합니다.

mkdir my-playwright-project
cd my-playwright-project

2. Node.js 프로젝트 초기화

Node.js 프로젝트로 설정하려면 npm init 명령을 실행하여 package.json 파일을 생성합니다. 빠른 설정을 원한다면 -y 옵션을 추가하세요.

npm init -y

3. Playwright 설치

Playwright를 설치합니다. 설치 시 브라우저도 자동으로 다운로드됩니다.

npm install playwright

또는, Playwright 테스트 프레임워크를 포함하여 설치하려면

npm install -D @playwright/test

4. Playwright 설정 초기화

Playwright CLI를 사용하여 프로젝트를 초기화합니다. 이 과정에서 필요한 설정 파일이 자동으로 생성됩니다.

npx playwright install
npx playwright init

이 명령은 다음을 수행합니다.

Playwright 구성 파일(playwright.config.js 또는 playwright.config.ts)을 생성합니다.
테스트 폴더(tests/)를 생성하고 샘플 테스트 파일을 추가합니다.
브라우저를 다운로드하여 설치합니다.

5. 디렉터리 구조

npx playwright init 명령을 실행한 후, 프로젝트 디렉터리 구조는 아래와 같습니다.

my-playwright-project/
├── tests/
│   ├── example.spec.js  # 샘플 테스트 파일
├── playwright.config.js  # Playwright 설정 파일
├── node_modules/
├── package.json
└── package-lock.json

6. Playwright 테스트 실행

샘플 테스트를 실행하여 Playwright 설치와 프로젝트 구성이 제대로 되었는지 확인합니다.

npx playwright test

테스트 실행 결과가 출력되면 프로젝트 초기화가 성공적으로 완료된 것입니다.

7. 샘플 테스트 코드 작성 (선택 사항)

Playwright의 동작을 테스트하는 간단한 코드(tests/example.spec.js)는 다음과 같습니다.

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

test('basic test', async ({ page }) => {
  await page.goto('https://example.com');
  const title = await page.title();
  expect(title).toBe('Example Domain');
});

8. Playwright Codegen 사용

테스트 코드를 자동 생성하려면 Playwright의 codegen 기능을 사용합니다. 이 도구는 브라우저 상에서 수행한 작업을 기록하여 코드로 변환해 줍니다.

npx playwright codegen https://example.com

9. Playwright 환경 설정 수정 (선택 사항)

playwright.config.js 파일에서 브라우저 종류, 테스트 간격, 출력 형식 등을 수정하여 프로젝트 요구사항에 맞게 환경을 구성합니다. 예를 들어

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

module.exports = defineConfig({
  testDir: './tests',
  timeout: 30000,
  use: {
    headless: true,  // 브라우저를 헤드리스 모드로 실행
    baseURL: 'https://example.com',
  },
});

이제 Playwright를 사용해 테스트를 작성하고 실행할 준비가 완료되었습니다.

테스트 디렉토리 구성

Playwright에서 테스트 디렉터리를 구성하는 것은 테스트 관리와 유지보수를 용이하게 만드는 중요한 단계입니다. 테스트 디렉터리 구성 시 프로젝트 규모, 테스트 유형, 협업 요구 사항 등을 고려하여 구조화해야 합니다. 일반적으로 다음과 같은 디렉터리 구조를 추천합니다.

1. 기본 디렉터리 구조

Playwright 초기화를 통해 생성된 기본 구조는 다음과 같습니다.

my-playwright-project/
├── tests/                      # 테스트 파일 디렉터리
│   ├── example.spec.js         # 기본 샘플 테스트
├── playwright.config.js        # Playwright 설정 파일
├── node_modules/               # Node.js 모듈
├── package.json                # 프로젝트 메타데이터
└── package-lock.json           # 설치된 패키지 잠금 파일

2. 확장된 디렉터리 구조

프로젝트 규모가 커질수록 테스트를 유형별로 구분하여 구성하는 것이 좋습니다. 아래는 테스트 디렉터리를 세분화한 예입니다.

my-playwright-project/
├── tests/
│   ├── unit/                   # 유닛 테스트 (특정 함수/모듈 테스트)
│   ├── integration/            # 통합 테스트 (다수의 모듈 통합 테스트)
│   ├── e2e/                    # 엔드투엔드 테스트 (사용자 시나리오)
│   │   ├── login.spec.js       # 로그인 관련 테스트
│   │   ├── checkout.spec.js    # 결제 관련 테스트
│   │   └── dashboard.spec.js   # 대시보드 관련 테스트
│   ├── fixtures/               # 테스트 데이터를 포함하는 고정 데이터
│   │   └── user-data.json      # 사용자 테스트 데이터
│   ├── utils/                  # 공통 테스트 유틸리티
│   │   └── helpers.js          # 도우미 함수
│   └── reports/                # 테스트 결과 리포트
│       └── latest-report.html  # 가장 최근 테스트 리포트
├── playwright.config.js        # Playwright 설정 파일
├── package.json                # 프로젝트 메타데이터
└── package-lock.json           # 설치된 패키지 잠금 파일

3. 디렉터리별 역할

tests/unit/
- 개별 함수 또는 모듈 테스트를 위한 디렉터리입니다.
- 작은 단위로 코드의 정확성을 확인합니다.
tests/integration/
- 여러 모듈이 서로 통합될 때의 동작을 검증합니다.
- 시스템의 구성 요소가 의도대로 협력하는지 확인합니다.
tests/e2e/
- 사용자 시나리오를 기반으로 애플리케이션의 전체 워크플로우를 테스트합니다.
- 예: 로그인, 결제, 검색 등.
tests/fixtures/
- 테스트 데이터를 저장하는 디렉터리입니다.
- JSON, YAML 또는 기타 형식으로 고정 데이터를 관리할 수 있습니다.
- 예: 사용자 계정 데이터, 제품 목록 데이터.
tests/utils/
- 테스트 도우미 함수, 공통 설정, 반복 코드 등을 관리합니다.
- 코드 재사용성을 높이고 테스트를 간결하게 유지합니다.
tests/reports/
- 테스트 실행 후 생성되는 리포트를 저장합니다.
- CI/CD 파이프라인에서 테스트 결과를 검토할 때 유용합니다.

4. 파일 이름 규칙

테스트 파일 이름은 명확히 의도를 나타내도록 작성합니다.
예
- login.spec.js: 로그인 기능에 대한 테스트.
- product-details.spec.js: 제품 상세 페이지 관련 테스트.

5. Playwright 설정 파일과 디렉터리 연결

Playwright 설정 파일(playwright.config.js)에서 테스트 디렉터리를 명시적으로 지정할 수 있습니다.

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

module.exports = defineConfig({
  testDir: './tests/e2e',  // e2e 테스트 디렉터리 설정
  timeout: 30000,
  use: {
    headless: true,        // 헤드리스 브라우저 사용
    baseURL: 'https://example.com',
  },
});

6. 추가 팁

테스트 분리 기준
- 테스트 파일을 기능 단위로 분리.
- 각 파일에서 단일 기능이나 사용자 시나리오만 테스트.
폴더 네이밍 규칙
- 소문자 및 단수 형태 사용 (unit, e2e, utils 등).
공통 설정 관리
- tests/utils/helpers.js에 재사용 가능한 코드 작성.
- 예: 로그인 함수, API 요청 유틸리티 등.

위의 디렉터리 구조와 설명을 기반으로 테스트 디렉터리를 구성하면, 프로젝트가 커지더라도 테스트 관리를 효율적으로 할 수 있습니다.

Config 파일 작성

Playwright 프로젝트의 playwright.config.js 파일은 테스트 실행 환경과 기본 설정을 정의하는 역할을 합니다. 이 파일을 적절히 작성하면 테스트 실행이 간편해지고 일관성을 유지할 수 있습니다. 아래는 Playwright 설정 파일을 작성하는 방법과 주요 옵션 설명입니다.

1. 기본 설정 파일 작성

아래는 기본적인 playwright.config.js 예시입니다.

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

module.exports = defineConfig({
  testDir: './tests', // 테스트 파일이 위치한 디렉터리
  timeout: 30000, // 각 테스트의 최대 실행 시간 (ms)
  retries: 1, // 실패한 테스트 재시도 횟수
  reporter: [['list'], ['html', { outputFolder: 'test-results' }]], // 테스트 결과 리포터
  use: {
    headless: true, // 헤드리스 브라우저 실행 여부
    viewport: { width: 1280, height: 720 }, // 브라우저 뷰포트 크기
    baseURL: 'https://example.com', // 기본 URL 설정
    screenshot: 'on', // 실패 시 스크린샷 저장 ('on', 'off', 'only-on-failure')
    video: 'retain-on-failure', // 실패 시 비디오 저장
    trace: 'on-first-retry', // 첫 번째 재시도 시 트레이스 파일 생성
  },
  projects: [
    {
      name: 'Chromium', // 프로젝트 이름
      use: { browserName: 'chromium' }, // 브라우저 설정
    },
    {
      name: 'Firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'WebKit',
      use: { browserName: 'webkit' },
    },
  ],
});

2. 주요 설정 설명

testDir
- 테스트 파일이 위치한 디렉터리를 지정합니다.
- 기본값: tests
timeout
- 각 테스트 실행의 최대 시간을 밀리초 단위로 설정합니다.
- 기본값: 30000 (30초)
retries
- 실패한 테스트를 재시도하는 횟수를 설정합니다.
- 예: retries: 1 → 테스트 실패 시 한 번 더 실행.
reporter
- 테스트 실행 결과를 출력하는 형식을 지정합니다.
- 예
  - 'list': 명령줄에 테스트 목록 표시.
  - 'html': HTML 리포트 생성.
  - 'json': JSON 형식의 리포트 생성.
use (기본 설정)
- 테스트 실행 시 사용할 공통 브라우저 설정입니다.
  - headless: 헤드리스 모드로 실행 여부.
  - viewport: 브라우저 뷰포트 크기.
  - baseURL: 테스트 중 사용할 기본 URL.
  - screenshot: 실패 시 스크린샷 자동 캡처.
  - trace: 실패 시 트레이스 파일 생성.
projects
- 서로 다른 브라우저 또는 환경에서 테스트를 실행하려면 프로젝트 배열로 설정합니다.
- 예: Chromium, Firefox, WebKit 등.
outputDir (테스트 산출물 디렉터리)
- 스크린샷, 비디오, 트레이스 파일 등의 저장 위치를 지정합니다.
- 기본값: test-results

3. 예시: 다중 환경 설정

다양한 환경에서 테스트를 실행하려면 다음과 같은 설정을 추가할 수 있습니다.

module.exports = defineConfig({
  testDir: './tests',
  timeout: 60000,
  retries: 2,
  use: {
    headless: false, // 브라우저를 헤드리스 모드가 아닌 실제 브라우저로 실행
    baseURL: 'https://staging.example.com',
  },
  projects: [
    {
      name: 'Desktop Chromium',
      use: {
        browserName: 'chromium',
        viewport: { width: 1280, height: 720 },
      },
    },
    {
      name: 'Mobile WebKit',
      use: {
        browserName: 'webkit',
        viewport: { width: 375, height: 667 }, // iPhone 8 해상도
      },
    },
    {
      name: 'Tablet Firefox',
      use: {
        browserName: 'firefox',
        viewport: { width: 768, height: 1024 }, // 태블릿 해상도
      },
    },
  ],
});

4. 테스트 실행

위 설정을 적용한 후, 아래 명령어를 통해 테스트를 실행합니다.

HTML 리포트 확인

npx playwright show-report

특정 브라우저에서 테스트 실행

npx playwright test --project="Desktop Chromium"

모든 테스트 실행

npx playwright test

5. Playwright 설정 파일 활용 팁

1. 환경 변수 활용

Playwright 설정에서 환경 변수(.env 파일이나 process.env)를 사용하면 테스트 환경을 유연하게 설정할 수 있습니다. 예를 들어, 개발, 스테이징, 운영 등 여러 환경에 따라 다른 설정을 적용할 수 있습니다.

1.1. `.env` 파일 생성

테스트 실행 시 필요한 환경 변수들을 정의하는 .env 파일을 프로젝트 루트 디렉터리에 생성합니다.

# .env
BASE_URL=https://staging.example.com
HEADLESS=true
TIMEOUT=60000

1.2. `dotenv` 패키지 설치

Node.js에서 .env 파일을 읽기 위해 dotenv 패키지를 설치합니다.

npm install dotenv

1.3. Playwright 설정 파일에서 환경 변수 사용

playwright.config.js에서 환경 변수를 불러와 설정에 활용합니다.

require('dotenv').config(); // .env 파일 로드
const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  testDir: './tests',
  timeout: parseInt(process.env.TIMEOUT) || 30000, // 환경 변수로부터 테스트 타임아웃 설정
  use: {
    headless: process.env.HEADLESS === 'true', // 헤드리스 모드 설정
    baseURL: process.env.BASE_URL || 'https://default.example.com', // 기본 URL 설정
    viewport: { width: 1280, height: 720 }, // 기본 뷰포트 설정
  },
});

1.4. 환경에 따른 실행 스크립트

환경별 .env 파일을 별도로 관리하여, 특정 환경에 맞게 테스트를 실행할 수 있습니다.

실행

npm run test:staging
npm run test:production

실행 스크립트 작성 (package.json)

"scripts": {
  "test:staging": "env-cmd -f .env.staging npx playwright test",
  "test:production": "env-cmd -f .env.production npx playwright test"
}

환경별 .env 파일 생성

# .env.staging
BASE_URL=https://staging.example.com
HEADLESS=true

# .env.production
BASE_URL=https://production.example.com
HEADLESS=false

env-cmd 패키지를 활용하면 환경별 .env 파일을 쉽게 로드할 수 있습니다.

2. 공통 설정 관리

Playwright 설정 파일에서 use 속성을 활용하면 프로젝트의 공통 설정을 한 곳에서 관리할 수 있습니다. 이렇게 하면 중복 설정을 방지하고, 프로젝트별로 다른 설정을 재정의하기 쉬워집니다.

2.1. 기본 설정 (`use`) 활용

use 속성은 모든 테스트 실행에 적용되는 기본 설정입니다.

module.exports = defineConfig({
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    baseURL: 'https://example.com',
    screenshot: 'only-on-failure',
    trace: 'retain-on-failure',
  },
});

위 설정은 모든 테스트에서 동일하게 적용됩니다.

2.2. 프로젝트별 설정 재정의

projects 배열을 사용하면 프로젝트별로 공통 설정을 재정의할 수 있습니다.

module.exports = defineConfig({
  use: {
    baseURL: 'https://example.com', // 기본 설정
    headless: true, // 공통 헤드리스 모드
    viewport: { width: 1280, height: 720 }, // 공통 뷰포트
  },
  projects: [
    {
      name: 'Chromium Desktop',
      use: {
        browserName: 'chromium',
      },
    },
    {
      name: 'Mobile WebKit',
      use: {
        browserName: 'webkit',
        viewport: { width: 375, height: 667 }, // 프로젝트별 뷰포트 재정의
      },
    },
    {
      name: 'Firefox Headed',
      use: {
        browserName: 'firefox',
        headless: false, // 헤드리스 모드 재정의
      },
    },
  ],
});

2.3. 공통 설정 함수화

공통 설정을 함수로 만들어, 설정 관리의 가독성과 유연성을 높일 수 있습니다.

function getCommonSettings() {
  return {
    headless: process.env.HEADLESS === 'true',
    baseURL: process.env.BASE_URL || 'https://default.example.com',
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
    viewport: { width: 1280, height: 720 },
  };
}

module.exports = defineConfig({
  use: getCommonSettings(),
  projects: [
    {
      name: 'Desktop Chromium',
      use: { ...getCommonSettings(), browserName: 'chromium' },
    },
    {
      name: 'Mobile WebKit',
      use: { ...getCommonSettings(), browserName: 'webkit', viewport: { width: 375, height: 667 } },
    },
  ],
});

2.4. 공통 설정과 환경 변수 조합

공통 설정에 환경 변수를 적용하여 유연하게 설정을 관리할 수 있습니다.

require('dotenv').config();

function getCommonSettings() {
  return {
    headless: process.env.HEADLESS === 'true',
    baseURL: process.env.BASE_URL,
    timeout: parseInt(process.env.TIMEOUT) || 30000,
  };
}

module.exports = defineConfig({
  use: getCommonSettings(),
  projects: [
    {
      name: 'Staging Environment',
      use: { ...getCommonSettings(), baseURL: 'https://staging.example.com' },
    },
    {
      name: 'Production Environment',
      use: { ...getCommonSettings(), baseURL: 'https://production.example.com' },
    },
  ],
});

3. 테스트 분리

브라우저별로 테스트를 분리하고, 각 프로젝트를 병렬 실행하여 효율성을 높입니다.

위 설정 파일을 참고하여 프로젝트 요구 사항에 맞게 수정하면 효율적인 테스트 환경을 구축할 수 있습니다.

Playwright CLI 활용

Playwright CLI(Command Line Interface)는 Playwright에서 제공하는 강력한 도구로, 다양한 작업을 명령어를 통해 빠르고 간단하게 수행할 수 있습니다. Playwright CLI를 활용하면 테스트 실행, 코드 생성, 브라우저 설치 및 관리, 리포트 확인 등 많은 작업을 자동화하고 효율적으로 처리할 수 있습니다. 아래는 Playwright CLI의 주요 명령어와 활용 방법입니다.

1. 기본 명령어

1.1. Playwright 버전 확인

Playwright가 설치되었는지 확인하고 현재 버전을 출력합니다.

npx playwright --version

1.2. 브라우저 설치

Playwright에서 사용하는 브라우저(Chromium, Firefox, WebKit)를 설치합니다.

npx playwright install

특정 브라우저만 설치하고 싶다면 아래와 같이 실행합니다:

npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

1.3. Playwright 초기화

프로젝트 디렉터리를 초기화하고 필요한 파일 및 디렉터리를 생성합니다.

npx playwright init

이 명령은 다음을 수행합니다:

tests/ 디렉터리 생성.
playwright.config.js 설정 파일 생성.
샘플 테스트 파일 추가.

2. 테스트 실행

Playwright CLI를 사용하여 테스트를 실행할 수 있습니다.

2.1. 모든 테스트 실행

테스트 디렉터리 내의 모든 테스트를 실행합니다.

npx playwright test

2.2. 특정 테스트 파일 실행

특정 테스트 파일만 실행하려면 파일 경로를 명시합니다.

npx playwright test tests/example.spec.js

2.3. 특정 테스트 이름 실행

특정 이름을 가진 테스트만 실행하려면 -g 옵션을 사용합니다.

npx playwright test -g "test name"

2.4. 브라우저 선택 실행

테스트를 특정 브라우저에서 실행하려면 --project 옵션을 사용합니다.

npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

3. 코드 자동 생성

Playwright의 codegen 기능을 사용하면 브라우저 상에서 수행한 작업을 기반으로 테스트 코드를 자동으로 생성할 수 있습니다.

3.1. 코드 생성 시작

아래 명령을 실행하면 브라우저가 열리고, 상호작용 기록을 기반으로 코드를 생성합니다.

npx playwright codegen

3.2. 특정 URL에서 시작

테스트할 웹사이트를 명시하여 코드 생성을 시작합니다.

npx playwright codegen https://example.com

3.3. 출력된 코드 저장

자동 생성된 코드를 복사하여 Playwright 테스트 파일로 저장하거나, CLI에서 직접 저장할 수 있습니다.

4. 브라우저 인터랙션

Playwright CLI를 사용하여 브라우저를 직접 열거나 테스트에 필요한 리소스를 다운로드할 수 있습니다.

4.1. 브라우저 열기

특정 브라우저를 열고 디버깅에 활용할 수 있습니다.

npx playwright open chromium
npx playwright open firefox
npx playwright open webkit

4.2. 브라우저 버전 확인

Playwright가 설치한 브라우저의 버전을 확인합니다.

npx playwright show-browser chromium

5. 결과 리포트

Playwright는 테스트 실행 결과를 HTML 리포트 형태로 제공합니다.

5.1. 리포트 생성 및 보기

테스트를 실행한 후 생성된 HTML 리포트를 확인합니다.

npx playwright show-report

5.2. 리포트 출력 경로 설정

playwright.config.js 파일에서 리포트 출력 경로를 설정할 수 있습니다.

module.exports = {
  reporter: [['html', { outputFolder: 'test-results' }]],
};

6. Trace Viewer (트레이스 뷰어)

Playwright는 테스트 실행 중에 발생한 문제를 분석할 수 있는 트레이스 뷰어를 제공합니다.

6.1. 트레이스 생성

테스트 실행 중에 트레이스를 생성하려면 playwright.config.js에서 설정합니다.

module.exports = {
  use: {
    trace: 'on', // 또는 'retain-on-failure'
  },
};

6.2. 트레이스 보기

테스트 실행 후 생성된 트레이스 파일을 열어 문제를 분석합니다.

npx playwright show-trace trace.zip

7. 기타 명령어

7.1. 브라우저 다운로드 크기 줄이기

Playwright에 필요한 브라우저만 다운로드하여 용량을 줄입니다.

npx playwright install --with-deps chromium

7.2. 구성 파일 없이 실행

Playwright 설정 파일 없이 특정 테스트를 실행할 수 있습니다.

npx playwright test tests/example.spec.js --config=""

7.3. CI 모드로 실행

CI 환경에서 실행 시 브라우저를 간소화한 방식으로 실행합니다.

npx playwright test --ci

8. 활용 사례

8.1. 다중 브라우저 테스트

다양한 브라우저에서 테스트를 병렬로 실행하여 크로스 브라우저 호환성을 확인합니다.

npx playwright test --project=chromium --project=firefox --project=webkit

8.2. 재시도 설정

실패한 테스트를 자동으로 재시도하여 일시적인 문제를 해결합니다.

npx playwright test --retries=2

8.3. 테스트 필터링

특정 태그나 이름으로 필터링하여 테스트를 실행합니다.

npx playwright test --grep "@login"

Playwright CLI는 간단한 명령어로 다양한 작업을 수행할 수 있어 테스트 작성 및 실행의 생산성을 크게 높여줍니다.

Playwright 설치

Node.js 설치

1. Node.js 공식 웹사이트에서 다운로드 (추천 방법)

2. 패키지 매니저로 설치 (macOS/Linux 사용자)

macOS

Ubuntu/Debian (Linux)

CentOS/Fedora/RHEL (Linux)

3. nvm(Node Version Manager) 사용 (버전 관리 필요 시 추천)

4. 설치 확인

Playwright 패키지 설치

1. Node.js 확인

2. 새 프로젝트 생성 (선택 사항)

3. Playwright 설치

기본 설치

설치 옵션 (브라우저 포함)

4. Playwright 설치 확인

5. 간단한 테스트 코드 실행 (선택 사항)

실행 명령어

6. Playwright 테스트 프레임워크 추가 (선택 사항)

테스트 환경 설정

프로젝트 초기화

1. 프로젝트 디렉터리 생성

2. Node.js 프로젝트 초기화

3. Playwright 설치

4. Playwright 설정 초기화

이 명령은 다음을 수행합니다.

5. 디렉터리 구조

6. Playwright 테스트 실행

7. 샘플 테스트 코드 작성 (선택 사항)

8. Playwright Codegen 사용

9. Playwright 환경 설정 수정 (선택 사항)

테스트 디렉토리 구성

1. 기본 디렉터리 구조

2. 확장된 디렉터리 구조

3. 디렉터리별 역할

4. 파일 이름 규칙

5. Playwright 설정 파일과 디렉터리 연결

6. 추가 팁

Config 파일 작성

1. 기본 설정 파일 작성

2. 주요 설정 설명

3. 예시: 다중 환경 설정

4. 테스트 실행

5. Playwright 설정 파일 활용 팁

1.1. .env 파일 생성

1.2. dotenv 패키지 설치

1.3. Playwright 설정 파일에서 환경 변수 사용

1.4. 환경에 따른 실행 스크립트

2. 공통 설정 관리

2.1. 기본 설정 (use) 활용

2.2. 프로젝트별 설정 재정의

2.3. 공통 설정 함수화

2.4. 공통 설정과 환경 변수 조합

3. 테스트 분리

Playwright CLI 활용

1. 기본 명령어

1.1. Playwright 버전 확인

1.2. 브라우저 설치

1.3. Playwright 초기화

2. 테스트 실행

2.1. 모든 테스트 실행

2.2. 특정 테스트 파일 실행

2.3. 특정 테스트 이름 실행

2.4. 브라우저 선택 실행

3. 코드 자동 생성

3.1. 코드 생성 시작

3.2. 특정 URL에서 시작

3.3. 출력된 코드 저장

4. 브라우저 인터랙션

4.1. 브라우저 열기

4.2. 브라우저 버전 확인

5. 결과 리포트

5.1. 리포트 생성 및 보기

5.2. 리포트 출력 경로 설정

6. Trace Viewer (트레이스 뷰어)

6.1. 트레이스 생성

6.2. 트레이스 보기

7. 기타 명령어

7.1. 브라우저 다운로드 크기 줄이기

7.2. 구성 파일 없이 실행

1.1. `.env` 파일 생성

1.2. `dotenv` 패키지 설치

2.1. 기본 설정 (`use`) 활용