PlaywrightをDockerfileに組み込むE2Eテスト環境の構築手順｜依存関係の解決

この記事のポイント

・Playwright公式Dockerイメージを使えば依存関係の問題を最短で解決できる
・自前Dockerfileでは npx playwright install-deps でパッケージを自動解決する
・docker-composeでテスト実行コンテナとアプリコンテナを分離する設計が基本
・test-resultsをボリュームマウントしてCIでレポートを取り出す

# Dockerfile.playwright
FROM mcr.microsoft.com/playwright:v1.48.0-jammy

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

# イメージのビルド
$ docker build -f Dockerfile.playwright -t my-playwright:latest .

# ブラウザの起動確認（出力例。環境により異なります）
$ docker run --rm my-playwright:latest npx playwright --version
Version 1.48.0

# Chromiumの起動確認
$ docker run --rm my-playwright:latest npx playwright install --dry-run chromium

# Dockerfile.playwright-custom
FROM node:20-bookworm-slim

WORKDIR /app

# npm ci で node_modules を先にインストール
COPY package*.json ./
RUN npm ci

# Playwright の依存パッケージを自動解決（chromium のみに絞ると高速）
RUN npx playwright install-deps chromium

# ブラウザ本体のインストール
RUN npx playwright install chromium

COPY . .

# --- ビルドステージ ---
FROM mcr.microsoft.com/playwright:v1.48.0-jammy AS builder

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .

# --- 実行ステージ ---
FROM mcr.microsoft.com/playwright:v1.48.0-jammy

WORKDIR /app
# ブラウザキャッシュをビルドステージから引き継ぐ
COPY --from=builder /root/.cache/ms-playwright /root/.cache/ms-playwright
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app .

# .dockerignore
node_modules
test-results
playwright-report
.git
*.log

# compose.playwright.yml
services:
  playwright:
    build:
      context: .
      dockerfile: Dockerfile.playwright
    volumes:
      - ./test-results:/app/test-results
      - ./playwright-report:/app/playwright-report
    command: npx playwright test
    environment:
      - BASE_URL=http://app:3000
    depends_on:
      - app

  app:
    image: your-app:latest
    ports:
      - "3000:3000"

# テストを実行（終了後にコンテナを削除）
$ docker compose -f compose.playwright.yml run --rm playwright

# 出力例（環境により異なります）
Running 5 tests using 2 workers

  ✓  1 [chromium] > tests/top.spec.ts:5:5 > トップページが表示される (1.2s)
  ✓  2 [chromium] > tests/login.spec.ts:8:5 > ログインできる (2.4s)

  5 passed (12.3s)

# .github/workflows/e2e.yml
name: E2E Tests

on:
  push:
    branches: [main]

jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Run Playwright tests
        run: docker compose -f compose.playwright.yml run --rm playwright

      - name: Upload test results
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

Error: browserType.launch: Executable doesn't exist at
  /root/.cache/ms-playwright/chromium-1234/chrome-linux/chrome

╔════════════════════════════════════════════╗
║ Host system is missing dependencies to run ║
║ browsers.                                  ║
║ Missing libraries:                         ║
║   libgbm.so.1                              ║
╚════════════════════════════════════════════╝

# 日本語フォントの追加（Dockerfile に追記）
RUN apt-get update && apt-get install -y \
    fonts-noto-cjk \
    && rm -rf /var/lib/apt/lists/*