Skip to content

Commit

Permalink
Address feedback
Browse files Browse the repository at this point in the history
- Clarify "Archive Storybook _package_"
- Clarify connection between usage and Storybook screenshots
- Move addition of `archive-storybook` script
  • Loading branch information
kylegach committed Sep 1, 2023
1 parent 9d4530a commit 74e7408
Showing 1 changed file with 15 additions and 4 deletions.
19 changes: 15 additions & 4 deletions e2e-visual-tests.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ The Archive Storyook is passed to Chromatic’s build process, which screenshots

## Installation

Get started by installing the Test Archiver package and the Archive Storybook (a specially-configured Storybook instance that can display your [archives](#what-are-archives)).
Get started by installing the Test Archiver package and the Archive Storybook package (a specially-configured Storybook instance that can display your [archives](#what-are-archives)).

### As a new installation of Storybook

Expand Down Expand Up @@ -90,6 +90,8 @@ The above snippet produces an archive that looks like this in Storybook:

![Published Archive Storybook, showing archive captured in the prior code snippet](img/archive-storybook-basic.png)

(You can view your archives in a published Storybook, [via Chromatic](#using-with-chromatic), or [locally](#running-the-storybook-locally).)

### Manual snapshots

To take manual snapshots at specific points of your tests, you can use the `takeArchive` function inside your test runs:
Expand Down Expand Up @@ -126,6 +128,8 @@ The above snippet produces archives that look like this in Storybook:

![Published Archive Storybook, showing archives captured in the prior code snippet](img/archive-storybook-takeArchive.png)

(You can view your archives in a published Storybook, [via Chromatic](#using-with-chromatic), or [locally](#running-the-storybook-locally).)

## Using with Chromatic

1. **Set up a Chromatic project**
Expand All @@ -142,11 +146,10 @@ The above snippet produces archives that look like this in Storybook:

2. **Run Chromatic on the archives manually**

Add the scripts for running and building the Archive Storybook to your `package.json` (the same `scripts` from which you run your Playwright tests):
Add the script for building the Archive Storybook to your `package.json` (the same `scripts` from which you run your Playwright tests):

```json
"scripts": {
"archive-storybook": "archive-storybook",
"build-archive-storybook": "build-archive-storybook"
}
```
Expand Down Expand Up @@ -249,7 +252,15 @@ First run the E2E tests to generate the latest results:
yarn playwright test # or similar
```

Then you can run the Archive Storybook with the `archive-storybook` command, and visit it like any other Storybook:
Then add the script for running the Archive Storybook to your `package.json` (the same `scripts` from which you run your Playwright tests):

```json
"scripts": {
"archive-storybook": "archive-storybook",
}
```

Now you can run the Archive Storybook with the `archive-storybook` command, and visit it like any other Storybook:

```shell
yarn archive-storybook
Expand Down

0 comments on commit 74e7408

Please sign in to comment.