はじめに
GitHub ActionsでPlaywrightをつかったテストを実行する際、ブラウザバイナリを毎回ダウンロードするのはわすかですが時間がかかります。
私の環境だとブラウザバイナリのインストールに数分かかっており、CIにかかる時間を短くしたくて調べたので、PlaywrightのブラウザバイナリをGitHub Actionsでキャッシュする方法を紹介します。
キャッシュの仕方
PlaywrightのドキュメントにCIでのキャッシュの方法が書かれています。
（ただ、ドキュメントに記載されている通り、キャッシュは推奨されていません）
Continuous Integration | Playwright
Caching browsers
Caching browser binaries is not recommended, since the amount of time it takes to restore the cache is comparable to the time it takes to download the binaries. Especially under Linux, operating system dependencies need to be installed, which are not cacheable.
If you still want to cache the browser binaries between CI runs, cache these directories in your CI configuration, against a hash of the Playwright version.
以下を満たすようにキャッシュを設定すると良いことがわかります。
- Playwrightのバージョンのハッシュをキャッシュキーにする
-
PLAYWRIGHT_BROWSERS_PATH環境変数を設定して、ブラウザバイナリのディレクトリを指定し、キャッシュする
GitHub Actionsのワークフローの例
上記を満たすようなキャッシュの設定をGitHub Actionsでしたので、例として紹介します。
Playwrightのセットアップをするカスタムアクション
playwright install --with-depsコマンドを実行する際に、PLAYWRIGHT_BROWSERS_PATH環境変数を使い、ブラウザバイナリをインストールするディレクトリを指定しています。
指定したディレクトリを、キャッシュキーにPlaywrightのバージョンを含めるようにしてキャッシュするようにしています。
.github/actions/setup-playwright/action.yml
name: Setup Playwright
description: Setup Playwright
inputs:
playwright-browsers-path:
description: playwright browsers path
required: true
node-version:
description: node version
required: true
runs:
using: composite
steps:
# Playwrightのバージョンを取得する
- run: echo "PLAYWRIGHT_VERSION=$(node -e 'console.log(require("playwright/package.json").version)')" >> "${GITHUB_ENV}"
shell: bash
# Playwrightのブラウザバイナリをキャッシュする
- uses: actions/cache@v4
id: cache-playwright-browsers
with:
path: ${{ inputs.playwright-browsers-path }}
key: ${{ runner.os }}-${{ inputs.node-version }}-playwright-${{ env.PLAYWRIGHT_VERSION }}-${{ hashFiles('yarn.lock') }}
restore-keys: |
${{ runner.os }}-${{ inputs.node-version }}-playwright-${{ env.PLAYWRIGHT_VERSION }}-
# キャッシュがない場合、Playwrightのブラウザバイナリをインストールする
- run: yarn exec -- playwright install --with-deps
if: ${{ steps.cache-playwright-browsers.outputs.cache-hit != 'true' }}
shell: bash
env:
PLAYWRIGHT_BROWSERS_PATH: ${{ inputs.playwright-browsers-path }}
E2Eテストを実行するワークフロー
用意したカスタムアクションを使い、Playwrightのセットアップをするようにしています。
そして、playwright testを実行する際に、キャッシュされたブラウザバイナリを使用するようにPLAYWRIGHT_BROWSERS_PATH環境変数を設定しています。
.github/workflows/e2e.yml
name: E2E
# 略
jobs:
e2e:
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
# 略
# Playwrightのブラウザバイナリを配置するディレクトリを環境変数に設定
- run: echo "PLAYWRIGHT_BROWSERS_PATH=${HOME}/pw-browsers" >> "${GITHUB_ENV}"
# Playwrightのセットアップ
- uses: ./.github/actions/setup-playwright
with:
playwright-browsers-path: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
node-version: ${{ steps.setup-node.outputs.node-version }}
# E2Eテストの実行
- run: yarn exec -- playwright test
env:
PLAYWRIGHT_BROWSERS_PATH: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
# 略
さいごに
PlaywrightのブラウザバイナリをGitHub Actionsでキャッシュする方法を紹介しました。
また、私自身で検証は出来ていませんが、今回紹介した方法以外にPlaywrightのコンテナイメージを使う方法もあるようです。
とりあえず、数分かかっていたブラウザバイナリのインストールが、キャッシュを使うことで数秒に短縮されたので良かったです。
Views: 0
