chore(WD-29163): Optimize Playwright CI workflow (#263)

Author: muhammad-ali-pk

.github/workflows/playwright.yml

@@ -6,11 +6,63 @@ on:
   pull_request:
     branches:
       - main
-      - playwright-tests
 jobs:
-  run-playwright:
+  setup-and-build:
     timeout-minutes: 15
     runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js with Caching
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: "yarn"
+
+      - name: Install node dependencies
+        # This will be fast on subsequent runs due to caching
+        run: yarn --frozen-lockfile
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Create and Switch to Buildx Builder
+        run: |
+          docker buildx create --use --name mybuilder
+      - name: Log in to GitHub Container Registry
+        # You need to log in because the cache needs to be written to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build image and save as artifact (using ghcr for layered caching)
+        # Build the application image once
+        run: |
+          CACHE_TAG=ghcr.io/${{ github.repository }}/playwright-cache:latest
+          DOCKER_BUILDKIT=1 docker buildx build \
+            --output type=docker,name=websites-content-system:latest,dest=app-image.tar \
+            --cache-from type=registry,ref=$CACHE_TAG \
+            --cache-to type=registry,ref=$CACHE_TAG,mode=max \
+            .
+
+      - name: Upload application image artifact
+        # The artifact is downloaded and loaded by the test jobs
+        uses: actions/upload-artifact@v4
+        with:
+          name: app-image
+          path: app-image.tar
+          retention-days: 1
+  run-playwright:
+    needs: [setup-and-build]
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
     services:
       redis:
         image: redis
@@ -35,10 +87,21 @@ jobs:
           --health-start-period 80s
     steps:
       - uses: actions/checkout@v4
-      - name: Install node dependencies
-        run: yarn
-      - name: Build image
-        run: DOCKER_BUILDKIT=1 docker build --tag websites-content-system .
+      - name: Download application image artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: app-image
+          path: /tmp/
+
+      - name: Load application image
+        run: docker load -i /tmp/app-image.tar
+      - name: Set up Node.js with Cache restore
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: "yarn"
+      - name: Restore and Prepare Dependencies
+        run: yarn --frozen-lockfile
       - name: Run image
         env:
           DISABLE_SSO: True
@@ -80,16 +143,51 @@ jobs:
           --network host \
           websites-content-system & sleep 3
           curl --head --fail --retry-delay 1 --retry 50 --retry-connrefused http://localhost
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+
+      - name: Run playwright image
+        run: docker run -d --add-host=hostmachine:host-gateway -p 3000:3000 --init --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.50.1-noble /bin/sh -c "npx -y [email protected] run-server --port 3000 --host 0.0.0.0" & sleep 60
       - name: Run Playwright tests
         env:
           JIRA_REPORTER_ID: ${{ secrets.JIRA_REPORTER_ID }}
         run: |
-          JIRA_REPORTER_ID="$JIRA_REPORTER_ID" yarn playwright test
-      - uses: actions/upload-artifact@v4
-        if: always()
+          PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:3000/ JIRA_REPORTER_ID="$JIRA_REPORTER_ID" BASE_URL=http://hostmachine PORT=80 yarn playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
+
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 1
+
+  merge-reports:
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() }}
+    needs: [run-playwright]
+
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: "yarn"
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
         with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14

package.json

@@ -88,4 +88,4 @@
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.52.4"
   }
-}
+}

tests/config.ts

@@ -1,5 +1,5 @@
 export const config = {
-  BASE_URL: `http://localhost`,
+  BASE_URL: process.env.BASE_URL || `http://localhost:${process.env.PORT}`,
   PLAYWRIGHT_TEST_PAGE_URL: "playwright-test-page",
   SAMPLE_COPYDOC_URL: "https://docs.google.com/document/d/1EPA_Ea8ShIvyftAc9oVxZYUIMHfAPFF6S5x6FOvLkwM",
 };

tests/project.spec.ts

@@ -9,7 +9,7 @@ let apiContext: APIRequestContext;
 test.describe("Test project actions", () => {
   test.beforeAll(async ({ playwright }) => {
     apiContext = await playwright.request.newContext({
-      baseURL: `${config.BASE_URL}`,
+      baseURL: `http://localhost:${process.env.PORT}`,
     });
   });