deckhearth/tests/visual/homepage.spec.ts

38 lines
1.6 KiB
TypeScript
Raw Normal View History

feat(test): adopt @playwright/test + ship playwright.config.js + visual scaffold (Brief 1 of adopt-playwright-smoke) Closes P1 #10 step 2 / launch sequence step 10. PR #17 already plumbed VERCEL_AUTOMATION_BYPASS_SECRET into both workflows' env; this brief wires the actual @playwright/test dep, the playwright.config.js that bridges env -> use.extraHTTPHeaders, and a single visual spec so the screenshot workflow has something to discover. Per architect Decision 1 - tests/smoke/app.smoke.spec.ts stays as .ts (npx eslint exits 0 against the current config); new visual spec also .ts. Per Decision 2 - playwright.config.js fail-loud in CI when VERCEL_AUTOMATION_BYPASS_SECRET is missing (throw at config load with actionable message naming the env var, rotation command, AGENTS.md reference); warn-and-no-op in dev. Mirrors lib/rate-limit.js fail-closed pattern (AGENTS.md Gotcha #12). Per Decision 3 - two projects partitioned by testMatch: - smoke -> tests/smoke/**/*.spec.{ts,js} - visual -> tests/visual/**/*.spec.{ts,js} Shared use: block. Matches the workflows' --project=smoke|visual invocations. Per Decision 4 - NO baselines committed. The Mac-vs-Linux platform- suffix issue (architect Boot-the-brief Finding 7: Playwright's custom snapshotPathTemplate has no {platform} token) means a Mac-generated baseline would silently overwrite a Linux CI baseline. Queued as seed-visual-baselines-on-linux follow-up convoy. First CI run of Screenshot diff will fail at the test step; existing continue-on-error: true swallows it and the comment-on-PR step posts the run link. Per Decision 5 - no eslint.config.mjs change. Per Decision 6 - three simple scripts (test:smoke, test:visual, test:visual:update). No auto-boot wrapper. Verification: - npm ci --dry-run exits 0 (lockfile in sync) - npm run lint: 128 problems (baseline match - 81 errors, 47 warnings) - npm run test:run: 21/21 vitest pass (no regression) - npm run test:smoke (no BASE_URL): dev-path warn-and-continue fires "[playwright.config] VERCEL_AUTOMATION_BYPASS_SECRET unset" warning, enumerates 3 smoke tests, attempts to run (fails on missing local chromium binary - workflows install browsers via npx playwright install --with-deps chromium) - CI=true npm run test:smoke: CI-path throws at config load with "VERCEL_AUTOMATION_BYPASS_SECRET is required in CI to reach Vercel-Protection-protected preview deployments. Reseed via: gh secret set VERCEL_AUTOMATION_BYPASS_SECRET --body \"<value>\". See AGENTS.md \xc2\xa7 7 for the full plumbing context." - npx playwright --version: Version 1.60.0 Implementation note: removed the architect's defensive eslint-disable- next-line no-console directive in the dev-warn branch because the active eslint config does not enable no-console for repo-root config files; ESLint reported the directive as unused, which would have regressed the lint baseline by +1. Behavior unchanged; comment-only edit per the brief's explicit "comment wording can be tightened" allowance. Replaced with an explanatory comment noting why the directive is intentionally absent. Implementation note 2: alphabetized @playwright/test as the FIRST entry in devDependencies (before @testing-library/dom) because "@p" < "@t". The brief's prose said "between @testing-library/react and autoprefixer" which would have broken alphabetization; followed the brief's overarching principle ("alphabetical position") instead. No code paths in pages/** or lib/** touched. No workflow YAML edited. No AGENTS.md edits (doc-writer pass at convoy close handles the seed-on-Linux runbook). Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-24 19:44:52 -04:00
import { test, expect } from '@playwright/test';
/**
* Visual baseline for the public homepage.
*
* FIRST RUN (no committed baseline yet):
* The Screenshot diff workflow runs `playwright test --project=visual
* --update-snapshots=none` (per .github/workflows/visual-diff.yml). With
* no baseline file at `tests/visual/__screenshots__/home.png` AND the
* `none` flag, this test FAILS and that's the documented end state of
* the `adopt-playwright-smoke` convoy (Decision 4 in
* `.convoys/adopt-playwright-smoke.md`). The workflow's
* `continue-on-error: true` swallows the failure and the comment-on-PR
* step posts "Visual Diff — view run" with empty artifacts.
*
* SEEDING THE BASELINE (post-merge follow-up):
* Run `npm run test:visual:update` in a Linux environment so the
* generated PNG matches what CI will produce. The cleanest path is the
* Playwright Docker image:
*
* docker run --rm -v "$PWD":/work -w /work \
* mcr.microsoft.com/playwright:v1.60.0-noble \
* sh -c "npm ci && BASE_URL=https://<preview>.vercel.app \
* VERCEL_AUTOMATION_BYPASS_SECRET=<value> \
* npm run test:visual:update"
*
* Then commit `tests/visual/__screenshots__/home.png`. This is tracked
* as the `seed-visual-baselines-on-linux` follow-up convoy.
*/
const BASE = process.env.BASE_URL ?? 'http://localhost:3000';
test.describe('visual: public homepage', () => {
test('home renders consistently against baseline', async ({ page }) => {
await page.goto(BASE);
await expect(page).toHaveScreenshot('home.png');
});
});