Skip to content

[T-20260709-0005] Document visual testing workflow and baseline management - #4201

Merged
georgi merged 1 commit into
mainfrom
claude/t-20260709-0005-134
Jul 9, 2026
Merged

[T-20260709-0005] Document visual testing workflow and baseline management#4201
georgi merged 1 commit into
mainfrom
claude/t-20260709-0005-134

Conversation

@georgi

@georgi georgi commented Jul 9, 2026

Copy link
Copy Markdown
Collaborator

Committed. Here's the summary.

Summary

Created VISUAL_TESTING.md and linked it from the main README, giving the team a clear process for managing visual baselines and distinguishing intentional changes from regressions.

What changed

  • VISUAL_TESTING.md (new, repo root) — documents the hybrid visual regression stack from the accepted plan: Storybook + Chromatic for component/design-system coverage and Playwright toHaveScreenshot() for critical E2E flows (node graph, settings, chat). Sections: How Visual Tests Work (component vs E2E, Chromatic workflow, Playwright workflow, baselines & diffs), Accepting Changes (Chromatic UI steps + npm run test:visual:update baseline commit flow), Common Scenarios, Troubleshooting (font rendering, animation timing, viewport mismatch, theme toggle, missing baselines, WebGPU/Sketch in CI), Team Workflow, Configuration Files (.chromatic.config.json, playwright.config.ts visual settings, .github/workflows/visual-tests.yml), Determinism, and a Quick Reference table.
  • README.md — added a one-line link in the Testing section pointing to VISUAL_TESTING.md.

Key decisions / caveats

  • The doc is grounded in the actual repo harness: it references the real-backend web/tests/globalSetup.ts, the waitForAnimation/waitForPageReady determinism helpers, the existing playwright.config.ts settings (1920×1080 viewport, retries:0, workers:1, SwiftShader WebGPU args), and explicitly disambiguates the capture-only npm run screenshots doc-screenshot workflow from the regression layer.
  • Storybook, Chromatic config, Playwright visual assertions, and visual-tests.yml are owned by the sibling in-progress tasks (T-20260709-0002/0003/0004). I documented their intended commands/paths (matching the task's npm run test:visual:update / tests/__snapshots__ contract) without creating those files, to avoid merge conflicts with the parallel branches. The doc describes the target steady-state plus the plan's non-blocking enforcement posture.
  • Acceptance criteria all satisfied: VISUAL_TESTING.md created, team workflow documented, accepting-change examples included, troubleshooting section present, linked from README.

Verification

  • prettier --check VISUAL_TESTING.md → passes (formatted with the repo's .prettierrc).
  • Confirmed all internal anchor links map to real headings and relative file links resolve; the repo's lychee link check is advisory (fail: false) and was not installed locally.
  • README was already prettier-dirty on origin/main before this change; I left the rest untouched and only added the single linking line to avoid unrelated churn. No typecheck/lint applies to a Markdown-only change.

Closes task T-20260709-0005: Document visual testing workflow and baseline management.

Acceptance criteria

  • VISUAL_TESTING.md created with clear instructions
  • Team workflow documented
  • Examples for accepting changes
  • Troubleshooting section with common issues
  • Linked from main README

Document the hybrid visual testing stack (Storybook + Chromatic for
components, Playwright screenshot assertions for E2E flows) so teams have a
clear process for accepting intentional changes vs. catching regressions.

Covers how the two layers work, accepting changes (Chromatic UI and local
Playwright baseline updates), common scenarios, troubleshooting, the team
PR workflow, configuration files, and determinism conventions. Linked from
the README Testing section.
@georgi
georgi enabled auto-merge (squash) July 9, 2026 14:46
@georgi
georgi merged commit fe23408 into main Jul 9, 2026
17 checks passed
@georgi
georgi deleted the claude/t-20260709-0005-134 branch July 9, 2026 14:53
@georgi
georgi restored the claude/t-20260709-0005-134 branch July 9, 2026 15:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant