playwright.yml

name: Playwright tests
on:
  workflow_call:
    inputs:
      update-snapshots:
        type: boolean
        default: false
        description: Whether to update snapshots / screenshots

jobs:
  playwright:
    strategy:
      fail-fast: false
      matrix:
        # to optimize the speed of the screenshot generation, we are using Playwright sharding
        # to split up the tests in smaller chunks and run them in parallel
        # for further details, see: https://playwright.dev/docs/test-sharding
        # more shards can be added below to speed up the executing time if more screenshots are added in the future
        # note: GitHub's limit is 256 parallel (see https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs#using-a-matrix-strategy)
        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
    name: Playwright shard
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: ./.github/templates/node-setup

      # install system dependencies for Playwright
      # see: https://playwright.dev/python/docs/browsers#install-system-dependencies
      - name: 📦 Install Playwright system dependencies
        run: pnpm exec playwright install-deps

      - name: 🔎 Run Playwright tests
        run: pnpm run test:components:all -- --shard=${{ matrix.shard }}/${{ strategy.job-total }} ${{ inputs.update-snapshots == true && '--update-snapshots' || '' }}

      # we only want to include actual changed screenshots in the artifact to prevent that old/unchanged screenshots
      # override changed screenshots from other shards when creating the pull request
      - name: Copy changed files
        if: ${{ inputs.update-snapshots == true }}
        run: |
          mkdir ./changed-screenshots
          rsync -R $(git ls-files --others --modified --exclude-standard) ./changed-screenshots/ || echo "no changed files found"

      - name: Upload screenshots artifact
        uses: actions/upload-artifact@v4
        if: ${{ inputs.update-snapshots == true }}
        with:
          name: screenshots-${{ matrix.shard }}
          path: changed-screenshots
          # prevent warnings if shard does not update any screenshots
          if-no-files-found: ignore

      - name: Upload Reports
        uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: blob-report-${{ matrix.shard }}
          path: |
            ./packages/*/blob-report
            ./apps/*/blob-report
          retention-days: 1

  # this final step is needed to we can set make the Playwright tests a required check in pull requests
  # because we don't want to add each parallel matrix job individually
  # see: https://github.com/orgs/community/discussions/26822#discussioncomment-3305794
  playwright-result:
    if: ${{ always() }}
    runs-on: ubuntu-latest
    name: Collect Playwright result
    needs: playwright
    steps:
      - uses: actions/checkout@v4

      - name: Merge Screenshots
        uses: actions/upload-artifact/merge@v4
        if: ${{ !cancelled() }}
        continue-on-error: true
        with:
          name: screenshots
          pattern: screenshots-*
          delete-merged: true

      - name: Merge Reports
        uses: actions/upload-artifact/merge@v4
        if: ${{ !cancelled() }}
        with:
          name: blob-reports
          pattern: blob-report-*
          retention-days: 1
          delete-merged: true

      - uses: pnpm/action-setup@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: .node-version
          cache: pnpm

      - name: 📦 Install dependencies
        run: pnpm install

      - name: Download blob reports from GitHub Actions Artifacts
        uses: actions/download-artifact@v4
        with:
          name: blob-reports

      # For every blob-report merge its playwright results as html report and move it into its original package
      - name: Merge into HTML Report
        run: find . -type d -name blob-report | xargs -n1 -I {} sh -c 'npx playwright merge-reports --reporter html {} && mv playwright-report {}/../playwright-report'

      # The html report can be manually downloaded and after extraction a static file server can be used to show the results.
      # A file server is necessary, otherwise not all features are supported.
      # E.g. use `python3 -m http.server` or `npx serve` to quick and easily start one.
      - name: Upload HTML report
        uses: actions/upload-artifact@v4
        with:
          name: html-report--attempt-${{ github.run_attempt }}
          path: |
            ./packages/*/playwright-report
            ./apps/*/playwright-report
          retention-days: 14

      - run: |
          result="${{ needs.playwright.result }}"
          if [[ $result == "success" || $result == "skipped" ]]; then
            exit 0
          else
            exit 1
          fi