diff --git a/.github/workflows/frontend-tests.yml b/.github/workflows/frontend-tests.yml index 2dd4402f..6185fd64 100644 --- a/.github/workflows/frontend-tests.yml +++ b/.github/workflows/frontend-tests.yml @@ -17,6 +17,11 @@ on: - 'frontend/**' - '.github/workflows/frontend-tests.yml' workflow_dispatch: + inputs: + update-snapshots: + description: 'Regenerate Playwright visual snapshots and commit them to the branch' + type: boolean + default: false # Least privilege: these jobs only need to read the repo to check it out. # Artifact upload uses the separate ACTIONS_RUNTIME_TOKEN, not GITHUB_TOKEN, @@ -46,6 +51,9 @@ jobs: e2e: name: E2E tests (Playwright) + # Skipped when a dispatch asks for snapshot regeneration instead — running + # both would fail this job against the stale snapshots being replaced. + if: ${{ !(github.event_name == 'workflow_dispatch' && inputs['update-snapshots']) }} timeout-minutes: 60 runs-on: ubuntu-latest # Pinned to match the installed @playwright/test version (1.60.0); bump both @@ -70,3 +78,42 @@ jobs: name: playwright-report path: frontend/playwright-report/ retention-days: 30 + + # Visual snapshots must be rendered in the exact CI environment (container + # image, fonts, GPU rasterization) to be pixel-stable, so regeneration runs + # here rather than on a developer machine. Trigger manually: + # gh workflow run frontend-tests.yml --ref -f update-snapshots=true + # The job commits the refreshed PNGs back to the triggering branch. + update-snapshots: + name: Regenerate visual snapshots + if: ${{ github.event_name == 'workflow_dispatch' && inputs['update-snapshots'] }} + timeout-minutes: 60 + runs-on: ubuntu-latest + permissions: + contents: write + container: + image: mcr.microsoft.com/playwright:v1.60.0-noble + options: --user 1001 + steps: + - uses: actions/checkout@v5 + - uses: actions/setup-node@v6 + with: + node-version: lts/* + - name: Install dependencies + run: npm ci + - name: Build Frontend + run: npm run build + - name: Regenerate snapshots + run: npx playwright test --update-snapshots + - name: Commit refreshed snapshots + working-directory: . + run: | + git config user.name "github-actions[bot]" + git config user.email "41898282+github-actions[bot]@users.noreply.github.com" + git add frontend/tests/*-snapshots + if git diff --cached --quiet; then + echo "Snapshots unchanged; nothing to commit." + else + git commit -m "Regenerate Playwright visual snapshots" + git push origin HEAD:"$GITHUB_REF_NAME" + fi diff --git a/VISUAL_REGRESSION.md b/VISUAL_REGRESSION.md index bb0087a0..ae115947 100644 --- a/VISUAL_REGRESSION.md +++ b/VISUAL_REGRESSION.md @@ -2,12 +2,12 @@ This project uses Playwright to run visual regression tests that capture screenshots and compare them against baseline images. Currently, we have tests set up only for the demo page of the application. -## Running the tests +The tests run as part of the **Frontend Tests** workflow (`.github/workflows/frontend-tests.yml`), in the `e2e` job. Only the Chromium project is enabled in `frontend/playwright.config.ts`, so there is a single baseline: -1. Navigate to the **Actions** tab in GitHub -2. Select **Playwright Visual Regression Tests** workflow -3. Click **Run workflow** button and choose the branch you wish to run tests on -4. The workflow will run tests against all browsers (Chromium, Firefox, WebKit) +``` +frontend/tests/demo-page-visual.spec.ts-snapshots/ +└── demo-page-chromium-linux.png +``` ## Understanding test results @@ -28,23 +28,16 @@ When tests fail: ## Updating baseline images -If the UI changes are **intentional** and you want to update the baselines: +Baselines are only pixel-stable when rendered in CI's pinned Playwright container, so don't regenerate them on your own machine. If the UI changes are **intentional**, use the regeneration job: -1. From the Playwright report, download the actual images for each browser -2. Replace the existing baseline images in `frontend/tests/demo-page-visual.spec.ts-snapshots/` -3. Rename downloaded images to match existing baseline names: - - `demo-page-chromium-linux.png` - - `demo-page-firefox-linux.png` - - `demo-page-webkit-linux.png` -4. Commit and push the updated baseline images -5. Re-run the visual regression test to verify it passes +1. Navigate to the **Actions** tab in GitHub and select the **Frontend Tests** workflow +2. Click **Run workflow**, choose your branch, and check **Regenerate Playwright visual snapshots** +3. The `update-snapshots` job re-renders the baselines in the same container the tests use and commits them back to your branch -## Baseline image locations +Or from the CLI: -Current baseline images are stored in: -``` -frontend/tests/demo-page-visual.spec.ts-snapshots/ -├── demo-page-chromium-linux.png -├── demo-page-firefox-linux.png -└── demo-page-webkit-linux.png +```sh +gh workflow run frontend-tests.yml --ref -f update-snapshots=true ``` + +Alternatively, you can download the actual image from a failed run's playwright-report artifact, rename it to `demo-page-chromium-linux.png`, and commit it in place of the baseline. diff --git a/frontend/src/pages/chat/styles.module.css b/frontend/src/pages/chat/styles.module.css index 813d05d8..7dc50d14 100644 --- a/frontend/src/pages/chat/styles.module.css +++ b/frontend/src/pages/chat/styles.module.css @@ -152,7 +152,7 @@ width: 5px; height: 5px; border-radius: 50%; - background: #fafaf8; + background: #9b958a; animation: bounce 1.2s infinite ease-in-out; } @@ -231,9 +231,9 @@ } .chatSendBtn:disabled { - background: #fafaf8; + background: #1c1c1c; cursor: default; - opacity: 1; + opacity: 0.35; } .scrollButton { diff --git a/frontend/src/pages/draft/index.tsx b/frontend/src/pages/draft/index.tsx index 820030bb..1ff79954 100644 --- a/frontend/src/pages/draft/index.tsx +++ b/frontend/src/pages/draft/index.tsx @@ -432,7 +432,7 @@ export default function Draft() { return (