GitHub Actions × PlaywrightでE2Eテストを自動化する方法｜CI/CD設定をゼロから解説

GitHub ActionsとPlaywrightを組み合わせることで、コードをプッシュするたびにE2Eテストが自動実行されるCI/CDパイプラインを、追加費用なしで構築できます。

ローカルでテストが通っても、チームの誰かがプッシュしたコードで壊れてしまうことはよくあります。CI/CDにE2Eテストを組み込むことで「誰がプッシュしても自動でテストが走り、失敗したら通知が来る」という仕組みを作れます。この記事ではGitHub Actions × Playwright × pytestの構成で、実際に動くCI/CDパイプラインをゼロから構築する手順を解説します。

CI/CDとGitHub Actionsの基本

CI（継続的インテグレーション）とは、コードのプッシュやPRをトリガーに、自動でビルド・テストを実行する仕組みです。GitHub ActionsはGitHubに組み込まれたCI/CDサービスで、リポジトリに .github/workflows/ フォルダを作ってYAMLファイルを置くだけで動きます。

① プロジェクト構成

今回使用するプロジェクトの構成です。

my_project/
├── .github/
│   └── workflows/
│       └── playwright.yml    # GitHub Actions設定ファイル
├── tests/
│   ├── conftest.py
│   └── test_saucedemo.py     # Playwrightテスト
├── requirements.txt          # 依存パッケージ一覧
└── pytest.ini                # pytest設定

② requirements.txt の準備

CI環境でインストールするパッケージを requirements.txt にまとめます。

pytest
pytest-playwright
pytest-html
playwright

③ テストコードの確認

CI上で実行するPlaywrightテストのサンプルです。SauceDemoのログインをテストします。

# tests/test_saucedemo.py
from playwright.sync_api import Page

def test_ログイン_正常系(page: Page):
    page.goto("https://www.saucedemo.com/")
    page.fill("#user-name", "standard_user")
    page.fill("#password", "secret_sauce")
    page.click("#login-button")
    assert page.url.endswith("/inventory.html")

def test_ログイン_パスワード誤り(page: Page):
    page.goto("https://www.saucedemo.com/")
    page.fill("#user-name", "standard_user")
    page.fill("#password", "wrong_password")
    page.click("#login-button")
    error_msg = page.locator(".error-message-container").text_content()
    assert "Epic sadface" in error_msg

# pytest.ini
[pytest]
testpaths = tests
addopts = -v --tb=short --html=reports/report.html --self-contained-html

④ GitHub Actions YAMLファイルの作成（メイン）

これが今回の核心です。.github/workflows/playwright.yml を作成します。

# .github/workflows/playwright.yml

name: Playwright E2E Tests

# ① トリガー設定：mainへのpush・PRで自動実行
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    # ② 実行環境：Ubuntu最新版
    runs-on: ubuntu-latest

    steps:
      # ③ リポジトリのコードをチェックアウト
      - name: リポジトリをチェックアウト
        uses: actions/checkout@v4

      # ④ Pythonのセットアップ
      - name: Python 3.11 をセットアップ
        uses: actions/setup-python@v5
        with:
          python-version: "3.11"

      # ⑤ 依存パッケージのインストール
      - name: 依存パッケージをインストール
        run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt

      # ⑥ Playwrightブラウザのインストール
      - name: Playwrightブラウザをインストール
        run: playwright install chromium --with-deps

      # ⑦ reportsフォルダを作成（ないとアーティファクト保存が失敗する）
      - name: reportsフォルダを作成
        run: mkdir -p reports

      # ⑧ テスト実行
      - name: E2Eテストを実行
        run: pytest

      # ⑨ テスト結果レポートをアーティファクトとして保存
      - name: レポートをアップロード
        uses: actions/upload-artifact@v4
        if: always()    # テスト失敗時も必ず実行
        with:
          name: playwright-report
          path: reports/
          retention-days: 30

各ステップの意味をまとめます：

⑤ 実行結果の確認方法

YAMLファイルをGitHubにプッシュすると、自動的にワークフローが起動します。確認手順は以下のとおりです。

実行ログのサンプル

Run pytest
========================= test session starts ==========================
platform linux -- Python 3.11.0, pytest-7.4.0
collected 2 items

tests/test_saucedemo.py::test_ログイン_正常系      PASSED  [ 50%]
tests/test_saucedemo.py::test_ログイン_パスワード誤り  PASSED  [100%]

========================== 2 passed in 8.43s ===========================

⑥ 応用：スケジュール実行・複数ブラウザ対応

毎日深夜に自動実行する

プッシュ時だけでなく、定期的にテストを実行したい場合は schedule を追加します。

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  schedule:
    - cron: "0 0 * * *"   # 毎日UTC 0:00（日本時間 9:00）に実行

複数ブラウザで並列テスト

strategy: matrix を使うとChromium・Firefox・WebKitの3ブラウザでテストを並列実行できます。

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]

    steps:
      # ... 前のステップと同じ ...

      - name: Playwrightブラウザをインストール
        run: playwright install ${{ matrix.browser }} --with-deps

      - name: E2Eテストを実行（${{ matrix.browser }}）
        run: pytest --browser ${{ matrix.browser }}

      - name: レポートをアップロード
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: report-${{ matrix.browser }}
          path: reports/

FAQ

⚠️ GitHub Actions × Playwrightでよくあるはまりポイント8選

CI環境特有のトラブルが多いのがGitHub Actions × Playwrightの組み合わせです。ローカルで動いたのにCIで失敗する……という経験をしないために、事前に把握しておきましょう。

# キャッシュを有効にする場合（requirements.txtのハッシュが変わると自動で更新される）
- uses: actions/setup-python@v5
  with:
    python-version: "3.11"
    cache: "pip"          # requirements.txt が変わると自動でキャッシュを破棄

# キャッシュを無効にしてクリーンインストールする場合
- uses: actions/setup-python@v5
  with:
    python-version: "3.11"
    # cache を書かなければキャッシュなし（毎回クリーンインストール）

📋 この記事のまとめ

CI/CDにE2Eテストを組み込むと「誰がプッシュしても品質が担保される」状態になります。最初はChromiumのみ・mainブランチのみのシンプルな構成から始めて、慣れてきたらスケジュール実行や複数ブラウザ対応に拡張していきましょう。