[Issue #10502] Cache Playwright and use cached one in Staging and CI/CD E2Es

.github/actions/cache-npm-and-playwright/action.yml

@@ -0,0 +1,74 @@
+name: Install and cache npm and Playwright
+description: Composite action to install and cache Playwright
+
+runs:
+  using: "composite"
+
+  steps:
+    - name: Checkout repository
+      uses: actions/checkout@v6
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v6
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: ${{ env.PACKAGE_MANAGER }}
+        cache-dependency-path: ${{ env.LOCKFILE_PATH }}
+
+    - uses: actions/cache@v5
+      id: playwright-cache
+      with:
+        # if cache is missing randomly so instead of being able to just trust the cache existing, we have to download here and push it to an artifact for the next job, by commenting the lookup-only out
+        # lookup-only: true
+        path: |
+          ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+
+    - uses: actions/cache@v5
+      id: npm-cache
+      with:
+        # if cache is missing randomly so instead of being able to just trust the cache existing, we have to download here and push it to an artifact for the next job, by commenting the lookup-only out
+        # lookup-only: true
+        path: |
+          frontend/node_modules
+        key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+
+    - id: install-npm-packages
+      if: steps.npm-cache.outputs.cache-hit != 'true'
+      shell: bash
+      run: |
+        npm ci
+
+    # 2 of the 4 shards need chrome, so cache that, install the others as needed
+    - run: npx playwright install --with-deps chrome
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      shell: bash
+    #- run: npx playwright install-deps
+    #  if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+    # We package ourselves as tar.gz because this preserves permissions that a regular artifact upload/download does not.
+    - name: Package node_modules
+      shell: bash
+      run: |
+        tar -czf /tmp/node_modules.tar.gz ./node_modules/
+        ls /tmp
+
+    - name: Upload node_modules artifact
+      uses: actions/upload-artifact@v7
+      with:
+        archive: false
+        path: /tmp/node_modules.tar.gz
+
+    # We package ourselves as tar.gz because this preserves permissions that a regular artifact upload/download does not.
+    - name: Package Playwright artifact
+      shell: bash
+      run: |
+        cd ~/.cache/ms-playwright
+        tar -czf /tmp/playwright.tar.gz .
+        ls /tmp
+
+    - name: Upload Playwright artifact
+      uses: actions/upload-artifact@v7
+      with:
+        archive: false
+        path: /tmp/playwright.tar.gz

.github/actions/e2e/action.yml

@@ -44,8 +44,14 @@ inputs:
   workers:
     description: "number of workers to use for test run"
     default: ""
-  force-webkit-install:
-    description: "webkit dependencies aren't all cached, so we need to force it to install"
+  do-chrome-install:
+    description: "install chrome for playwright"
+    default: "false"
+  do-firefox-install:
+    description: "install firefox for playwright"
+    default: "false"
+  do-webkit-install:
+    description: "install webkit for playwright"
     default: "false"
   staging_test_user_api_key:
     description: "test user API key used in spoofing staging user logins"
@@ -83,17 +89,30 @@ runs:
         cache: ${{ inputs.package_manager }}
         cache-dependency-path: ${{ inputs.lockfile_path }}
 
-    - name: Install Node dependencies & Playwright
+    - name: Install Playwright
       if: ${{ inputs.needs_node_setup == 'true' }}
       shell: bash
       working-directory: ./frontend
       run: |
         npm install @playwright/test
-        npx playwright install --with-deps
+
+    - name: Install Firefox and dependencies
+      if: ${{ inputs.do-firefox-install == 'true' }}
+      shell: bash
+      working-directory: ./frontend
+      run: |
+        npx playwright install --with-deps firefox
+
+    - name: Install Chrome and dependencies
+      if: ${{ inputs.do-chrome-install == 'true' }}
+      shell: bash
+      working-directory: ./frontend
+      run: |
+        npx playwright install --with-deps chrome
 
     # this should only be needed on shard 3, the WebKit shard
-    - name: Install Webkit dependencies
-      if: ${{ inputs.force-webkit-install == 'true' }}
+    - name: Install Webkit and dependencies
+      if: ${{ inputs.do-webkit-install == 'true' }}
       shell: bash
       working-directory: ./frontend
       run: |

.github/workflows/ci-frontend-e2e.yml

@@ -111,70 +111,13 @@ jobs:
   playwright-cache:
     name: Playwright caching
     needs: [get-api-commit-hash]
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: ${{ env.PACKAGE_MANAGER }}
-          cache-dependency-path: ${{ env.LOCKFILE_PATH }}
-
-      - uses: actions/cache@v5
-        id: playwright-cache
-        with:
-          # if cache is missing randomly so instead of being able to just trust the cache existing, we have to download here and push it to an artifact for the next job, by commenting the lookup-only out
-          # lookup-only: true
-          path: |
-            ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
-
-      - uses: actions/cache@v5
-        id: npm-cache
-        with:
-          # if cache is missing randomly so instead of being able to just trust the cache existing, we have to download here and push it to an artifact for the next job, by commenting the lookup-only out
-          # lookup-only: true
-          path: |
-            frontend/node_modules
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-
-      - id: install-npm-packages
-        if: steps.npm-cache.outputs.cache-hit != 'true'
-        run: |
-          npm ci
-
-      - 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'
-
-      # We package ourselves as tar.gz because this preserves permissions that a regular artifact upload/download does not.
-      - name: Package node_modules
-        run: |
-          tar -czf /tmp/node_modules.tar.gz ./node_modules/
-          ls /tmp
-
-      - name: Upload node_modules artifact
-        uses: actions/upload-artifact@v7
-        with:
-          archive: false
-          path: /tmp/node_modules.tar.gz
-
-      # We package ourselves as tar.gz because this preserves permissions that a regular artifact upload/download does not.
-      - name: Package Playwright artifact
-        run: |
-          cd ~/.cache/ms-playwright
-          tar -czf /tmp/playwright.tar.gz .
-          ls /tmp
-
-      - name: Upload Playwright artifact
-        uses: actions/upload-artifact@v7
-        with:
-          archive: false
-          path: /tmp/playwright.tar.gz
+      - name: Cache npm and playwright
+        uses: ./.github/actions/cache-npm-and-playwright
 
   build-api-if-not-cached:
     name: Build API if not cached
@@ -429,8 +372,10 @@ jobs:
           staging_test_user_email: ${{ secrets.STAGING_TEST_USER_EMAIL }}
           staging_test_user_password: ${{ secrets.STAGING_TEST_USER_PASSWORD }}
           staging_test_user_mfa_key: ${{ secrets.STAGING_TEST_USER_MFA_KEY }}
+          # shard 2 is the webkit shard
+          do-firefox-install: ${{ matrix.shard == 2 && 'true' || 'false' }}
           # shard 3 is the webkit shard
-          force-webkit-install: ${{ matrix.shard == 3 && 'true' || 'false' }}
+          do-webkit-install: ${{ matrix.shard == 3 && 'true' || 'false' }}
 
   create-report:
     name: Create Merged Test Report

.github/workflows/e2e-staging.yml

@@ -65,6 +65,7 @@ jobs:
           staging_test_user_mfa_key: ${{ secrets.STAGING_TEST_USER_MFA_KEY }}
           staging_test_user_api_key: ${{ secrets.STAGING_TEST_USER_API_KEY }}
           staging_client_session_secret: ${{ secrets.STAGING_CLIENT_SESSION_SECRET }}
+          do-chrome-install: "true"
   create-report:
     name: Create Merged Test Report
     if: ${{ !cancelled() }}