VRTを自動化してみた
今回のお話のサイト
VRTを導入したもののローカルで手動実行する運用だったので
PRのたびに実行し忘れることがあり少し手間に感じていました。
せっかくVRTを入れたのでPRを作成したタイミングで自動実行されるようにしたいと思い
GitHub Actionsを導入することにしました。
GitHub Actionsとは
GitHub Actionsはコードのpushやプルリクエストなどをトリガーにして
あらかじめ設定した処理を自動実行してくれるCI/CDツールです。
GitHubに標準で備わっているので
別途サービスの登録が不要なのが嬉しいポイントです。
例えば今回のようにPRを作成したタイミングで
自動でテストを実行するといったことができます。
実装したこと
.github/workflows/vrt.yml を作成して
PR時に以下の流れで自動実行されるようにしました。
- Node.jsのセットアップ
- 依存パッケージのインストール
- Playwrightのブラウザをインストール
- Next.jsをビルド
- 静的ファイルをサーバーで配信
- サーバーの起動を待機
- VRTを実行
- Linux用のベースライン画像を自動コミット
- テスト結果をArtifactsに保存
カラオケ喫茶HPはNext.jsの静的エクスポート構成なので
`next start` ではなく serve を使って静的ファイルを配信しています。
ハマったこと
localhost:3000に接続できなかった
最初はサーバーを起動するステップを追加していなかったので
Playwrightがlocalhost:3000に接続できずエラーになりました。
npm run start & でバックグラウンド起動して
`wait-on` でサーバーの起動を待機するようにして解決しました。
output: exportでnext startが使えなかった
Next.jsの静的エクスポート構成では next start が使えないことがわかりました。
`npx serve` を使って out/ ディレクトリを配信する形に変更しました。
detached HEAD問題
GitHub ActionsでベースラインをコミットしてPushしようとしたところ
detached HEAD状態になっていてPushできませんでした。
git push origin HEAD:${{ github.head_ref }}
でブランチ名を明示的に指定することで解決しました。
Linux用スナップショットがなかった
ローカル（Mac）で撮影したスナップショットはdarwin用で
GitHub Actions（Linux）では別のスナップショットが必要でした。
GitHub Actions上でスナップショットを自動生成して
コミットする仕組みを追加することで解決しました。
pushが拒否された
GitHub ActionsにリポジトリへのWrite権限がなかったため
pushが拒否されていました。
リポジトリの設定で Read and write permissions に変更して解決しました。
やってみて
PRを作成するたびに自動でVRTが実行されるようになったので実行し忘れることがなくなりました。
ハマったことは多かったですが GitHub Actionsの仕組みを理解するいい機会になったと思っています