docs: Add Snapshots EA product documentation#17327
Conversation
Add three new pages for the Snapshots visual regression testing feature (Early Adopter). Covers the overview and prerequisites, upload setup with CI workflow, and the review/approval workflow with project settings. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
|
||
| ## Status Checks | ||
|
|
||
| After you upload snapshots from a pull request branch, a **Snapshot Testing** GitHub Check appears on the pull request. If no snapshots changed, the check passes. If any snapshots were added, removed, or modified, the check fails and requires approval. |
There was a problem hiding this comment.
Should we explain that the default is that added snapshots don't fail here?
There was a problem hiding this comment.
will have that in the settings section and maybe just a link to "if you want to change your failure settings..."
| - **Wipe** — Drag a slider across the image to compare base and current branch. | ||
| - **Onion** — Overlay both images with an adjustable opacity slider. | ||
|
|
||
| IMAGE: Sentry Snapshot comparison viewer showing a modified image with split diff |
There was a problem hiding this comment.
Can we make this a gif of using the onion mode on an ogre ? that would make my day.
There was a problem hiding this comment.
lol we'll save that for the EA blog
| ```json | ||
| { | ||
| "display_name": "Billing Page", | ||
| "group": "Settings" |
There was a problem hiding this comment.
we can also add other fields as extras here, they will become tags.
For example:
"device": "id:pixel_5",
"nightMode": true
There was a problem hiding this comment.
didn't want to put that until they're actually used downstream (my understanding is that it's not in any way atm)
| branches: [main] | ||
| pull_request: | ||
|
|
||
| concurrency: |
There was a problem hiding this comment.
Let's leave the concurrency out of this snippet.
There was a problem hiding this comment.
whoops, slipped in, 👍
| steps: | ||
| - uses: actions/checkout@v4 | ||
| with: | ||
| # Use PR head SHA, not the merge commit — avoids phantom diffs |
There was a problem hiding this comment.
took from our sentry yml, not sure if we want in example workflow or not: https://github.com/getsentry/sentry/blob/master/.github/workflows/frontend-snapshots.yml#L42
| build snapshots "${{ env.SNAPSHOT_OUTPUT_DIR }}" | ||
| --app-id <your-app-id> | ||
| --project <your-sentry-project> | ||
| --head-sha "${{ github.event.pull_request.head.sha || github.sha }}" |
There was a problem hiding this comment.
head-sha, vcs-provider and head-repo-name will be auto-detected in github actions so we should rely on that.
There was a problem hiding this comment.
going off our workflow: https://github.com/getsentry/sentry/blob/master/.github/workflows/frontend-snapshots.yml#L86
also how much do we want to write for github actions vs. general? not sure what we do for size/distro
| --head-repo-name "${{ github.repository }}" | ||
| ) | ||
|
|
||
| if [[ "${{ github.event_name }}" == "pull_request" ]]; then |
There was a problem hiding this comment.
these will also all be auto detected so we should just rely on that.
| sentry-cli "${ARGS[@]}" | ||
| ``` | ||
|
|
||
| A few things to note about this workflow: |
There was a problem hiding this comment.
let's remove these 3 points. they are slop.
docs/product/snapshots/index.mdx
Outdated
|
|
||
| ## How It Works | ||
|
|
||
| 1. **Generate snapshots** — Your CI job produces PNG screenshots however you like: Playwright, Storybook, simulator captures, or any tool that outputs PNGs. |
There was a problem hiding this comment.
Should we mention Paparazzi?
|
|
||
| <Include name="feature-available-for-user-group-early-adopter" /> | ||
|
|
||
| ## Status Checks |
There was a problem hiding this comment.
Should we add PR comments on this page as well?
There was a problem hiding this comment.
I'll put mention in the settings but since status check control a core workflow i think worth the callout. tbh this page is all slop rn and will get a rework
2 participants
Add three new pages for the Snapshots visual regression testing feature (Early Adopter) at
/product/snapshots/.Snapshots lets users generate PNG screenshots in CI, upload them to Sentry via
sentry-cli, and get pixel-level diffs reported as GitHub Checks on pull requests. This is the initial EA documentation covering the core workflow.Pages added:
index.mdx) — Overview, how it works (5-step flow), and prerequisitessetup/index.mdx) — Directory format, JSON sidecar metadata, and a complete GitHub Actions workflowreview-workflow/index.mdx) — Status checks, comparison viewer, approval flow, and project settingsAll pages include the EA banner. Screenshot placeholders (
IMAGE: ...) are used where real screenshots will be added later.REFS EME-1029