🧪

playwrightのテストをvercel preview urlに対して行う方法

2023/09/13に公開

Vercel

TL;DR

このactionを使ってvercelのpreview urlを取得し、取得したpreview urlに対してplaywrightのテストをgithub actionsのserver上から行う流れとなっております。

.github/workflows/playwright.yml

name: Playwright Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - name: Waiting for 200 from the Vercel Preview
        uses: patrickedqvist/wait-for-vercel-preview@v1.3.1
        id: waitFor200
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          max_timeout: 60
      # access preview url
      - run: echo ${{steps.waitFor200.outputs.url}}
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npm run test:e2e:trace
        env:
          BASE_URL: ${{steps.waitFor200.outputs.url}}
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

mainに対してpull requestを出した段階でplaywrightで定義したE2Eテストが走るのでより早い段階でバグの発見をすることができ修正コストを下げることができます!

バグの発見が遅れるほどコストがかかるそうです。

こちらのスライドもぜひ見てください!

テストの際の考えとしてはカバレッジよりユーザーが実際に操作することをテストすることを重視しています!

ではまた明日!

TL;DR

Discussion