By LEE JUNGMIN in Playwright — 28 1월 2025

Playwright와 CI/CD 통합

CI/CD는 소프트웨어 개발과 배포를 자동화하여 효율성을 높이는 방법론으로, 지속적 통합(CI)과 지속적 제공 또는 배포(CD)로 구성됩니다. CI는 코드 변경 사항을 자주 병합하고 자동 빌드·테스트를 통해 문제를 조기 발견하고 품질을 유지합니다. CD는 변경된 코드를 프로덕션 환경에 배포 준비하거나 자동 배포하여 릴리즈 속도를 개선합니다. Jenkins, GitHub Actions, GitLab CI/CD 등 다양한 도구로 테스트 자동화와 품질 관리를 효율적으로 수행할 수 있습니다.

CI/CD란 무엇인가?

CI/CD는 Continuous Integration(지속적 통합)과 Continuous Delivery(지속적 제공) 또는 Continuous Deployment(지속적 배포)의 약어로, 소프트웨어 개발과 배포 프로세스를 자동화하고 효율화하는 방법론을 의미합니다. CI/CD는 개발자들이 더 빠르게 코드 변경 사항을 통합하고, 자동화된 테스트 및 배포 프로세스를 통해 품질과 안정성을 유지하면서 소프트웨어를 더 자주 릴리즈할 수 있도록 돕습니다.

CI (Continuous Integration, 지속적 통합)

개념: 개발자들이 작성한 코드 변경 사항을 주기적으로 공유 저장소에 통합하고, 자동화된 빌드와 테스트 과정을 거치는 것을 의미합니다.
목적: 코드 충돌을 빠르게 확인하고, 문제를 조기에 발견하며, 코드베이스의 품질을 유지하는 것입니다.
주요 활동
- 코드 변경 사항을 공유 저장소에 자주 병합.
- 자동화된 빌드를 실행하여 코드가 정상적으로 작동하는지 확인.
- 단위 테스트, 통합 테스트 등 자동화된 테스트 실행.

CD (Continuous Delivery, 지속적 제공)

개념: CI 과정을 거친 이후, 코드 변경 사항을 프로덕션 환경에 배포할 준비가 된 상태로 유지하는 것을 의미합니다. 이 과정은 자동화되어 있으나 최종 배포는 사람의 승인이 필요할 수도 있습니다.
목적: 안정적으로 배포 가능한 상태를 지속적으로 유지하여, 소프트웨어 릴리즈를 신속하고 쉽게 수행할 수 있도록 하는 것입니다.
주요 활동
- 자동화된 배포 파이프라인 설정.
- 스테이징 환경에 배포하여 최종 확인.
- 배포 준비 상태를 지속적으로 유지.

CD (Continuous Deployment, 지속적 배포)

개념: 지속적 제공의 다음 단계로, 승인을 거치지 않고 코드 변경 사항을 자동으로 프로덕션 환경에 배포하는 것을 의미합니다.
목적: 모든 코드 변경 사항을 신속하게 사용자에게 제공함으로써, 제품 업데이트를 즉각적으로 수행하는 것입니다.
주요 활동
- 프로덕션 환경에 대한 완전 자동화된 배포.
- 모든 테스트를 통과한 코드만 배포.

CI/CD의 이점

빠른 피드백 루프: 코드 변경 사항에 대한 문제를 조기에 발견하고 해결할 수 있습니다.
품질 향상: 자동화된 테스트와 배포를 통해 오류를 최소화하고 안정성을 유지합니다.
릴리즈 속도 증가: 소프트웨어를 더 빠르고 빈번하게 릴리즈할 수 있습니다.
효율성 증대: 수작업을 줄이고, 개발 및 운영 팀 간 협업을 촉진합니다.

주요 도구

CI/CD 도구: Jenkins, GitHub Actions, GitLab CI/CD, CircleCI, Travis CI 등.
버전 관리 도구: Git, Bitbucket 등.
컨테이너 및 배포 관리 도구: Docker, Kubernetes 등.

CI/CD는 DevOps의 핵심적인 부분으로, 개발과 운영 간의 협업을 강화하고, 더 나은 소프트웨어를 더 빠르게 제공할 수 있도록 돕는 중요한 프로세스입니다.

Playwright와 CI/CD 연결

GitHub Actions

