diff --git a/README.md b/README.md index 1992f17..7f2f4e1 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,8 @@ This project uses **pnpm** as the package manager. After cloning, run `pnpm inst | `pnpm run build` | SvelteKit build → `dist/`, then Critters inlines critical CSS | | `pnpm run preview` | Serve `dist/` (Critters-processed) at http://localhost:4173 — same as deployed | | `pnpm test` | Run unit tests (Vitest) | +| `pnpm run test:e2e` | Run Playwright visual regression (e2e) | +| `pnpm run test:e2e:update-snapshots` | Regenerate e2e snapshots in CI Docker image (see below) | | `pnpm run lint` | ESLint (JS/TS/Svelte) | | `pnpm run lint:css` | Stylelint (global CSS + Svelte styles) | | `pnpm run format` | Prettier (JS/TS/Svelte/CSS/JSON) | @@ -74,6 +76,20 @@ pnpm run dev The site is served at **http://localhost:5173** (or the port shown) with live reload (port forwarded automatically). +### Visual regression (e2e) + +E2e tests use Playwright and compare full-page screenshots to committed snapshots. CI runs in `mcr.microsoft.com/playwright:v1.58.0-noble`; the **Linux** snapshot (`home-chromium-linux.png`) must be generated in that same environment or CI will fail (e.g. different height due to font/layout rendering). + +If CI fails with a snapshot mismatch (e.g. "Expected 1280×5985px, received 1280×5782px"): + +1. Regenerate the Linux snapshot in the CI Docker image: + ```bash + pnpm run test:e2e:update-snapshots + ``` +2. Commit the updated file(s) under `tests/visual.spec.ts-snapshots/`. + +Local `pnpm run test:e2e` uses the **Darwin** snapshot on macOS; the Linux snapshot is only used in CI. + ### Option 4: Docker (Production-like Test) To test the production nginx image locally (same as deployed): diff --git a/package.json b/package.json index e7ee5b1..7f02d74 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "test": "vitest run", "test:unit": "vitest run", "test:e2e": "playwright test", + "test:e2e:update-snapshots": "bash scripts/update-e2e-snapshots.sh", "test:all": "vitest run && playwright test", "test:watch": "vitest" }, diff --git a/scripts/update-e2e-snapshots.sh b/scripts/update-e2e-snapshots.sh new file mode 100755 index 0000000..3ef34a8 --- /dev/null +++ b/scripts/update-e2e-snapshots.sh @@ -0,0 +1,41 @@ +#!/usr/bin/env bash +# Regenerate Playwright visual regression snapshots. +# - When Docker is available: runs in the same image as CI (Playwright Noble) for a CI-accurate baseline. +# - When Docker is not available (e.g. devcontainer): runs Playwright in the current environment; +# the Linux snapshot may still differ slightly from CI — if CI fails, run this script on the host with Docker. +set -e + +SCRIPT_DIR="${BASH_SOURCE%/*}" +PROJECT_ROOT="${SCRIPT_DIR}/.." +cd "$PROJECT_ROOT" + +if command -v docker >/dev/null 2>&1; then + PLAYWRIGHT_IMAGE="${PLAYWRIGHT_IMAGE:-mcr.microsoft.com/playwright:v1.58.0-noble}" + echo "Using Docker image: $PLAYWRIGHT_IMAGE (same as CI)" + echo "Project root: $PROJECT_ROOT" + echo "" + + docker run --rm \ + -v "$PROJECT_ROOT:/app" -w /app \ + -e CI=1 \ + "$PLAYWRIGHT_IMAGE" \ + bash -c ' + corepack enable && corepack prepare pnpm@10.28.2 --activate + pnpm install --frozen-lockfile || pnpm install + pnpm run build + npx serve dist -p 4173 & + sleep 2 + pnpm exec playwright test --update-snapshots + ' +else + echo "Docker not found — updating snapshots in the current environment." + echo "If CI later fails with a snapshot mismatch, run this script on a host with Docker for a CI-accurate baseline." + echo "" + + # Unset CI so Playwright config starts the preview server + unset CI + pnpm exec playwright test --update-snapshots +fi + +echo "" +echo "Snapshots updated. Commit the changed files under tests/visual.spec.ts-snapshots/ if needed." diff --git a/site/assets/js/ga-init.js b/site/assets/js/ga-init.js deleted file mode 100644 index 5e66bd2..0000000 --- a/site/assets/js/ga-init.js +++ /dev/null @@ -1,8 +0,0 @@ -window.dataLayer = window.dataLayer || []; -function gtag(){ window.dataLayer.push(arguments); } - -gtag("js", new Date()); -gtag("config", "G-36F29PDKRT", { - // optional, but often helpful: - anonymize_ip: true, -}); diff --git a/tests/visual.spec.ts-snapshots/home-chromium-darwin.png b/tests/visual.spec.ts-snapshots/home-chromium-darwin.png deleted file mode 100644 index 28f9522..0000000 Binary files a/tests/visual.spec.ts-snapshots/home-chromium-darwin.png and /dev/null differ