Github Actions x Playwright をDBと連携してテストするワークフローを作る
開発環境
- next 13.2.4
- @playwright/test 1.32.1
- prisma 4.8.0
- PostgresDB
前提
説明すること
- ワークフローに関連すること
説明しないこと
- PlayWrigthのテストの書き方
- 環境構築
本題
E2Eテストフレームワークの中でよく聞くPlaywright。
Cypressと比較されることが多いです。
ダウンロードユーザー数ではCypressの方が多い(2023年4月時点)ですが、スター数を見るとPlaywrightの方が多く、注目されているのがうかがえます。
この2つのライブラリの比較についてはいろいろな記事でまとめられているので、この記事では割愛します。
今回は私自身初めて触るということもあり、最低限動作するワークフローを作ってみます。
①、②・・と番号をふっているところを後ほど説明していきます。
完成形はこちら↓
name: E2E Test
run-name: ${{ github.actor }} is testing out GitHub Actions 🚀
# ①
on:
push:
branches-ignore:
- main
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
# ②
env:
DATABASE_URL: ${{ secrets.DATABASE_URL }}
# ③
services:
db:
image: postgres:latest
env:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: example
POSTGRES_DB: mydb
ports:
- 5432:5432
steps:
- name: checkout
uses: actions/checkout@v3
- name: setup-node
uses: actions/setup-node@v3
with:
node-version: '18.15.0'
# ④
- name: cache-node-modules
uses: actions/cache@v3
id: node_modules_cache_id
# ②'
env:
cache-name: cache-node-modules
with:
path: '**/node_modules'
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
- name: yarn-install
if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
run: yarn install
- name: playwright-install
run: npx playwright install --with-deps
- name: migrate
run: npx prisma migrate dev
# ⑤
- name: db-seed
run: npx prisma db seed
- name: yarn-test
run: yarn test
- name: yarn-build
run: yarn build
# ⑥
- name: upload-artifact
uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
package.jsonのスクリプトはこちら↓
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next build && next start",
"lint": "next lint",
"test": "playwright test"
},
"prisma": {
"seed": "ts-node --project prisma/tsconfig.seed.json prisma/seed/seed.ts"
}
}
①特定のブランチへのプッシュが発生した場合にのみワークフローを実行する
GithubActionsではさまざまなイベントをトリガーにしてワークフローを実行することができます。
今回は個人開発で作ったので、branches-ignoreフィルターでmainブランチのpush以外で実行するようにしています。
②env
ワークフロー中のすべてのジョブのステップで使うことができる変数を設定することができます。
また、# ②'で設定しているように、各ステップごとに設定することも可能です。
もし、同じ変数名をjobs直下、step直下に設定した場合はstep直下のenvの値が参照されることになります。
secretsに関してはこちらを参照してください。
③PostgreSQL サービス コンテナの作成
サービスを定義してDockerコンテナを作成することができます。
今回はテスト用のDBを用意してテストを行いたかったので、PostgresSQLを利用しました。
各ステップでDBを参照することができます。
また、ワークフロージョブの実行が終了するとこのコンテナを自動で破棄してくれます。
④依存関係をキャッシュしてワークフローのスピードを上げる
GitHub Actionsにはワークフローの依存関係をキャッシする機能があります。
こちらを利用することでワークフローの実行時間の短縮ができます。
今回の設定では、yarn.lockに変更がなければキャッシュを利用するようにしています。
⑤DBにテスト用のデータを流し込む
サービスで作成したPostgresSQLにテストで利用するデータをシーディングします。
Nextjsをフルスタックで利用している場合はseed実行用のpackage.jsonを作り、そのpackage.jsonを利用するようにするなど、対応が必要です。
"prisma": {
"seed": "ts-node --project prisma/tsconfig.seed.json prisma/seed/seed.ts"
}
{
"compilerOptions": {
"module": "commonjs"
}
}
⑥テスト結果をArtifactsにアップロードする
Github Actions上で行ったテストを自動でアップロードしてActionsタブのGUI上でダウンロードすることができます。
今回毎回アップロードするようにしていますが、テストが失敗した時だけにしたい場合は以下のように書き換えます。
- name: upload-artifact
uses: actions/upload-artifact@v3
- if: always()
+ if: failure()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
ファイルの保存期間についてもカスタマイズできるので公式ドキュメントを参照してみてください。その他にもたくさん設定できます。
また、今回はテストレポートのアップロード用途で利用しましたが、本番環境へのビルドファイルのアップロードに利用することもあります。
さいごに
ワークフローの説明を中心にPlaywrightを組み込むサンプルを作成しました。
少しはまりどころが多かったので、まず動く環境を作ってみよう!と考えている方の参考になると嬉しいです。
おまけ
PlaywrightにはTest generatorという機能があります。
この機能では指定したURLのページで実際に動作するとことで、テストコードを自動で作成してくれます。