GitHub ActionsとPlaywrightのセットアップ

流れ

e2e.yml

- name: Install dependencies
  run: npm ci

- name: Build
  run: npm run build

- name: Store Playwright's Version
  run: |
    PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
    echo "Playwright's Version: $PLAYWRIGHT_VERSION"
    echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV

- name: Cache Playwright Browsers for Playwright's Version
  id: cache-playwright-browsers
  uses: actions/cache@v3
  with:
    path: ~/.cache/ms-playwright
    key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}

- name: Install Playwright Browsers
  if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
  run: npx playwright install --with-deps

- name: Run Playwright tests
  run: npx playwright test

CI のイメージについて

runs-on: ubuntu-latestで良い。 chromium もセットになったイメージなどもあるが、playwright cliでブラウザはあとからインストールするのが推奨されているみたい。

playwright のキャッシュ

ヘッドレスブラウザがかなりおおきいのでキャッシュする。

GitHub 特有のレポーター

テストに失敗したとき、その箇所をファイルで教えてくれる。github 特有 reporter: process.env.CI ? 'github' : 'list',

GitHub Actions の env まわり

settings > environments を作成

yml 側で environment を指定して、 process.env.AAAするときに

e2e.yml

jobs:
  test:
    runs-on: ubuntu-latest
    environment: e2e

    steps:
      - name: Run Playwright tests
        run: npx playwright test
        env:
          AWS_PROJECT_REGION: ${{ secrets.AWS_API }}
          AWS_APPSYNC_GRAPHQL_ENDPOINT: ${{ secrets.AWS_API_KEY }}

その他の記事

公開日 2023/05/17

Thanks you for reading.