Playwright와 GitHub Actions를 사용해 CI/CD 파이프라인을 구축하면, 브라우저 기반의 테스트를 자동화하여 코드 변경 사항의 안정성을 지속적으로 확인할 수 있습니다. 아래에 Playwright와 GitHub Actions를 연동하여 CI/CD를 구성하는 방법을 단계별로 설명합니다.

1. Playwright 테스트 프로젝트 준비

Playwright를 프로젝트에 설치하고 테스트 환경을 설정해야 합니다.

Playwright 설치

npm init playwright@latest

기본 설치를 진행하면 Playwright는 자동으로 테스트 파일, 설정 파일(playwright.config.js), 브라우저 등을 설정합니다.

테스트 스크립트 작성

tests/ 디렉토리 안에 Playwright 테스트 파일을 작성합니다.

// tests/example.spec.js
const { test, expect } = require('@playwright/test');

test('Google search test', async ({ page }) => {
  await page.goto('https://www.google.com');
  await page.fill('input[name="q"]', 'Playwright');
  await page.keyboard.press('Enter');
  await page.waitForSelector('#search');
  const results = await page.locator('#search .g').count();
  expect(results).toBeGreaterThan(0);
});

2. GitHub Actions 워크플로우 파일 설정

GitHub Actions는 .github/workflows/ 디렉토리에 YAML 파일로 워크플로우를 정의합니다.

워크플로우 파일 생성

.github/workflows/playwright.yml 파일을 생성하고 다음 내용을 추가합니다.

name: Playwright Tests

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      # 1. 리포지토리 체크아웃
      - name: Checkout code
        uses: actions/checkout@v3

      # 2. Node.js 설치
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      # 3. 의존성 설치
      - name: Install dependencies
        run: npm install

      # 4. Playwright 브라우저 설치
      - name: Install Playwright browsers
        run: npx playwright install

      # 5. 테스트 실행
      - name: Run Playwright tests
        run: npx playwright test

3. GitHub Actions 실행 과정

트리거
- 위 설정에서는 main 브랜치에 코드가 푸시되거나, pull_request 이벤트가 발생할 때 워크플로우가 실행됩니다.
작업 흐름
- actions/checkout으로 리포지토리를 클론합니다.
- Node.js를 설치하고 의존성을 다운로드합니다.
- Playwright 브라우저와 필요한 리소스를 설치합니다.
- Playwright 테스트를 실행합니다.
결과 확인
- GitHub 리포지토리의 Actions 탭에서 실행 결과를 확인할 수 있습니다.
- 테스트 성공/실패 여부가 표시되며, 실패 시 로그를 통해 디버깅할 수 있습니다.

4. 추가 구성

4.1 테스트 결과 보고서 생성

Playwright는 HTML 형식의 테스트 결과 보고서를 생성할 수 있습니다. playwright.config.js 파일에 다음을 추가합니다.

reporter: [['html', { outputFolder: 'playwright-report', open: 'never' }]],

4.2 GitHub Actions에서 결과 아티팩트 업로드

테스트 결과를 아티팩트로 저장하려면 다음 단계를 추가합니다.

      # 6. 테스트 결과를 아티팩트로 업로드
      - name: Upload test artifacts
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report
          path: playwright-report

4.3 병렬 테스트 실행

GitHub Actions에서 병렬로 테스트를 실행하려면 Playwright의 sharding 기능과 GitHub Actions의 matrix 전략을 사용할 수 있습니다.

5. 최종 구조

위 과정을 적용하면 Playwright와 GitHub Actions가 연결되어 다음을 자동으로 수행합니다.

코드 변경 시 자동으로 테스트 실행.
테스트 성공 여부를 Pull Request와 Actions 탭에서 즉시 확인.
테스트 실패 시 로그 제공으로 빠른 디버깅 가능.

이를 통해 지속적인 품질 관리를 효율적으로 구현할 수 있습니다.

Jenkins

Playwright와 Jenkins를 연동하여 CI/CD 파이프라인을 구축하면 브라우저 기반의 테스트를 자동화하고 코드 품질을 지속적으로 확인할 수 있습니다. 아래는 Jenkins를 활용해 Playwright 테스트를 실행하는 방법을 단계별로 설명합니다.

1. Playwright 프로젝트 준비

