e2e.yml

name: ⚙️ E2E testing
on:
  pull_request:

env:
  RETRY_COUNT: 2

jobs:
  build-demo:
    if: ${{ !contains(github.head_ref , 'release/') }}
    name: Build demo
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4.2.2
        with:
          fetch-depth: 10
      - uses: taiga-family/ci/actions/setup/variables@v1.105.0
      - uses: taiga-family/ci/actions/run/rebase@v1.105.0
        continue-on-error: true
      - uses: taiga-family/ci/actions/setup/node@v1.105.0

      - run: npx nx type-check demo-playwright
      - name: Building demo-app of git-branch without cache
        run: npx nx build demo # Don't use prerender please, because it's flaky for e2e

      - name: Upload cache / ${{ env.CACHE_DIST_KEY }}
        uses: actions/cache/save@v4.2.0
        with:
          path: dist/demo
          key: ${{ env.CACHE_DIST_KEY }}

  cypress:
    runs-on: ubuntu-latest
    name: Cypress / Component Testing
    env:
      CYPRESS_BASELINE_REPO: 'baseline'
      CYPRESS_RESULTS_FOLDER: 'projects/demo-cypress/tests-results'
      CYPRESS_BASELINE_SNAPSHOTS: 'projects/demo-cypress/tests-results/snapshots/baseline'
      CYPRESS_BASELINE_SNAPSHOTS_KEY: 'cy_baseline_${{ github.event.pull_request.head.sha }}'
    steps:
      - uses: actions/checkout@v4.2.2
        with:
          ref: ${{ github.base_ref }}
      - uses: taiga-family/ci/actions/setup/variables@v1.105.0
      - uses: taiga-family/ci/actions/setup/node@v1.105.0

      - name: Run tests for baseline state
        run: npx nx component-test demo-cypress

      - name: Save Cypress Baseline Snapshots
        uses: actions/upload-artifact@v4.5.0
        with:
          path: ${{env.CYPRESS_BASELINE_SNAPSHOTS}}
          name: ${{env.CYPRESS_BASELINE_SNAPSHOTS_KEY}}
          if-no-files-found: ignore
          compression-level: 0
          retention-days: 1

      - uses: actions/checkout@v4.2.2
      - uses: taiga-family/ci/actions/setup/variables@v1.105.0
      - uses: taiga-family/ci/actions/setup/node@v1.105.0

      - name: Download Cypress Baseline Snapshots
        uses: actions/download-artifact@v4.1.8
        with:
          path: ${{env.CYPRESS_BASELINE_SNAPSHOTS}}
          pattern: ${{ env.CYPRESS_BASELINE_SNAPSHOTS_KEY }}
          merge-multiple: true

      - name: Run tests for current state
        run: npx nx component-test demo-cypress

      - name: Prepare diff screenshots
        run: |
          npm install canvas
          npx ts-node ./scripts/visual-testing/combine-cypress-failed-screenshots.ts

      - name: Debug output
        continue-on-error: true
        run: tree ${{ env.CYPRESS_RESULTS_FOLDER }}  -L 1

      - name: Upload artifacts
        uses: actions/upload-artifact@v4.5.0
        with:
          path: '${{ env.CYPRESS_RESULTS_FOLDER }}/**/*.diff.png'
          name: ${{ env.CYPRESS_SNAPSHOTS_ARTIFACTS_KEY }}
          if-no-files-found: ignore
          compression-level: 0
          retention-days: 1

  playwright:
    if: ${{ !contains(github.head_ref , 'release/') }}
    needs: [build-demo]
    strategy:
      fail-fast: false
      matrix:
        shard: [
            # Safari
            {index: 1, os: 'macos-latest', project: 'webkit', total: 9},
            {index: 2, os: 'macos-latest', project: 'webkit', total: 9},
            {index: 3, os: 'macos-latest', project: 'webkit', total: 9},
            {index: 4, os: 'macos-latest', project: 'webkit', total: 9},
            {index: 5, os: 'macos-latest', project: 'webkit', total: 9},
            {index: 6, os: 'macos-latest', project: 'webkit', total: 9},
            {index: 7, os: 'macos-latest', project: 'webkit', total: 9},
            {index: 8, os: 'macos-latest', project: 'webkit', total: 9},
            {index: 9, os: 'macos-latest', project: 'webkit', total: 9},
            # Chrome
            {index: 1, os: 'ubuntu-latest', project: 'chromium', total: 9},
            {index: 2, os: 'ubuntu-latest', project: 'chromium', total: 9},
            {index: 3, os: 'ubuntu-latest', project: 'chromium', total: 9},
            {index: 4, os: 'ubuntu-latest', project: 'chromium', total: 9},
            {index: 5, os: 'ubuntu-latest', project: 'chromium', total: 9},
            {index: 6, os: 'ubuntu-latest', project: 'chromium', total: 9},
            {index: 7, os: 'ubuntu-latest', project: 'chromium', total: 9},
            {index: 8, os: 'ubuntu-latest', project: 'chromium', total: 9},
            {index: 9, os: 'ubuntu-latest', project: 'chromium', total: 9},
          ]
    name: Playwright / ${{ matrix.shard.os }} / ${{ matrix.shard.index }} of ${{ matrix.shard.total }}
    runs-on: ${{ matrix.shard.os }}
    steps:
      - uses: actions/checkout@v4.2.2
      - uses: taiga-family/ci/actions/setup/variables@v1.105.0

      - name: Mac OS X building all dependencies
        if: ${{ contains( matrix.shard.os, 'macos') }}
        run: brew install pkg-config cairo pango libpng jpeg-turbo giflib librsvg --force || echo ''

      - uses: taiga-family/ci/actions/setup/node@v1.105.0

      - name: Get installed Playwright version
        id: playwright-version
        run: |
          echo "PLAYWRIGHT_VERSION=$(node -p 'require("./projects/demo-playwright/package.json").devDependencies["@playwright/test"]')" >> $GITHUB_ENV

      - uses: actions/cache/restore@v4.2.0
        id: playwright-cache
        with:
          path: |
            ~/Library/Caches/ms-playwright
            ~/.cache/ms-playwright
            **/node_modules/playwright
          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
      - run: npx playwright install --with-deps
        if: steps.playwright-cache.outputs.cache-hit != 'true'
      - run: npx playwright install-deps
        if: steps.playwright-cache.outputs.cache-hit != 'true'

      - name: Download cache / ${{ env.CACHE_DIST_KEY }}
        uses: actions/cache/restore@v4.2.0
        with:
          path: dist/demo
          key: ${{ env.CACHE_DIST_KEY }}

      - uses: taiga-family/ci/actions/run/serve@v1.105.0
        with:
          port: ${{ env.NG_SERVER_PORT }}
          directory: ${{ env.DIST }}
          replaceBaseUrl: false

      - name: Run screenshot tests on ${{ env.DIST }}
        run: |
          npx nx e2e demo-playwright -- \
            --update-snapshots \
            --project=${{ matrix.shard.project }} \
            --shard=${{ matrix.shard.index }}/${{ matrix.shard.total }}

      - uses: taiga-family/ci/actions/run/clone@v1.105.0
        with:
          branch: snapshots/demo/next/${{ github.base_ref }}
          destination: ${{ env.DIST_NEXT }}

      - uses: taiga-family/ci/actions/run/serve@v1.105.0
        with:
          port: ${{ env.NG_SERVER_PORT }}
          directory: ${{ env.DIST_NEXT }}
          replaceBaseUrl: false

      - name: Run screenshot tests on ${{ env.DIST_NEXT }}
        continue-on-error: true
        run: |
          npx nx e2e demo-playwright -- \
            --project=${{ matrix.shard.project }} \
            --shard=${{ matrix.shard.index }}/${{ matrix.shard.total }}

      - name: Combine images to get diff reports
        run: |
          npm install canvas --no-save --silent
          npm view canvas version
          npx ts-node ./scripts/visual-testing/combine-playwright-failed-screenshots.ts

      - name: Upload artifacts / ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}
        uses: actions/upload-artifact@v4.5.0
        with:
          path: ./projects/demo-playwright/tests-results/**/*-retry${{ env.RETRY_COUNT }}/**/*.diff.png
          name: ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}_${{ matrix.shard.index }}
          if-no-files-found: ignore
          compression-level: 0
          retention-days: 1

      - name: Upload reports / ${{ env.PLAYWRIGHT_BLOB_ARTIFACTS_KEY }}_${{ matrix.shard.index }}
        uses: actions/upload-artifact@v4.5.0
        with:
          path: ./projects/demo-playwright/blob-report
          name: ${{ env.PLAYWRIGHT_BLOB_ARTIFACTS_KEY }}_${{ matrix.shard.index }}
          compression-level: 0
          retention-days: 1

  # workaround for status checks -- check this one job instead of each individual E2E job in the matrix
  # see https://github.com/orgs/community/discussions/9141#discussioncomment-2296809
  playwright-composite-result:
    name: Playwright E2E Tests matrix result
    if: ${{ always() }}
    needs: [playwright]
    runs-on: ubuntu-latest
    steps:
      - run: |
          result="${{ needs.playwright.result }}"
          # mark as successful even if skipped
          if [[ $result == "success" || $result == "skipped" ]]; then
            exit 0
          else
            exit 1
          fi

  result:
    if: ${{ !contains(github.head_ref , 'release/') }}
    name: E2E result
    needs: [playwright, cypress]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4.2.2
      - uses: taiga-family/ci/actions/setup/variables@v1.105.0
      - uses: taiga-family/ci/actions/setup/node@v1.105.0

      - name: Download artifacts for Playwright
        continue-on-error: true
        uses: actions/download-artifact@v4.1.8
        with:
          path: ./total/playwright
          pattern: playwright-snapshots-artifacts--*
          merge-multiple: true
      - run: ls -R ./total/playwright || echo "not found"

      - name: Download artifacts for Cypress
        continue-on-error: true
        uses: actions/download-artifact@v4.1.8
        with:
          path: ./total/cypress
          pattern: cypress-snapshots-artifacts--*
          merge-multiple: true
      - run: ls -R ./total/cypress || echo "not found"

      - name: Download blob reports for Playwright
        continue-on-error: true
        uses: actions/download-artifact@v4.1.8
        with:
          path: all-blob-reports
          pattern: playwright-blob-artifacts--*
          merge-multiple: true
      - run: ls -R ./all-blob-reports || echo "not found"

      - name: Merge into HTML Report
        run: npx playwright merge-reports --config=projects/demo-playwright/merge.config.ts ./all-blob-reports

      - name: Deploy e2e report
        id: e2e-report
        uses: FirebaseExtended/action-hosting-deploy@v0.9.0
        if: env.IS_OWNER_MODE == 'true'
        continue-on-error: true
        with:
          channelId: pr${{ github.event.number }}-${{ github.head_ref }}-e2e
          firebaseServiceAccount: ${{ secrets.FIREBASE_TAIGA_PREVIEWS_SA }}
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          projectId: taiga-previews
          expires: 1d
          target: taiga-previews-demo-e2e-report
          disableComment: 'true'

      - name: Create report comment
        id: report-summary
        continue-on-error: true
        uses: daun/playwright-report-summary@v3.7.0
        with:
          comment-title: 'Playwright test results'
          report-file: ./all-blob-reports/results.json
          report-url: ${{ steps.e2e-report.outputs.details_url }}

      - name: Check if diff-output exists
        id: diff_checker
        run: |
          echo "diff_exist=$(find ./total -iname '*.diff.png' | wc -l | sed -e 's/^[[:space:]]*//')" >> $GITHUB_OUTPUT

      - name: Fall with an error if diff-output exists
        if: ${{ steps.diff_checker.outputs.diff_exist != '0' }}
        run: |
          find ./total -iname '*.diff.png' -exec echo "{}" \;
          exit 1

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true