Playwright,GitHubActions,VercelのPreview環境テストの連携を設定する。(単純な設定・備忘記録)

前回の記事で紹介した。Next.js＋supabaseで構築した米国株チャートアプリの会員機能テストを、CI/CDのパイプライに乗せるべく、GitHub Actionの設定を行いました。
developブランチにpushしたら、テストが走るだけの、非常に単純な例で恐縮ですが、備忘の為に記事にしています。

メイントピック
・GitHub Actions設定
・VercelPreview環境変数設定

公式の案内の通り、
.github/workflows 配下に　playwright-test.yml ファイルを置きます。

Ymlファイルの中身は以下の通りです。

playwright-test.yml

name: Node.js CI

on:
  push:
    branches: [ "develop" ]

jobs:
  build:

    runs-on: ubuntu-latest
    env:
        NEXT_PUBLIC_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
        NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}
        NEXT_PUBLIC_API_ENDOPOINT: ${{secrets.API_ENDOPOINT}}

    strategy:
      matrix:
        node-version: [14.x]
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'

    - run: npm install
    - run: npx playwright install
    - run: npm run test

GitHubの環境変数の設定。

Githubのsecretsに設定しておきます。

Vercelの設定

e2eテストは、developブランチ、VercelのPreviewモードのみe2eテストが動作するようにしています。
Previewモードの時に接続する、supabaseデータベースは本番環境とは別に設定します。(赤枠と黄色枠)

Github Actionのログ画面

無事テストに成功しました！