Jenkins와 연동하기 전에 Playwright 프로젝트를 설정합니다.

Playwright 설치

npm init playwright@latest

테스트 파일 작성

Playwright 프로젝트에 tests/ 디렉토리를 생성하고 테스트 파일을 작성합니다.

// tests/example.spec.js
const { test, expect } = require('@playwright/test');

test('Google search test', async ({ page }) => {
  await page.goto('https://www.google.com');
  await page.fill('input[name="q"]', 'Playwright');
  await page.keyboard.press('Enter');
  await page.waitForSelector('#search');
  const results = await page.locator('#search .g').count();
  expect(results).toBeGreaterThan(0);
});

2. Jenkins 설치 및 플러그인 준비

Jenkins 설치
- Jenkins를 설치하고 실행합니다. (로컬 또는 서버 환경)
- Jenkins 설치 방법은 Jenkins 공식 문서를 참조하세요.
필수 플러그인 설치
- Jenkins 관리 페이지에서 Manage Jenkins > Manage Plugins로 이동.
- 아래 플러그인을 설치
  - NodeJS Plugin (Node.js 환경 설정용)
  - Pipeline Plugin (파이프라인 구성용)
  - Git Plugin (Git 리포지토리 연동용)

3. Jenkins Job 생성

3.1 Freestyle Job 생성

Jenkins 대시보드에서 New Item을 클릭하고, Freestyle Project를 선택합니다.
프로젝트 이름을 입력하고 생성합니다.

3.2 Git 리포지토리 연결

Source Code Management에서 Git을 선택합니다.
Repository URL에 Playwright 프로젝트가 저장된 Git 리포지토리 URL을 입력합니다.
필요시 인증 정보(Credentials)를 추가합니다.

3.3 Build Steps 추가

Build Environment에서 Provide Node & npm bin/ folder to PATH를 선택합니다.
- Node.js 환경은 Manage Jenkins > Global Tool Configuration에서 설정해야 합니다.
- Node.js 버전을 선택하거나 새로 추가합니다.
Build Steps에서 Execute Shell을 추가하고, 아래 명령어를 입력합니다.

# 1. 의존성 설치
npm install

# 2. Playwright 브라우저 설치
npx playwright install

# 3. Playwright 테스트 실행
npx playwright test

4. Jenkins Pipeline으로 구성 (권장)

Jenkins의 Pipeline Job을 사용하면 파이프라인 스크립트를 작성하여 테스트를 더 효율적으로 관리할 수 있습니다.

Pipeline 구성

New Item에서 Pipeline 프로젝트를 생성합니다.
Pipeline Script를 다음과 같이 작성합니다.

pipeline {
    agent any
    stages {
        stage('Checkout Code') {
            steps {
                // Git 리포지토리 체크아웃
                git url: 'https://github.com/your-repo-url.git', branch: 'main'
            }
        }
        stage('Install Dependencies') {
            steps {
                // Node.js 및 Playwright 브라우저 설치
                sh 'npm install'
                sh 'npx playwright install'
            }
        }
        stage('Run Playwright Tests') {
            steps {
                // Playwright 테스트 실행
                sh 'npx playwright test'
            }
        }
    }
    post {
        always {
            // 테스트 결과 보고서 아티팩트 저장 (선택 사항)
            archiveArtifacts artifacts: 'playwright-report/**/*', allowEmptyArchive: true
        }
        failure {
            // 테스트 실패 시 로그 표시
            echo 'Tests failed. Check logs for details.'
        }
    }
}

5. Playwright 테스트 결과 보고서 확인

Playwright는 HTML 형식의 보고서를 생성할 수 있습니다. playwright.config.js에 다음을 추가하여 결과 보고서를 설정합니다.

reporter: [['html', { outputFolder: 'playwright-report', open: 'never' }]],

Jenkins에 테스트 보고서 통합

테스트 보고서를 Jenkins에서 직접 확인하려면 HTML Publisher Plugin을 설치하고 아래와 같이 설정합니다.

Post-build Actions에서 Publish HTML Reports를 추가합니다.
HTML Directory Path에 playwright-report를 입력합니다.

6. 병렬 테스트 및 확장

Playwright의 sharding 기능을 활용하면 Jenkins에서 병렬 테스트를 실행할 수 있습니다. 이를 Jenkins 파이프라인에 통합하려면 matrix 전략을 사용할 수도 있습니다.

최종 구조

Jenkins는 Git에서 코드 변경 사항을 자동으로 가져와 Playwright 테스트를 실행.
테스트 결과를 Jenkins UI 또는 보고서를 통해 확인.
실패한 테스트는 디버깅을 위한 로그를 제공.

이 방식은 Playwright의 브라우저 기반 테스트를 Jenkins CI/CD 환경에서 효과적으로 자동화하여, 품질 관리와 배포 주기를 최적화합니다.

GitLab CI/CD

Playwright와 GitLab CI/CD를 연동하면 브라우저 기반의 테스트를 자동화하고 코드 변경 시 지속적인 통합과 배포를 구현할 수 있습니다. GitLab CI/CD는 .gitlab-ci.yml 파일을 통해 파이프라인을 정의하며, 이를 Playwright 프로젝트에 설정하는 방법을 단계별로 설명합니다.

1. Playwright 프로젝트 준비

GitLab과 연동하기 전에 Playwright 프로젝트를 준비해야 합니다.

Playwright 설치

Playwright 프로젝트를 초기화하고 테스트 환경을 구성합니다.

npm init playwright@latest

테스트 파일 작성

Playwright 테스트 파일을 작성합니다.

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

test('Google search test', async ({ page }) => {
  await page.goto('https://www.google.com');
  await page.fill('input[name="q"]', 'Playwright');
  await page.keyboard.press('Enter');
  await page.waitForSelector('#search');
  const results = await page.locator('#search .g').count();
  expect(results).toBeGreaterThan(0);
});

2. GitLab CI/CD 파이프라인 파일 생성

GitLab의 CI/CD 파이프라인은 .gitlab-ci.yml 파일에서 정의합니다. 프로젝트 루트에 .gitlab-ci.yml 파일을 생성하고 다음 내용을 추가합니다.

기본 구성

stages:
  - install
  - test

cache:
  paths:
    - node_modules/

install_dependencies:
  stage: install
  script:
    - npm ci
    - npx playwright install
  artifacts:
    paths:
      - node_modules/

run_playwright_tests:
  stage: test
  script:
    - npx playwright test
  artifacts:
    when: always
    paths:
      - playwright-report/
    reports:
      junit: playwright-report/junit.xml

3. GitLab CI/CD 파이프라인 상세 설명

3.1 단계 정의 (`stages`)

install: 의존성 설치 및 Playwright 브라우저 다운로드.
test: Playwright 테스트 실행.

3.2 캐시 설정

cache는 node_modules를 캐싱하여 빌드 속도를 최적화합니다.

3.3 Artifacts 생성

테스트 보고서나 결과를 저장합니다.
Playwright는 HTML 형식의 보고서를 생성하며, 이를 playwright-report 디렉토리에 저장합니다.

3.4 JUnit 보고서

reports 섹션에서 JUnit 형식의 테스트 결과를 정의하여 GitLab의 CI/CD 테스트 리포트 기능을 사용할 수 있습니다.

Playwright에서 JUnit 결과를 생성하려면 playwright.config.js에 다음을 추가합니다.

reporter: [
  ['html', { outputFolder: 'playwright-report', open: 'never' }],
  ['junit', { outputFile: 'playwright-report/junit.xml' }]
],

4. 파이프라인 실행

4.1 GitLab Push

프로젝트의 .gitlab-ci.yml 파일을 GitLab 리포지토리에 푸시합니다.

git add .gitlab-ci.yml
git commit -m "Add GitLab CI/CD for Playwright"
git push

4.2 파이프라인 확인

GitLab 리포지토리의 CI/CD > Pipelines 메뉴에서 파이프라인 실행 상태를 확인할 수 있습니다.
각 단계(install, test)의 로그를 확인하여 빌드 및 테스트 상태를 검토합니다.

5. 추가 설정

5.1 환경별 테스트 실행

여러 환경에서 테스트를 실행하려면 GitLab의 환경 변수를 사용할 수 있습니다.

run_playwright_tests:
  stage: test
  script:
    - npx playwright test --project=${BROWSER}
  variables:
    BROWSER: chromium

