Docker x Django x Selenium でE2Eテスト環境を構築する方法（ARM版対応）

  # docker-compose.ymlの例
services:
  db:
    image: postgres
    platform: linux/amd64
    volumes:
      - db-data:/var/lib/postgresql/data
    ports:
      ...
  web:
    ...
    environment:
      - DJANGO_SETTINGS_MODULE=config.settings.local  # ローカル環境用設定
   ...
  
volumes:
  db-data:

# docker-compose.test.yml
services:
  db:
    volumes:
      - db-data-test:/var/lib/postgresql/data  #  【重要】開発環境と別のボリューム名を使用
  web:
    environment:
      - DJANGO_SETTINGS_MODULE=config.settings.test

  # Selenium サーバーを起動するコンテナ
  selenium:
    # image は、以下のいずれかを選択する。
    image: seleniarm/standalone-chromium  # M1 Mac など ARM用のイメージ
    # image: selenium/standalone-chrome  # intelチップなど

    environment:
      - VNC_NO_PASSWORD=1  # パスワード入力なし

    ports:
      - "4444:4444"  # Selenium WebDriver接続用
      - "5900:5900"  # VNC で接続するポート
      - "7900:7900"  # ブラウザで確認を行うためのポート

    # コンテナが使用するメモリの上限
    shm_size: "2gb"

volumes:
  db-data-test:  # 【重要】開発環境と別のボリューム名を使用

config
└── settings
  ├── __init__.py
  ├── base.py        # 共通設定
  ├── local.py       # 開発環境用
  ├── production.py  # 本番環境用
  └── test.py        # テスト用（このセクションで作成）

DATABASES = {
    "default": {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'django_test',  # ✅️ テスト用のDBは開発用と分ける
        'USER': <任意の値>,
        'PASSWORD':  <任意の値>,
        'HOST':  <任意の値>,
        'PORT':  <任意の値>,
    }
}

# core/tests/e2e.py
from django.contrib.staticfiles.testing import StaticLiveServerTestCase
from selenium import webdriver
from selenium.webdriver.common.by import By


class BaseStaticLiveServerTestCase(StaticLiveServerTestCase):
    """
    Selenium を用いた E2E テストで使用するクラス。

    Attributes:
        driver (selenium.webdriver): テスト用のブラウザドライバ。
    """
    host = 'web'  # ✅️ Djangoアプリのコンテナ名

    # fixturesの設定は任意
    fixtures = ['accounts/fixtures/socialapp.json']  # 外部認証サービスを使用した例

    @classmethod
    def setUpClass(cls):
        super().setUpClass()  # super() は最初に記述
        cls.driver = webdriver.Remote(
            command_executor='http://selenium:4444/wd/hub',
            options=webdriver.ChromeOptions()
        )
        cls.driver.implicitly_wait(10)  # 読み込みの待機時間

    @classmethod
    def tearDownClass(cls):
        cls.driver.quit()
        super().tearDownClass()  # super() は最後に記述

# コンテナの停止
$ docker compose stop

# イメージのビルド
$ docker compose up --build

# コンテナの停止
$ docker compose stop

# テスト用dbコンテナの起動
$ docker compose -f docker-compose.yml -f docker-compose.test.yml up -d --wait db

# dbコンテナに入りテスト用データベースを作成
$ docker compose exec db
$ psql -U postgres  # USER が postgresの場合の例
$ create database django_test;  # django_test という名前のデータベースを新規作成

base_url = self.live_server_url
self.driver.get(f'{base_url}/accounts/login/')

# コンテナの停止・削除
$ docker compose down --remove-orphans

services:
  db:
    ...

  # Selenium サーバーを起動するコンテナ
  selenium:
    ...
    environment:
      ...
      # スクリーン設定
      - SCREEN_WIDTH=1600  # スクリーン幅
      - SCREEN_HEIGHT=1200  # スクリーン高さ
      # - SCREEN_DEPTH=24  # カラービット深度  # 基本的に変更する必要はない
    ...

# core/tests/e2e.py
class BaseStaticLiveServerTestCase(StaticLiveServerTestCase):
    ...
    @classmethod
    def setUpClass(cls):
        super().setUpClass()  # super() は最初に記述
        cls.driver = webdriver.Remote(
            command_executor='http://selenium:4444/wd/hub',
            options=webdriver.ChromeOptions()
        )
        cls.driver.implicitly_wait(10)  # 読み込みの待機時間

        # ウィンドウサイズ設定
        cls.driver.maximize_window()  # スクリーン内で最大化する場合
        # cls.driver.set_window_size(1280, 1024)  # 任意のサイズで表示する場合（例: 1280 x 1024px）

# コンテナの停止
$ docker compose stop

# コンテナの再起動
$ docker compose -f docker-compose.yml -f docker-compose.test.yml up -d

.PHONY: help init-test-db up-test test up down

help:
	@echo "make コマンドリスト:"
	@echo "  make init-test-db   # 初期化 & テストDB作成"
	@echo "  make up-test        # テスト用コンテナ起動"
	@echo "  make test           # 全体テスト"
	@echo "  make up             # 開発用コンテナ起動"
	@echo "  make down           # コンテナ停止・削除"

init-test-db:
	docker compose stop &&\
	docker compose -f docker-compose.yml -f docker-compose.test.yml up -d --wait db &&\
	docker compose exec db psql -U postgres -c "create database django_test;" &&\
	docker compose stop

up-test:
	docker compose stop &&\
	docker compose -f docker-compose.yml -f docker-compose.test.yml up -d

test:
	docker compose exec web python manage.py test

up:
	docker compose up -d

down:
	docker compose down --remove-orphans

# ヘルプの表示
$ make help

# データベースの初期化
$ make init-test-db

# テスト用コンテナの起動
$ make up-test
...