diff --git a/img/browser-buildscreen-multiple-browsers-inprogress.png b/img/browser-buildscreen-multiple-browsers-inprogress.png index 1152cf6f..6877ef93 100644 Binary files a/img/browser-buildscreen-multiple-browsers-inprogress.png and b/img/browser-buildscreen-multiple-browsers-inprogress.png differ diff --git a/img/browser-buildscreen-notification.png b/img/browser-buildscreen-notification.png index 407b5b51..2d115052 100644 Binary files a/img/browser-buildscreen-notification.png and b/img/browser-buildscreen-notification.png differ diff --git a/img/build-detail-inconsistent-snapshot-detection.png b/img/build-detail-inconsistent-snapshot-detection.png new file mode 100644 index 00000000..fb420e3f Binary files /dev/null and b/img/build-detail-inconsistent-snapshot-detection.png differ diff --git a/img/build-detail-rerun-button.png b/img/build-detail-rerun-button.png new file mode 100644 index 00000000..68e8b127 Binary files /dev/null and b/img/build-detail-rerun-button.png differ diff --git a/img/build-test-reviewed.png b/img/build-test-reviewed.png index d1805ed5..b4f78c7c 100644 Binary files a/img/build-test-reviewed.png and b/img/build-test-reviewed.png differ diff --git a/img/build-test-unreviewed.png b/img/build-test-unreviewed.png index 65e8d891..cdc7490f 100644 Binary files a/img/build-test-unreviewed.png and b/img/build-test-unreviewed.png differ diff --git a/snapshots.md b/snapshots.md index 0a06d35a..be5e1506 100644 --- a/snapshots.md +++ b/snapshots.md @@ -14,6 +14,7 @@ A snapshot is an image of a story plus some metadata captured by a standardized - [How are snapshots captured?](#how-are-snapshots-captured) - [Improve snapshot consistency](#improve-snapshot-consistency) - [Debug snapshot rendering](#debug-snapshot-rendering) +- [Retake snapshots & rerun builds](#retake-snapshots-rerun-builds) - [Browser differences between snapshots](#browser-differences-between-snapshots)
@@ -294,6 +295,20 @@ The solution we recommend is to use a `` in your [`.storyboo +## Rerun builds to retake snapshots + +Double-check whether a visual change is real or caused by inconsistencies in your app code by retaking snapshots. Click the "rerun" button to kick off a new build that uses identical settings and configuration as your original build. Only snapshots for denied and unreviewed changes will be captured. Any changes you accepted in the original build will not be snapshotted again in a rerun build. + +![Rerun button](img/build-detail-rerun-button.png) + +Debug inconsistent snapshots by looking at the set of changes between the original build and rerun build. You might encounter these common scenarios: + +- 🟢 Changes are identical between builds: This means the snapshots are accurately showing bonafide UI changes that need your verification. Continue the [UI Tests workflow as usual](test#verify-ui-changes). +- 🟡 Changes are different between builds: This means there are inconsistent snapshots which are introducing false positives to your visual tests. Learn how to [improve snapshot consistency](#improve-snapshot-consistency). + +Chromatic calls out potential rendering inconsistencies whenever a build is rerun. +![Inconsistent snapshot detection](img/build-detail-inconsistent-snapshot-detection.png) + ## Browser differences between snapshots Chromatic attempts to render as consistently as possible across our supported browsers. But all browsers have different capabilities and built-in APIs. In practice, this means your snapshots may appear or behave differently depending on which browser you're looking at. This is ideal for customers because it mirrors what the end users who use different browsers would also encounter. diff --git a/test.md b/test.md index 560bcd7e..48cc4d6a 100644 --- a/test.md +++ b/test.md @@ -80,6 +80,15 @@ Click "Inspect snapshot" to open the Inspector. Switch between the "Canvas" and +
+Can I retake a snapshot? + +Yes, [rerun the latest build](snapshots#rerun-builds-to-retake-snapshots) on your branch to retake snapshots of unreviewed or denied changes. + +![Rerun button](img/build-detail-rerun-button.png) + +
+
How are changes on builds different from those listed on the PR Screen 'Changeset' tab? @@ -203,3 +212,10 @@ Yes. Go to the manage page for your project where you can disable UI Tests. Chro "Failed tests" happens when a story's [play function](https://storybook.js.org/docs/react/writing-stories/play-function#gatsby-focus-wrapper) has an unexpected error that caused it to fail. You can learn more about interaction tests [here](https://storybook.js.org/docs/react/writing-tests/interaction-testing).
+ +
+Can I rerun a build without running my whole CI workflow? + +Yes you can [rerun the latest build on any branch](snapshots#rerun-builds-to-retake-snapshots) outside of your CI workflow. Go to the build page to kick off a new build that uses identical settings and configuration as your old build. + +