fix(regression-test): assert console errors across all captured themes

Each test now visits the page once per theme, and every cy.visit re-stubs
console.error. The afterEach only saw the final visit's stub, so console errors
during the canvas or light render were silently dropped. Accumulate the call
count across visits and assert the total.

Also refresh stale docs: correct the visual-regression guide link in the
regression-test README, and update the cypress.config comment and the guide's
capture step to reflect screenshots being taken directly in the spec (per
theme) rather than in an afterEach hook.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: balzss

docs/contributing/testing/visual-regression.md

@@ -12,7 +12,7 @@ InstUI runs visual regression tests on every pull request. They guard against un
 
 On every PR:
 
-1. **Build & capture.** GitHub Actions builds InstUI, builds the `regression-test` Next.js app as a static site, and serves it. Cypress visits every page under `regression-test/src/app/*`, waits for it to render, and calls `cy.screenshot()` in an `afterEach` hook, producing one PNG per test case.
+1. **Build & capture.** GitHub Actions builds InstUI, builds the `regression-test` Next.js app as a static site, and serves it. Cypress visits every page under `regression-test/src/app/*` once per theme (via the `?theme=` query param), waits for each to render, and calls `cy.screenshot()` directly in the spec, producing one PNG per page/theme combination.
 2. **Diff.** The `ui-scripts visual-diff` command compares each screenshot against the matching baseline fetched from the `visual-baselines` branch of the repo. It uses [pixelmatch](https://github.com/mapbox/pixelmatch) with antialiasing detection enabled, so typical font-rendering noise doesn't register as a diff.
 3. **Publish.** The diff script writes an HTML report (with baseline / actual / diff for every row, plus a lightbox viewer) and the action publishes it to the `gh-pages` branch under `visual-regression/pr-<N>/`. The report is reachable at `https://instructure.design/visual-regression/pr-<N>/index.html`.
 4. **Comment.** A sticky PR comment summarizes the result, links to the report, and inlines each changed row's diff image inside a collapsed `<details>` block.

regression-test/README.md

@@ -8,7 +8,7 @@ A small Next.js app that imports `@instructure/ui` locally and exposes one page
 
 Each page is captured once **per theme** (`canvas`, `light`, `dark`), so screenshots are named `<slug>-<theme>.png`. The theme is selected with the `?theme=<key>` query param, which `src/app/layout.tsx` reads and applies via `InstUISettingsProvider`. Add or remove themes with the `THEMES` array in `cypress/e2e/spec.cy.ts` (this multiplies the screenshot/baseline count).
 
-See the [visual regression testing guide](../docs/testing/visual-regression.md) for the full CI pipeline, the diff report UI, and tuning notes.
+See the [visual regression testing guide](../docs/contributing/testing/visual-regression.md) for the full CI pipeline, the diff report UI, and tuning notes.
 
 ## Why npm instead of pnpm?
 

regression-test/cypress.config.ts

@@ -31,9 +31,9 @@ export default defineConfig({
   trashAssetsBeforeRuns: true,
   video: false,
   // Never capture Cypress' automatic failure screenshots (the error overlay).
-  // Visual regression baselines come solely from the deterministic afterEach
-  // `cy.screenshot`; a failure screenshot has a different filename and would
-  // otherwise leak into the diff as a spurious "new" image.
+  // Visual regression baselines come solely from the deterministic
+  // `cy.screenshot` calls in the spec; a failure screenshot has a different
+  // filename and would otherwise leak into the diff as a spurious "new" image.
   screenshotOnRunFailure: false,
   e2e: {
     viewportWidth: 1280,

regression-test/cypress/e2e/spec.cy.ts

@@ -26,18 +26,33 @@ import type { Result, RunOnly } from 'axe-core'
 
 type ConsoleErrorStub = Cypress.Agent<sinon.SinonStub<any[], any>>
 let windowErrorSpy: ConsoleErrorStub | undefined
+// Running total of console.error calls across every visit in the current test.
+// Each test visits the page once per theme; each cy.visit replaces
+// windowErrorSpy with a fresh stub, so we fold the outgoing stub's count into
+// this total before it's lost. Without this, the afterEach assertion would only
+// observe errors from the test's final visit.
+let consoleErrorCount = 0
 
 Cypress.on('window:before:load', (win) => {
   // Stub console.error before your application code runs
   // This allows you to capture errors even if they happen very early
+  if (windowErrorSpy) {
+    consoleErrorCount += windowErrorSpy.callCount
+  }
   windowErrorSpy = cy.stub(win.console, 'error')
 })
 
+beforeEach(() => {
+  consoleErrorCount = 0
+  windowErrorSpy = undefined
+})
+
 afterEach(() => {
-  // After each test, assert that console.error was not called
+  // After each test, assert that console.error was not called on any visit.
   // Add a small wait if your application might log errors asynchronously
   cy.wait(100).then(() => {
-    expect(windowErrorSpy).to.have.callCount(0)
+    const total = consoleErrorCount + (windowErrorSpy?.callCount ?? 0)
+    expect(total, 'console.error call count across all visits').to.equal(0)
   })
 })