chore: playwright (#6562)

Co-authored-by: Zaimwa9 <wadii.zaim@flagsmith.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>

Author: 4 people

.github/actions/e2e-tests/action.yml

@@ -26,13 +26,26 @@ runs:
         node-version-file: frontend/.nvmrc
         cache-dependency-path: frontend/package-lock.json
 
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ hashFiles('frontend/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-playwright-
+
     - name: NPM Install
       working-directory: frontend
       run: |
         npm ci
       shell: bash
 
-    - name: Test with Chromedriver
+    - name: Install Playwright browsers
+      working-directory: frontend
+      run: npm run test:install
+      shell: bash
+
+    - name: Run E2E tests
       uses: nick-fields/retry@v3
       with:
         shell: bash

.github/workflows/.reusable-docker-e2e-tests.yml

@@ -14,7 +14,7 @@ on:
         required: true
       args:
         type: string
-        description: Additional arguments to testcafe
+        description: Additional arguments to playwright
         required: false
         default: ''
       concurrency:
@@ -44,6 +44,7 @@ jobs:
       contents: read
       packages: read
       id-token: write
+      pull-requests: write
 
     env:
       GCR_TOKEN: ${{ secrets.GCR_TOKEN }}
@@ -52,6 +53,17 @@ jobs:
       - name: Cloning repo
         uses: actions/checkout@v5
 
+      - name: Determine test type
+        id: test-type
+        run: |
+          if [[ '${{ inputs.args }}' == *"@enterprise"* ]]; then
+            echo "type=private-cloud" >> $GITHUB_OUTPUT
+            echo "label=private-cloud" >> $GITHUB_OUTPUT
+          else
+            echo "type=oss" >> $GITHUB_OUTPUT
+            echo "label=oss" >> $GITHUB_OUTPUT
+          fi
+
       - name: Login to Github Container Registry
         if: ${{ env.GCR_TOKEN }}
         uses: docker/login-action@v3
@@ -67,22 +79,79 @@ jobs:
         run: depot pull-token | docker login -u x-token --password-stdin registry.depot.dev
 
       - name: Run tests on dockerised frontend
-        uses: nick-fields/retry@v3
-        with:
-          shell: bash
-          command: |
-            cd frontend
-            make test
-          max_attempts: 2
-          retry_on: error
-          timeout_minutes: 20
-          on_retry_command: |
-            cd frontend
-            docker compose down --remove-orphans || true
+        working-directory: frontend
+        run: make test
         env:
           opts: ${{ inputs.args }}
           API_IMAGE: ${{ inputs.api-image }}
           E2E_IMAGE: ${{ inputs.e2e-image }}
           E2E_CONCURRENCY: ${{ inputs.concurrency }}
+          E2E_RETRIES: 2
           SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
           GITHUB_ACTION_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+        timeout-minutes: 20
+
+      - name: Cleanup E2E services
+        if: always()
+        working-directory: frontend
+        run: docker compose down --remove-orphans || true
+
+      - name: Copy results.json to HTML report
+        if: always()
+        run: |
+          cp frontend/e2e/test-results/results.json frontend/e2e/playwright-report/ || true
+
+      - name: Upload HTML report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-html-report-${{ steps.test-type.outputs.type }}-${{ github.run_id }}-${{ github.run_attempt }}-${{ strategy.job-index }}
+          path: frontend/e2e/playwright-report/
+          retention-days: 30
+          if-no-files-found: warn
+
+      - name: Set artifact URL
+        if: failure() && github.event_name == 'pull_request'
+        id: artifact-url
+        run: |
+          echo "url=${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}#artifacts" >> $GITHUB_OUTPUT
+
+      - name: Send Slack notification and upload report
+        if: failure()
+        working-directory: frontend
+        run: |
+          cd e2e
+          zip -r playwright-report.zip playwright-report/ || echo "Failed to zip report"
+          cd ..
+          npm install --no-save @slack/web-api
+          npx -y tsx e2e/slack-e2e-reporter.ts
+        env:
+          SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
+          GITHUB_ACTION_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+          GITHUB_REF_NAME: ${{ github.ref_name }}
+          GITHUB_HEAD_REF: ${{ github.head_ref }}
+          TEST_TYPE: ${{ steps.test-type.outputs.label }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          PR_URL: ${{ github.event.pull_request.html_url }}
+
+      - name: Comment PR with test results (success)
+        if: success() && github.event_name == 'pull_request'
+        uses: daun/playwright-report-summary@v3
+        with:
+          report-file: frontend/e2e/playwright-report/results.json
+          comment-title: 'Playwright Test Results (${{ steps.test-type.outputs.label }} - ${{ inputs.runs-on }})'
+          report-tag: 'playwright-${{ steps.test-type.outputs.label }}-${{ inputs.runs-on }}'
+          custom-info: |
+            **🔄 Run:** [#${{ github.run_number }} (attempt ${{ github.run_attempt }})](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})
+
+      - name: Comment PR with test results (failure)
+        if: failure() && github.event_name == 'pull_request'
+        uses: daun/playwright-report-summary@v3
+        with:
+          report-file: frontend/e2e/playwright-report/results.json
+          comment-title: 'Playwright Test Results (${{ steps.test-type.outputs.label }} - ${{ inputs.runs-on }})'
+          report-tag: 'playwright-${{ steps.test-type.outputs.label }}-${{ inputs.runs-on }}'
+          custom-info: |
+            **📦 Artifacts:** [View test results and HTML report](${{ steps.artifact-url.outputs.url }})
+            **🔄 Run:** [#${{ github.run_number }} (attempt ${{ github.run_attempt }})](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})

.github/workflows/frontend-test-staging.yml

@@ -15,22 +15,6 @@ jobs:
       - name: Cloning repo
         uses: actions/checkout@v5
 
-      # Temporarily install Firefox 143.0 to avoid test failures as superior versions cause frontend e2e tests to hang
-      # To be removed once upstream issue correctly resolved
-      - name: Install Firefox 143.0
-        run: |
-          sudo apt-get remove -y firefox || true
-          sudo rm -rf /usr/bin/firefox /usr/lib/firefox*
-          
-          ARCH=$(uname -m)
-          wget -O /tmp/firefox.tar.xz "https://ftp.mozilla.org/pub/firefox/releases/143.0/linux-${ARCH}/en-US/firefox-143.0.tar.xz"
-          sudo tar -xJf /tmp/firefox.tar.xz -C /opt
-          sudo ln -s /opt/firefox/firefox /usr/local/bin/firefox
-          rm /tmp/firefox.tar.xz
-          
-          firefox --version
-
-
       - name: Run E2E tests against staging
         uses: ./.github/actions/e2e-tests
         with:

.github/workflows/platform-docker-build-e2e-image.yml

@@ -150,7 +150,7 @@ jobs:
       runs-on: ${{ matrix.runs-on }}
       e2e-image: ${{ needs.docker-build-e2e.outputs.image }}
       api-image: ${{ needs.docker-build-api.outputs.image }}
-      args: --meta-filter category=oss
+      args: --grep @oss
     secrets:
       GCR_TOKEN: ${{ needs.permissions-check.outputs.can-write == 'true' && secrets.GITHUB_TOKEN || '' }}
       SLACK_TOKEN: ${{ needs.permissions-check.outputs.can-write == 'true' && secrets.SLACK_TOKEN || '' }}
@@ -167,7 +167,7 @@ jobs:
       runs-on: ${{ matrix.runs-on }}
       e2e-image: ${{ needs.docker-build-e2e.outputs.image }}
       api-image: ${{ needs.docker-build-private-cloud.outputs.image }}
-      args: --meta-filter category=oss,category=enterprise
+      args: --grep "@oss|@enterprise"
     secrets:
       GCR_TOKEN: ${{ needs.permissions-check.outputs.can-write == 'true' && secrets.GITHUB_TOKEN || '' }}
       SLACK_TOKEN: ${{ needs.permissions-check.outputs.can-write == 'true' && secrets.SLACK_TOKEN || '' }}

.github/workflows/platform-pull-request.yml

@@ -0,0 +1,51 @@
+# E2E Test Creator
+
+Create a new E2E test following the existing patterns in the codebase.
+
+## Arguments
+
+- `$ARGUMENTS` = "" → Ask the user what to test
+- `$ARGUMENTS` = "segment creation flow" → Create a test for that feature
+
+## CRITICAL: Read Context First
+
+**You MUST read `.claude/context/e2e.md` before proceeding.** It contains essential configuration, test structure, and debugging guides.
+
+## Workflow
+
+1. **Determine what to test:**
+   - If `$ARGUMENTS` is provided, use that as the test description
+   - Otherwise, ask the user what feature/page/flow to test
+
+2. **Determine if OSS or Enterprise:**
+   - Check if the feature exists in enterprise-only code paths
+   - Tag the test with `@oss` or `@enterprise` accordingly
+
+3. **Review existing patterns:**
+   - Read 2-3 similar test files from `frontend/e2e/tests/`
+   - Read `frontend/e2e/helpers.playwright.ts` for available utilities
+
+4. **Scan application code:**
+   - Find components being tested in `frontend/web/components/` or `frontend/common/`
+   - Add `data-test` attributes if missing
+
+5. **Create the test file:**
+   - Follow naming convention: `*-test.pw.ts` or `*-tests.pw.ts`
+   - Use helper functions from `helpers.playwright.ts`
+
+6. **Verify the test works:**
+   ```bash
+   SKIP_BUNDLE=1 E2E_CONCURRENCY=1 npm run test -- tests/new-test.pw.ts --quiet
+   ```
+   Run twice to check for flakiness. On failure, follow the analysis workflow in context/e2e.md.
+
+7. **Report what was created:**
+   - Test file path
+   - Any `data-test` attributes added
+   - Test stability results
+
+## Important Notes
+
+- Always use `data-test` attributes for selectors
+- Use existing helper functions instead of raw Playwright APIs
+- Tests should be independent and not rely on execution order

frontend/.claude/commands/e2e-create.md

@@ -0,0 +1,31 @@
+# E2E Enterprise Test Runner
+
+Run enterprise E2E tests (tagged with @enterprise) and report results.
+
+## Arguments
+
+- `$ARGUMENTS` = "" → Run tests once (default)
+- `$ARGUMENTS` = "5" → Run tests 5 times, stopping on first failure
+
+## CRITICAL: Read Context First
+
+**You MUST read `.claude/context/e2e.md` before proceeding.** It contains essential configuration, failure analysis workflows, and fix patterns.
+
+## Run Command
+
+```bash
+E2E_RETRIES=0 SKIP_BUNDLE=1 E2E_CONCURRENCY=20 npm run test -- --grep @enterprise --quiet
+```
+
+## Re-running Failed Enterprise Tests
+
+When re-running specific failed tests, include the grep flag:
+```bash
+E2E_RETRIES=0 SKIP_BUNDLE=1 E2E_CONCURRENCY=1 npm run test -- tests/specific-test.pw.ts --grep @enterprise
+```
+
+## Workflow
+
+1. Run tests (one iteration at a time if multiple requested)
+2. On failure: follow the failure analysis workflow in context/e2e.md
+3. Report results

frontend/.claude/commands/e2e-ee.md

@@ -0,0 +1,24 @@
+# E2E OSS Test Runner
+
+Run OSS (non-enterprise) E2E tests and report results.
+
+## Arguments
+
+- `$ARGUMENTS` = "" → Run tests once (default)
+- `$ARGUMENTS` = "5" → Run tests 5 times, stopping on first failure
+
+## CRITICAL: Read Context First
+
+**You MUST read `.claude/context/e2e.md` before proceeding.** It contains essential configuration, failure analysis workflows, and fix patterns.
+
+## Run Command
+
+```bash
+E2E_RETRIES=0 SKIP_BUNDLE=1 E2E_CONCURRENCY=20 npm run test -- --grep @oss --quiet
+```
+
+## Workflow
+
+1. Run tests (one iteration at a time if multiple requested)
+2. On failure: follow the failure analysis workflow in context/e2e.md
+3. Report results

frontend/.claude/commands/e2e-oss.md

@@ -0,0 +1,24 @@
+# E2E Test Runner (All Tests)
+
+Run all E2E tests (both OSS and enterprise) and report results.
+
+## Arguments
+
+- `$ARGUMENTS` = "" → Run tests once (default)
+- `$ARGUMENTS` = "5" → Run tests 5 times, stopping on first failure
+
+## CRITICAL: Read Context First
+
+**You MUST read `.claude/context/e2e.md` before proceeding.** It contains essential configuration, failure analysis workflows, and fix patterns.
+
+## Run Command
+
+```bash
+E2E_RETRIES=0 SKIP_BUNDLE=1 E2E_CONCURRENCY=20 npm run test -- --grep "@oss|@enterprise" --quiet
+```
+
+## Workflow
+
+1. Run tests (one iteration at a time if multiple requested)
+2. On failure: follow the failure analysis workflow in context/e2e.md
+3. Report results with pass/fail counts for OSS and enterprise tests