PlaywrightをDocker上で動かす最小構成（E2Eテスト環境構築）

導入

本記事では、PlaywrightをDocker上で実行する構成を紹介します。
開発環境をDockerで統一している前提で進めます。

本記事の例では、TypeScript + React（Vite）環境を使用しています。

なお、Dockerを使用していない場合でも、Playwrightの設定部分のみでローカル環境で動作させることが可能です。

Playwrightとは

Playwright は、WebアプリケーションのE2E（エンドツーエンド）テストを自動化するためのツールです。
実際のブラウザ（Chromium・Firefox・WebKit）を操作し、ユーザーの操作を再現することで、画面遷移やフォーム送信などが正しく動作するかを検証できます。

また、要素が表示されるまで自動で待機する仕組みがあり、明示的に待機処理を書くことなくテストを実行できます。

Docker設定

フロントエンドとE2Eテスト用に、それぞれコンテナを用意します。
Playwrightはe2eコンテナ内で実行し、frontendコンテナに対してテストを行います。

docker-compose.yaml.dev

services:
  frontend:
    # 中略
  e2e:
    build:
      context: .
      dockerfile: docker/e2e/Dockerfile
    depends_on:
      - frontend
    volumes:
      - ./frontend/:/app # テストコードをホストと共有

docker/frontend/Dockerfile.dev

FROM node:22-bullseye

# 作業ディレクトリ
WORKDIR /app

# 依存関係だけ先にコピーしてキャッシュを効かせる
COPY frontend/package*.json ./
RUN npm install

# ソースコードをコピー
COPY frontend/ .

# 開発用コマンド
CMD ["npm", "run", "dev"]

docker/e2e/Dockerfile

FROM node:22-bullseye

WORKDIR /app

# 依存関係をインストール
COPY frontend/package*.json ./
RUN npm install

# Playwright用のブラウザと依存ライブラリをインストール
RUN npx playwright install-deps
RUN npx playwright install

# テストコードをコピー
COPY frontend/ .

# コンテナを常駐させる（手動実行のため）
CMD ["sleep", "infinity"]

Playwright設定

1. E2Eのコンテナ内でPlaywrightの初期化。表示される質問はすべてEnterで問題ありません。

   # npm init playwright@latest
   Need to install the following packages:
   create-playwright@1.17.139
   Ok to proceed? (y) y
   
   
   > frontend@0.0.0 npx
   > create-playwright
   
   Getting started with writing end-to-end tests with Playwright:
   Initializing project in '.'
   ✔ Where to put your end-to-end tests? · tests
   ✔ Add a GitHub Actions workflow? (Y/n) · true
   ✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
   
   ✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo npx playwright install-deps')? (y/N) · false
   

   ✔ Success! Created a Playwright Test project at /app
   
   Inside that directory, you can run several commands:
   
     npx playwright test
       Runs the end-to-end tests.
   
     npx playwright test --ui
       Starts the interactive UI mode.
   
     npx playwright test --project=chromium
       Runs the tests only on Desktop Chrome.
   
     npx playwright test example
       Runs the tests in a specific file.
   
     npx playwright test --debug
       Runs the tests in debug mode.
   
     npx playwright codegen
       Auto generate tests with Codegen.
   
   We suggest that you begin by typing:
   
       npx playwright test
   
   And check out the following files:
     - ./tests/example.spec.ts - Example end-to-end test
     - ./playwright.config.ts - Playwright Test configuration
   
   Visit https://playwright.dev/docs/intro for more information. ✨
   
   Happy hacking! 🎭
   

2. テストの実行確認

   npx playwright test
   

3. playwright.config.tsの設定
   Node環境で型定義を有効にするために追加します。

   playwright.config.ts

   /// <reference types="node" /> // 先頭に追加
   

4. package.jsonの設定
   通常のテストとE2Eテストを分けて実行できるようにします。

   package.json

   {
     "scripts": {
       // 中略
       "test": "vitest run",
       "test:watch": "vitest",
       "test:e2e": "playwright test",
       "test:all": "npm run test && npm run test:e2e"
     },
   

5. vite.config.tsの設定
   ユニットテスト（Vitest）の対象ファイルを指定します。

   vite.config.ts

   export default defineConfig({
     // 中略
     test: {
       environment: "jsdom",
       include: ["src/**/*.test.{ts,tsx}"], # 追加
     },
   

6. テストの実行方法
   通常のテスト：

   npm run test
   

   E2Eテスト：

   npm run test:e2e
   

   ※ コマンドはe2eコンテナ内で実行してください。

Docker環境での追加設定（フロント・バックエンド分離構成）

フロントエンドとバックエンドを別リポジトリで管理している場合、コンテナ間通信のために追加設定が必要になります。

1. playwright.config.tsの設定
   Docker環境ではlocalhostではなくコンテナ名でアクセスする必要があるため、frontendを指定します。
   playwright.config.ts

   export default defineConfig({
     /* ... */
     use: {
       /* Base URL to use in actions like `await page.goto('')`. */
       /* コメントアウトを外して、設定すること */
       baseURL: "http://frontend:5173",
   
       /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
       trace: "on-first-retry",
     },
   

2. vite.config.tsの設定
   vite.config.ts

   export default defineConfig({
     server: {
       host: "0.0.0.0",
       port: 5173,
       allowedHosts: true, // 追加
   
       proxy: {
         "/api": {
           target: "http://host.docker.internal:8080",
           changeOrigin: true,
         },
       },
     },
   

まとめ

PlaywrightはDocker上で実行することで、環境差異をなくし、再現性の高いE2Eテストを構築できます。