logo

Github Actions x Playwright をDBと連携してテストするワークフローを作る

2023-04-12
a year ago

開発環境

  • 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
.github/workflows/e2e.yml

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"
  }
}
package.json

特定のブランチへのプッシュが発生した場合にのみワークフローを実行する

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"
}
package.json
{
  "compilerOptions": {
    "module": "commonjs"
  }
}
prisma/package.json

⑥テスト結果を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のページで実際に動作するとことで、テストコードを自動で作成してくれます。

参照