chore: playwright

.claude/commands/e2e-create.md

@@ -0,0 +1,52 @@
+# 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
+   cd frontend
+   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

.claude/commands/e2e-ee.md

@@ -0,0 +1,33 @@
+# E2E Enterprise Test Runner
+
+Run enterprise E2E tests (tagged with @enterprise), analyze failures, fix them, and re-run until all pass.
+
+## 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
+cd frontend
+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
+cd frontend
+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

.claude/commands/e2e-oss.md

@@ -0,0 +1,25 @@
+# E2E OSS Test Runner
+
+Run OSS (non-enterprise) E2E tests, analyze failures, fix them, and re-run until all pass.
+
+## 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
+cd frontend
+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

.claude/commands/e2e.md

@@ -0,0 +1,25 @@
+# E2E Test Runner (All Tests)
+
+Run all E2E tests (both OSS and enterprise), analyze failures, fix them, and re-run until all pass.
+
+## 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
+cd frontend
+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

.claude/context/e2e.md

@@ -0,0 +1,161 @@
+# E2E Testing Configuration and Context
+
+**CRITICAL: This file MUST be read before running any E2E commands. It contains essential configuration, debugging guides, and workflow instructions that all E2E commands depend on.**
+
+## Docker Configuration
+
+To run E2E tests, the following environment variables must be set in `docker-compose.yml` for the `flagsmith` service:
+
+```yaml
+# E2E Testing
+E2E_TEST_AUTH_TOKEN: 'some-token'  # Authentication token for E2E teardown endpoint
+ENABLE_FE_E2E: 'true'               # Enables the E2E testing endpoints in the backend
+```
+
+## Frontend Configuration
+
+The frontend `.env` file should contain tokens for different environments:
+
+```bash
+E2E_TEST_TOKEN_DEV=some-token
+E2E_TEST_TOKEN_LOCAL=some-token
+E2E_TEST_TOKEN_STAGING=<staging-token>
+E2E_TEST_TOKEN_PROD=<prod-token>
+```
+
+## Test Organization
+
+### Test Files
+- Location: `frontend/e2e/tests/*.pw.ts`
+- Test categories:
+  - OSS tests: Tagged with `@oss` (use `--grep @oss`)
+  - Enterprise tests: Tagged with `@enterprise` (use `--grep @enterprise`)
+  - All tests: `--grep "@oss|@enterprise"`
+
+### Test Results
+- Results directory: `frontend/e2e/test-results/`
+- Failed test artifacts:
+  - `failed.json` - Summary of only failed tests
+  - `results.json` - Complete test results (all tests)
+  - Individual test directories containing:
+    - `error-context.md` - DOM snapshot at failure point
+    - `trace.zip` - Detailed execution trace
+    - Screenshots of failures
+
+### HTML Report
+- Location: `frontend/e2e/playwright-report/`
+- View with: `npm run test:report`
+
+## Environment Variables
+
+- `SKIP_BUNDLE=1` - Skip webpack bundle build for faster iteration
+- `E2E_CONCURRENCY=20` - Number of parallel test workers (reduce to 1 for debugging)
+- `E2E_RETRIES=0` - Disable retries and enable fail-fast mode (stop on first failure)
+- `--quiet` - Minimal output
+- `--grep @enterprise` - Run only enterprise tests
+- `--grep @oss` - Run only OSS tests
+- `--grep "@oss|@enterprise"` - Run all tests
+- `-x` - Stop after first failure (automatically added when `E2E_RETRIES=0`)
+
+## CRITICAL: Multiple Iterations
+
+**NEVER use `E2E_REPEAT` environment variable.** It runs tests automatically without control and clears reports on each iteration, destroying error context needed for debugging.
+
+When running multiple iterations:
+1. Run tests **one iteration at a time** using separate bash commands
+2. **STOP IMMEDIATELY** on any failure - do not continue to next iteration
+3. Analyze error-context.md and report the failure
+4. **Ask user for consent** before running additional iterations
+5. Track iteration count: "Iteration X of Y passed"
+
+## CRITICAL: Failure Analysis Workflow
+
+**On ANY test failure, you MUST:**
+1. Read error-context.md for the failed test
+2. **STOP and report the failure summary to the user**
+3. **Ask for user consent before doing ANYTHING else** (no investigating, no fixing, no additional iterations)
+
+Only proceed with investigation/fixes after the user explicitly approves.
+
+### Reading Order for Failed Tests
+
+1. **`error-context.md`** - Start here for DOM snapshot showing exact page state
+2. **`failed.json`** - Error summary
+3. **`trace.zip`** - Detailed trace if needed
+
+### Analyzing Traces
+
+```bash
+cd frontend/e2e/test-results/<failed-test-directory>
+unzip -q trace.zip
+grep -i "error\|failed" 0-trace.network  # Check for network errors
+```
+
+### Common Fix Patterns
+
+- **Wrong selector** → Update to match actual DOM from error-context.md
+- **Missing `data-test` attribute** → Add it to the component
+- **Element hidden** → Filter for visible elements or wait for visibility
+- **Missing wait** → Add appropriate `waitFor*` calls
+- **Race condition** → Add network waits, increase timeouts, or use more specific waits
+- **Flaky element interaction** → Add `scrollIntoView` or `waitForVisible` before clicking
+
+### Re-running Failed Tests
+
+After making fixes, re-run ONLY the failed tests:
+```bash
+cd frontend
+E2E_RETRIES=0 SKIP_BUNDLE=1 E2E_CONCURRENCY=1 npm run test -- tests/specific-test.pw.ts
+```
+
+Maximum 3 fix/re-run cycles per test before reporting as unfixable.
+
+## CRITICAL: Flaky Test Policy
+
+Tests that fail initially but pass on retry are FLAKY and MUST be investigated, even if the final result shows all tests passed.
+
+- **DO NOT** just report that retries passed
+- **DO** investigate and fix the root cause
+- The built-in retry mechanism is a safety net, not a substitute for fixing flaky tests
+
+## Important Rules
+
+- **DO** modify test files to fix timing issues, missing waits, or broken selectors
+- **DO** add `data-test` attributes to components if they're missing
+- **DON'T** modify test assertions or business logic unless the test is clearly wrong
+- If the failure is in application code (not test code), report it as a bug but don't try to fix it
+- Always explain what fixes you're attempting and why
+
+## Test Infrastructure
+
+### Playwright Configuration
+- Browser: Firefox
+- Test runner: `frontend/e2e/run-with-retry.ts`
+- Helper functions: `frontend/e2e/helpers.playwright.ts`
+- Global setup: `frontend/e2e/global-setup.playwright.ts`
+- Global teardown: `frontend/e2e/global-teardown.playwright.ts`
+
+### Backend E2E Implementation
+
+#### Teardown Endpoint
+- URL: `/api/v1/e2etests/teardown/`
+- Method: POST
+- Authentication: Via `X-E2E-Test-Auth-Token` header
+- Purpose: Clears test data and re-seeds database between test runs
+
+#### Middleware
+The backend uses `E2ETestMiddleware` to:
+1. Check for `X-E2E-Test-Auth-Token` header
+2. Compare against `E2E_TEST_AUTH_TOKEN` environment variable
+3. Set `request.is_e2e = True` if authenticated
+
+## Common Issues and Solutions
+
+### Authentication Errors (401)
+- Verify `E2E_TEST_AUTH_TOKEN` is set in docker-compose.yml
+- Check token matches in frontend `.env` file
+- Restart containers after configuration changes
+
+### Bad Request Errors (400)
+- Ensure `ENABLE_FE_E2E: 'true'` is set in docker-compose.yml
+- Restart containers to apply settings

.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