Jason Laster
PostsNotes

Deploying Playwright reports to Vercel

JS(4mo ago)

The default option for running Playwright tests in Github actions is to generate a playwright report that you can download and view locally.

This is frustrating for two reasons

  1. Downloading a zip and unzippipping takes longer than simply clicking a link.
  2. Viewing traces requires hosting the report with a local server.

There are several paid solutions that will host reports and provide CI analytics, but if you simply want to easily view the report there aren't any documented options.

#Enter Vercel

The obvious solution is to deploy the playwright report to Vercel. Vercel satisfies a couple of requirements

  1. Vercel is super flexible and even supports hosting simple HTML web pages
  2. Vercel supports preview branches which gives you a unique URL for each report

The way I got setup was to first deploy a playwright-report which i had locally.

cd playwright-report
vercel deploy
cd playwright-report
vercel deploy

Deploying the report locally created a new Vercel project which I was able to re-use in the Github workflow. If you already have playwright github action, all you'll need to do is add this step to your workflow.

- name: Deploy playwright report to Vercel
  run: |
    cd playwright-report
    vercel link --project playwright-reports --yes --token=${{ secrets.VERCEL_TOKEN }}
    vercel deploy --yes --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy playwright report to Vercel
  run: |
    cd playwright-report
    vercel link --project playwright-reports --yes --token=${{ secrets.VERCEL_TOKEN }}
    vercel deploy --yes --token=${{ secrets.VERCEL_TOKEN }}

The step uses vercel link to tell Vercel which project I want to deploy to. And then uses vercel deploy to create a new preview branch for the report.

Run cd playwright-report
Vercel CLI 41.4.1
Loading scopes…
Searching for existing projects…
Linked to replayio/playwright-reports (created .vercel and added it to .gitignore)
Vercel CLI 41.4.1
Retrieving project…
Deploying replayio/playwright-reports
Uploading [--------------------] (0.0B/3.8MB)
Uploading [====================] (3.8MB/3.8MB)
Inspect: https://vercel.com/replayio/playwright-reports/AgGyeMXAJufVynTTePQW9DSZpCy6
Preview: https://playwright-reports-ayqc9csnm-replayio.vercel.app [2s]

Run cd playwright-report
Vercel CLI 41.4.1
Loading scopes…
Searching for existing projects…
Linked to replayio/playwright-reports (created .vercel and added it to .gitignore)
Vercel CLI 41.4.1
Retrieving project…
Deploying replayio/playwright-reports
Uploading [--------------------] (0.0B/3.8MB)
Uploading [====================] (3.8MB/3.8MB)
Inspect: https://vercel.com/replayio/playwright-reports/AgGyeMXAJufVynTTePQW9DSZpCy6
Preview: https://playwright-reports-ayqc9csnm-replayio.vercel.app [2s]

#Full Workflow

name: Playwright Tests

on:
  deployment_status:

# Cancel in-progress runs when a new deployment status event is received
concurrency:
  group: ${{ github.workflow }}-${{ github.event.deployment.environment || github.ref }}
  cancel-in-progress: true

# Define Node.js version in one place
env:
  NODE_VERSION: "22.x"
  PNPM_VERSION: 8

jobs:
  test:
    name: "Playwright Tests"
    runs-on: ubuntu-latest
    if: ${{ github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success' }}

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"

      - name: Set up pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 9.4.0

      - name: Install dependencies
        run: pnpm install

      - name: Install Vercel CLI
        run: pnpm install -g vercel@latest

      - name: Install Playwright browsers
        run: pnpm playwright install chromium

      - name: Get Vercel Preview URL
        if: ${{ github.event_name == 'deployment_status' }}
        run: |
          echo "PLAYWRIGHT_TEST_BASE_URL=${{ github.event.deployment_status.target_url }}" >> $GITHUB_ENV
          echo "Testing against Vercel Preview URL: ${{ github.event.deployment_status.target_url }}"

      - name: Run Playwright tests
        run: pnpm test:e2e
        env:
          SUPABASE_TEST_USER_EMAIL: ${{ secrets.SUPABASE_TEST_USER_EMAIL }}
          SUPABASE_TEST_USER_PASSWORD: ${{ secrets.SUPABASE_TEST_USER_PASSWORD }}
          NUT_LOGIN_KEY: ${{ secrets.NUT_LOGIN_KEY }}
          NUT_PASSWORD: ${{ secrets.NUT_PASSWORD }}

      - name: Upload test results
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

      - name: Deploy playwright report to Vercel
        run: |
          cd playwright-report
          vercel link --project playwright-reports --yes --token=${{ secrets.VERCEL_TOKEN }}
          vercel deploy --yes --token=${{ secrets.VERCEL_TOKEN }}
name: Playwright Tests

on:
  deployment_status:

# Cancel in-progress runs when a new deployment status event is received
concurrency:
  group: ${{ github.workflow }}-${{ github.event.deployment.environment || github.ref }}
  cancel-in-progress: true

# Define Node.js version in one place
env:
  NODE_VERSION: "22.x"
  PNPM_VERSION: 8

jobs:
  test:
    name: "Playwright Tests"
    runs-on: ubuntu-latest
    if: ${{ github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success' }}

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"

      - name: Set up pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 9.4.0

      - name: Install dependencies
        run: pnpm install

      - name: Install Vercel CLI
        run: pnpm install -g vercel@latest

      - name: Install Playwright browsers
        run: pnpm playwright install chromium

      - name: Get Vercel Preview URL
        if: ${{ github.event_name == 'deployment_status' }}
        run: |
          echo "PLAYWRIGHT_TEST_BASE_URL=${{ github.event.deployment_status.target_url }}" >> $GITHUB_ENV
          echo "Testing against Vercel Preview URL: ${{ github.event.deployment_status.target_url }}"

      - name: Run Playwright tests
        run: pnpm test:e2e
        env:
          SUPABASE_TEST_USER_EMAIL: ${{ secrets.SUPABASE_TEST_USER_EMAIL }}
          SUPABASE_TEST_USER_PASSWORD: ${{ secrets.SUPABASE_TEST_USER_PASSWORD }}
          NUT_LOGIN_KEY: ${{ secrets.NUT_LOGIN_KEY }}
          NUT_PASSWORD: ${{ secrets.NUT_PASSWORD }}

      - name: Upload test results
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

      - name: Deploy playwright report to Vercel
        run: |
          cd playwright-report
          vercel link --project playwright-reports --yes --token=${{ secrets.VERCEL_TOKEN }}
          vercel deploy --yes --token=${{ secrets.VERCEL_TOKEN }}