Open
Conversation
|
Visual regression report
Diff images (1)button-and-derivatives.png — 5595 pixels differBaselines come from the |
balzss
force-pushed
the
feat/self-hosted-visual-regression
branch
from
ff20f5f to
2f0b68d
Compare
balzss
force-pushed
the
feat/self-hosted-visual-regression
branch
3 times, most recently
from
848eb46 to
cbb6006
Compare
balzss
force-pushed
the
feat/self-hosted-visual-regression
branch
2 times, most recently
from
5695bb0 to
c47f0a5
Compare
…eplacing Chromatic Capture full-page screenshots via cy.screenshot() in an afterEach hook, record each test's visited URL via a cy.task for source-file linking, diff against baselines stored on a visual-baselines branch using a new `ui-scripts visual-diff` command, and publish an HTML report per PR to gh-pages with a sticky PR comment linking to it. The regression-test Next.js app now uses `output: 'export'` with `trailingSlash: true`, serving a fully static site through http-server — no SSR and no hydration so captures are byte-deterministic. The report has a lightbox viewer with baseline/actual/diff mode toggle, a draggable slider overlay, fit-to-window and 1:1 zoom, prev/next navigation, a PR number link in the header, per-row source-file links back to the GitHub blob URL, a debounced live search box, and highlighted active filter buttons. The sticky PR comment includes a collapsed <details> block with inline diff images for every changed row. Documentation added at docs/testing/visual-regression.md. Removes the Chromatic integration; CHROMATIC_APP_CODE secret is no longer used. Baselines are seeded automatically by the new visual-baselines workflow on every merge to master. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…re branch DO NOT MERGE TO MASTER. Delete this file after seeding is no longer needed.
balzss
force-pushed
the
feat/self-hosted-visual-regression
branch
from
c47f0a5 to
128326b
Compare
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
1 participant
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.
Summary
Replaces the Chromatic-based visual regression flow with a self-hosted pipeline that runs entirely on GitHub infrastructure.
What changed
ui-scripts visual-diffcommand (packages/ui-scripts/lib/commands/visual-diff.ts) compares screenshot directories withpixelmatchand generates a self-contained HTML report..github/workflows/visual-regression.ymlruns on every PR: builds InstUI, builds and serves theregression-testNext.js app, captures screenshots with Cypress, fetches baselines from the newvisual-baselinesbranch, diffs, and publishes the report togh-pagesundervisual-regression/pr-<N>/..github/workflows/visual-baselines.ymlruns on every push tomasterand force-pushes the fresh capture set to thevisual-baselinesbranch. No manual review step — merging is the approval.regression-testnow usesnext buildwithoutput: 'export'and is served byhttp-server. No SSR, no hydration mismatches, byte-deterministic captures.<details>block.docs/testing/visual-regression.mddocuments the pipeline, local dev loop, CLI flags, report controls, and tuning advice.testing-overview.mdupdated,regression-test/README.mdrewritten.chromatic,@chromatic-com/cypress) removed fromregression-test/package.json.CHROMATIC_APP_CODEsecret is no longer used.Not merged to master
.github/workflows/seed-baselines-temp.yml— throwaway workflow that seeds thevisual-baselinesbranch before this PR lands, so diffing can be exercised end-to-end. Delete before merge.regression-test/src/app/button/page.tsxcontains a visible test change to trigger the Changed state. Revert before merge.Test plan
Capture, diff, and publish reportjob runs and publishes tohttps://instructure.design/visual-regression/pr-2522/.⚠️ Changes detected,Changed: 1, Unchanged: 31, and the collapsedDiff imagesblock shows the inline diff forbutton-and-derivatives.png.PR #2522link back to this PR.page.tsxin this PR's branch.Cypress component tests,Vitest unit tests,Lint commit msg + code,Analyze (javascript),CodeQLpass.Follow-ups before merging
.github/workflows/seed-baselines-temp.yml.test: break button to exercise diffing.🤖 Generated with Claude Code