🔧

GithubActions上のPlaywright実行を高速化

に公開
GitHub Actions
CI
Playwright
tech

TL;DR

GitHub ActionsでPlaywrightテストを実行する際、Dockerイメージを活用することで、2回目以降の実行時間を大幅に短縮できます。

実際のワークフローがこちら。

name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.49.0-jammy
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: failure()
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

きっかけ：初回ブラウザインストールに時間がかかる

以前の記事でPlaywrightのCI環境を構築しましたが、毎回ブラウザをインストールするため3分程度かかっていました。

# 従来の方法
- name: Install Playwright Browsers
  run: npx playwright install --with-deps  # 毎回3分かかる

解決策：Playwright公式Dockerイメージの活用

container:
  image: mcr.microsoft.com/playwright:v1.49.0-jammy

ポイント

  • ブラウザと依存関係が事前にインストール済み
  • npx playwright install --with-depsのステップが不要に
  • GitHub Actionsがイメージをキャッシュするため2回目以降は高速

その他の変更

Nodeバージョン指定

- uses: actions/setup-node@v4
  with:
    node-version: lts/*

LTSバージョンを使用。

アーティファクトアップロードの最適化

- uses: actions/upload-artifact@v4
  if: failure()  # 失敗時のみ

従来のif: always()からif: failure()に変更。成功時はレポート不要なため。

実行時間の改善結果

項目 変更前 変更後
2回目以降 約3分 約30秒-1分

2回目(変更後)

変更点まとめ

  jobs:
    test:
      timeout-minutes: 60
      runs-on: ubuntu-latest
+     container:
+       image: mcr.microsoft.com/playwright:v1.49.0-jammy
      steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: Install dependencies
        run: npm ci
-     - name: Install Playwright Browsers
-       run: npx playwright install --with-deps
      - name: Run Playwright tests
-       run: npm run test
+       run: npx playwright test
      - uses: actions/upload-artifact@v4
-       if: always()
+       if: failure()

注意点

Dockerイメージのバージョン管理

image: mcr.microsoft.com/playwright:v1.49.0-jammy
  • バージョンを明示的に指定（latestは避ける）
  • package.jsonの@playwright/testバージョンと一致させる
  • アップデート時は両方を同時に更新

Node.jsバージョンの指定

  • LTSバージョンを指定（node-version: lts/*）

まとめ

Playwright公式Dockerイメージを使用することで、Playwright CIの実行時間を大幅に短縮できました。

主な変更点：

  1. Dockerイメージ指定で事前インストール済みブラウザを利用
  2. ブラウザインストールステップの削除

特に2回目以降の実行が高速化されるため、継続的なテスト実行に効果的です。

サンプルコード: playwright-github-actions-ci-cache

Discussion