[T-20260709-0005] Document visual testing workflow and baseline management - #4201
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Committed. Here's the summary.
Summary
Created
VISUAL_TESTING.mdand 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 PlaywrighttoHaveScreenshot()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:updatebaseline 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.tsvisual settings,.github/workflows/visual-tests.yml), Determinism, and a Quick Reference table.README.md— added a one-line link in the Testing section pointing toVISUAL_TESTING.md.Key decisions / caveats
web/tests/globalSetup.ts, thewaitForAnimation/waitForPageReadydeterminism helpers, the existingplaywright.config.tssettings (1920×1080 viewport,retries:0,workers:1, SwiftShader WebGPU args), and explicitly disambiguates the capture-onlynpm run screenshotsdoc-screenshot workflow from the regression layer.visual-tests.ymlare owned by the sibling in-progress tasks (T-20260709-0002/0003/0004). I documented their intended commands/paths (matching the task'snpm 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.Verification
prettier --check VISUAL_TESTING.md→ passes (formatted with the repo's.prettierrc).fail: false) and was not installed locally.origin/mainbefore 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