GitLab의 CI/CD Settings에서 환경 변수를 설정하여, 테스트 브라우저(Chromium, Firefox, WebKit)를 변경하거나 다른 환경에 맞춘 실행을 구성할 수 있습니다.

5.2 병렬 테스트 실행

GitLab CI/CD의 parallel 키를 활용해 병렬로 테스트를 실행할 수 있습니다.

run_playwright_tests:
  stage: test
  parallel:
    matrix:
      - BROWSER: chromium
      - BROWSER: firefox
      - BROWSER: webkit
  script:
    - npx playwright test --project=${BROWSER}

5.3 HTML 테스트 보고서 보기

HTML 보고서를 확인하려면 GitLab Pages를 사용해 보고서를 호스팅할 수 있습니다.

pages:
  stage: deploy
  script:
    - mkdir -p public
    - cp -r playwright-report/* public
  artifacts:
    paths:
      - public
  only:
    - main

6. 최종 구조

이 설정으로 Playwright와 GitLab CI/CD를 완전히 통합하여 다음을 수행할 수 있습니다.

코드 변경 시 자동 테스트: GitLab에서 푸시 또는 머지 요청 이벤트에 따라 테스트 실행.
자동화된 보고: JUnit 보고서와 HTML 보고서를 통해 테스트 결과 제공.
병렬 및 다중 환경 지원: 다양한 브라우저나 환경에서 테스트 실행.

GitLab CI/CD를 통해 Playwright 테스트를 자동화하면 개발 효율성을 극대화하고 코드 품질을 유지할 수 있습니다.

테스트 결과 보고서 생성

Allure Reports

Playwright에서 Allure Reports를 생성하면 테스트 실행 결과를 직관적으로 시각화할 수 있습니다. Allure Reports는 테스트의 성공/실패 현황, 테스트 단계별 상세 로그, 스크린샷, 비디오 등의 정보를 포함하는 풍부한 보고서를 제공합니다. Playwright와 Allure Reports를 연동하는 과정을 단계별로 설명하겠습니다.

1. Playwright 프로젝트 준비

Playwright 프로젝트가 설정되어 있어야 합니다. 아래는 Playwright 설치 및 초기화 명령어입니다.

npm init playwright@latest

2. Allure Reporter 설치

Allure Reports와 Playwright를 통합하기 위해 allure-playwright 및 allure-commandline 패키지를 설치합니다.

설치 명령어

npm install --save-dev allure-playwright allure-commandline

allure-playwright: Playwright와 Allure Reports의 통합을 지원합니다.
allure-commandline: Allure CLI를 사용하여 보고서를 생성하고 열 수 있습니다.

3. Playwright 설정 파일 수정

playwright.config.js 또는 playwright.config.ts 파일에 Allure Reporter를 추가합니다.

설정 예시

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

module.exports = defineConfig({
  reporter: [
    ['list'], // 기본 콘솔 출력
    ['allure-playwright'] // Allure Reporter 추가
  ],
  use: {
    screenshot: 'only-on-failure', // 실패 시 스크린샷 생성
    video: 'retain-on-failure',   // 실패 시 비디오 기록
    trace: 'on-first-retry'       // 첫 번째 재시도 시 Trace 파일 생성
  }
});

4. Allure Reports 실행

4.1 테스트 실행

Playwright 테스트를 실행합니다.

npx playwright test

테스트 실행 후 allure-results라는 디렉토리가 생성됩니다. 이 디렉토리에는 Allure Reports에 필요한 데이터 파일이 저장됩니다.

4.2 Allure Report 생성

Allure CLI를 사용해 HTML 형식의 보고서를 생성합니다.

npx allure generate allure-results --clean

allure-results: 테스트 실행 후 생성된 Allure 데이터 파일의 경로.
--clean: 기존에 생성된 보고서를 삭제하고 새로 생성.

4.3 Allure Report 열기

생성된 Allure Report를 웹 브라우저에서 엽니다.

npx allure open

5. GitHub Actions 또는 CI/CD 환경에서 Allure Reports 생성

CI/CD 환경에서 Allure Reports를 생성하려면 보고서를 아티팩트로 저장하거나 외부에서 확인할 수 있도록 설정합니다.

GitHub Actions 예시

.github/workflows/playwright-allure.yml

name: Playwright Allure Reports

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: |
          npm ci
          npx playwright install

      - name: Run Playwright tests
        run: npx playwright test

      - name: Generate Allure Reports
        run: npx allure generate allure-results --clean

      - name: Upload Allure Reports as artifact
        uses: actions/upload-artifact@v3
        with:
          name: allure-report
          path: allure-report

이 설정으로 Playwright 테스트가 실행된 후, Allure Reports가 생성되고 GitHub Actions의 아티팩트로 저장됩니다.

6. Allure Reports에 포함되는 추가 정보

스크린샷: 테스트 실패 시 use: { screenshot: 'only-on-failure' } 설정으로 캡처된 이미지를 포함.
비디오: use: { video: 'retain-on-failure' }로 실패한 테스트의 실행 비디오를 포함.
Trace 파일: use: { trace: 'on-first-retry' }로 테스트 단계별 실행 데이터를 포함.

7. Allure Reports의 주요 기능

테스트 현황 시각화: 성공, 실패, 스킵된 테스트의 요약 제공.
상세 단계별 기록: 각 테스트의 단계별 결과와 로그 확인 가능.
첨부 파일 제공: 스크린샷, 비디오, Trace 파일 등 첨부.
플랫폼별 결과 확인: 브라우저별, 환경별 테스트 결과 비교 가능.

Allure Reports와 Playwright를 연동하면 테스트 실행 결과를 직관적이고 시각적으로 확인할 수 있습니다. 이를 통해 개발자는 테스트 실패 원인을 쉽게 분석하고, QA 팀은 전체 테스트 상태를 효율적으로 관리할 수 있습니다. CI/CD 환경에서 Allure Reports를 자동 생성하면, 팀 전체의 협업 효율성이 더욱 높아질 것입니다.

HTML Reporter

Playwright의 HTML Reporter는 테스트 결과를 직관적이고 시각적으로 확인할 수 있는 웹 기반 보고서를 생성합니다. HTML Reporter는 Playwright에서 기본적으로 제공되며, 추가 설치 없이 사용할 수 있습니다. 아래는 Playwright의 HTML Reporter를 설정하고 사용하는 방법을 단계별로 설명합니다.

1. HTML Reporter 활성화

Playwright의 playwright.config.js 또는 playwright.config.ts 파일에서 HTML Reporter를 설정합니다.

설정 예시

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

module.exports = defineConfig({
  reporter: [
    ['html', { outputFolder: 'playwright-report', open: 'never' }]
  ],
  use: {
    screenshot: 'only-on-failure', // 실패 시 스크린샷 저장
    video: 'retain-on-failure',   // 실패 시 비디오 기록
    trace: 'on-first-retry'       // 첫 번째 재시도 시 Trace 파일 생성
  }
});

주요 옵션

outputFolder: HTML 보고서 파일이 저장될 디렉토리. 기본값은 playwright-report.
open:
- 'always': 테스트 실행 후 자동으로 보고서 열기.
- 'on-failure': 테스트가 실패한 경우에만 보고서 열기.
- 'never': 자동으로 열지 않음(기본값).

2. 테스트 실행

Playwright 테스트를 실행하면 HTML 보고서가 자동으로 생성됩니다.

실행 명령어

npx playwright test

실행 결과

테스트 실행 후 playwright-report 디렉토리가 생성됩니다.
디렉토리 안에는 HTML 형식의 보고서와 관련 데이터 파일이 저장됩니다.

3. HTML Report 확인

로컬에서 HTML 보고서 열기

HTML 보고서를 로컬에서 열려면 다음 명령어를 사용합니다.

npx playwright show-report

기본적으로 브라우저가 열리고 playwright-report/index.html 파일이 표시됩니다.
보고서는 테스트의 성공, 실패, 스킵 상태를 요약하고 각 테스트의 상세 정보를 제공합니다.

4. CI/CD에서 HTML Reporter 사용

4.1 GitHub Actions에서 HTML Report 생성

GitHub Actions 파이프라인에서 HTML 보고서를 생성하고 업로드하려면 다음 .github/workflows/playwright.yml 파일을 설정합니다.

name: Playwright HTML Reports

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: |
          npm ci
          npx playwright install

      - name: Run Playwright tests
        run: npx playwright test

      - name: Upload HTML report as artifact
        uses: actions/upload-artifact@v3
        with:
          name: html-report
          path: playwright-report

결과

HTML 보고서는 GitHub Actions의 아티팩트로 업로드됩니다.
GitHub Actions 대시보드에서 다운로드하거나 공유할 수 있습니다.

5. HTML Report의 주요 기능

테스트 상태 요약: 성공, 실패, 스킵된 테스트를 시각적으로 보여줍니다.
상세 정보 제공: 각 테스트의 실행 로그, 실패한 테스트의 스크린샷, 비디오, Trace 파일 등 확인 가능.
필터 기능: 브라우저, 테스트 파일, 태그 등을 기준으로 결과를 필터링.
Trace 통합: Trace 파일이 활성화된 경우, 보고서에서 Trace Viewer로 바로 연결됩니다.

6. HTML Reporter 커스터마이징

Playwright는 HTML Reporter의 경로나 열기 동작을 커스터마이징할 수 있습니다.

보고서 출력 경로 변경

['html', { outputFolder: 'custom-report-folder' }]

테스트 실패 시 자동 열기

['html', { open: 'on-failure' }]

Playwright의 HTML Reporter는 설치나 복잡한 설정 없이 테스트 결과를 시각화할 수 있는 간단하고 강력한 도구입니다. 특히 테스트 실패 시 자동으로 스크린샷, 비디오, Trace 정보를 확인할 수 있어 디버깅 과정이 쉬워집니다. CI/CD 파이프라인과 연동하면 팀 전체가 손쉽게 결과를 공유하고 분석할 수 있습니다.

CI/CD란 무엇인가?

CI (Continuous Integration, 지속적 통합)

CD (Continuous Delivery, 지속적 제공)

CD (Continuous Deployment, 지속적 배포)

CI/CD의 이점

주요 도구

Playwright와 CI/CD 연결

GitHub Actions

1. Playwright 테스트 프로젝트 준비

Playwright 설치

테스트 스크립트 작성

2. GitHub Actions 워크플로우 파일 설정

워크플로우 파일 생성

3. GitHub Actions 실행 과정

4. 추가 구성

4.1 테스트 결과 보고서 생성

4.2 GitHub Actions에서 결과 아티팩트 업로드

4.3 병렬 테스트 실행

5. 최종 구조

Jenkins

1. Playwright 프로젝트 준비

Playwright 설치

테스트 파일 작성

2. Jenkins 설치 및 플러그인 준비

3. Jenkins Job 생성

3.1 Freestyle Job 생성

3.2 Git 리포지토리 연결

3.3 Build Steps 추가

4. Jenkins Pipeline으로 구성 (권장)

Pipeline 구성

5. Playwright 테스트 결과 보고서 확인

Jenkins에 테스트 보고서 통합

6. 병렬 테스트 및 확장

최종 구조

GitLab CI/CD

1. Playwright 프로젝트 준비

Playwright 설치

테스트 파일 작성

2. GitLab CI/CD 파이프라인 파일 생성

기본 구성

3. GitLab CI/CD 파이프라인 상세 설명

3.1 단계 정의 (stages)

3.2 캐시 설정

3.3 Artifacts 생성

3.4 JUnit 보고서

4. 파이프라인 실행

4.1 GitLab Push

4.2 파이프라인 확인

5. 추가 설정

5.1 환경별 테스트 실행

5.2 병렬 테스트 실행

5.3 HTML 테스트 보고서 보기

6. 최종 구조

테스트 결과 보고서 생성

Allure Reports

1. Playwright 프로젝트 준비

2. Allure Reporter 설치

설치 명령어

3. Playwright 설정 파일 수정

설정 예시

4. Allure Reports 실행

4.1 테스트 실행

4.2 Allure Report 생성

4.3 Allure Report 열기

5. GitHub Actions 또는 CI/CD 환경에서 Allure Reports 생성

GitHub Actions 예시

6. Allure Reports에 포함되는 추가 정보

7. Allure Reports의 주요 기능

HTML Reporter

1. HTML Reporter 활성화

설정 예시

주요 옵션

2. 테스트 실행

실행 명령어

실행 결과

3. HTML Report 확인

로컬에서 HTML 보고서 열기

4. CI/CD에서 HTML Reporter 사용

4.1 GitHub Actions에서 HTML Report 생성

결과

3.1 단계 정의 (`stages`)