Skip to content

Commit

Permalink
Add docs for rerunning build on /snapshots and /test
Browse files Browse the repository at this point in the history
  • Loading branch information
domyen committed Aug 7, 2023
1 parent 083b51b commit 8e37793
Show file tree
Hide file tree
Showing 8 changed files with 31 additions and 0 deletions.
Binary file modified img/browser-buildscreen-multiple-browsers-inprogress.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/browser-buildscreen-notification.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/build-detail-rerun-button.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/build-test-reviewed.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/build-test-unreviewed.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions snapshots.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

<div class="aside">
Expand Down Expand Up @@ -294,6 +295,20 @@ The solution we recommend is to use a `<link rel="preload">` in your [`.storyboo

</details>

## 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.
16 changes: 16 additions & 0 deletions test.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,15 @@ Click "Inspect snapshot" to open the Inspector. Switch between the "Canvas" and

</details>

<details>
<summary>Can I retake a snapshot?</summary>

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)

</details>

<details>
<summary>How are changes on builds different from those listed on the PR Screen 'Changeset' tab?</summary>

Expand Down Expand Up @@ -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).

</details>

<details>
<summary>Can I rerun a build without running my whole CI workflow?</summary>

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.

</details>

0 comments on commit 8e37793

Please sign in to comment.