Playwright + Docker + GitHubActions で実現するCI/CD環境構築

PlaywrightをDocker上で動かす

playwright.config.ts

playwright.config.ts に以下の記述を追加します。

自動サーバー起動:

• テストを実行する前にnpm run startコマンドを実行して、アプリケーションサーバーを自動的に起動します
• テストが完了すると、自動的にサーバーを停止します

  webServer: {
    command: 'npm run start',
    url: 'http://localhost:4200',
  },

Dockerfile

ルートディレクトリにDockerfileを作成し、以下のように記述します。

# playwright image を使用。なお、v1.49.1 部分はローカルで動いているPlaywright のバージョンに合わせる。
FROM mcr.microsoft.com/playwright:v1.49.1-noble

RUN mkdir /app
WORKDIR /app
COPY . /app/

RUN npm install --force
RUN npx playwright install

docker-compose.yml

ルートディレクトリにdocker-compose.yml を作成し、以下のように記述します。

version: '3.8'
services:
  playwright-test:
    image: playwright-test
    build:
      context: .
      dockerfile: ./Dockerfile
    command: npx playwright test --project=chromium
    
    # レポートをローカルに抽出してくるための記述
    volumes:
      - ./playwright-report:/app/playwright-report
      - ./test-results:/app/test-results

起動する

ターミナルで以下のコマンドを行います。

docker compose up --build

以下のようになるはずです。

GitHubActionsと連携する

.github/workflows/playwright.yml を作成する

.github/workflows/playwright.yml を作成します。以下の通り記述します。

name: Playwright Tests
on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - name: Install dependencies
        run: npm ci --force
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps --force
      - name: Run Playwright tests
        run: npx playwright test --project=chromium
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

on:
push:
branches: [main, master]
pull_request:
branches: [main, master]

部分の記述により、mainブランチ、masterブランチにpush、またはPRした場合、自動でGitHubActionsでPlaywrightテストが行われることになります。