Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master'
Browse files Browse the repository at this point in the history
Pull in new changes from reg-viz/storycap, including the ability to
shard screenshot captures across machines. We anticipate using this
feature to ease the burden placed on individual CircleCI instances,
since screenshot captures can be resource- and time-intensive.
  • Loading branch information
throwandgo committed Oct 3, 2023
1 parent eeb3301 commit 9d97498
Show file tree
Hide file tree
Showing 120 changed files with 29,086 additions and 27,344 deletions.
78 changes: 0 additions & 78 deletions .circleci/config.yml

This file was deleted.

15 changes: 8 additions & 7 deletions .github/workflows/nodejs.yml → .github/workflows/build.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Node.js CI
name: Unit test

on:
push:
Expand All @@ -9,19 +9,20 @@ on:

jobs:
build:
runs-on: ${{ matrix.os }}

strategy:
matrix:
os: [ubuntu-latest, windows-latest]
node-version: [16.x]
os: [ubuntu-latest]
node-version: [18.x]

runs-on: ${{ matrix.os }}

steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'yarn'
- run: yarn install --frozen-lockfile
- run: yarn bootstrap
- run: yarn build
Expand Down
37 changes: 37 additions & 0 deletions .github/workflows/integrated_test.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
name: Integrated Test

on:
push:
branches:
- master
- next
pull_request:

jobs:
test:
runs-on: ubuntu-latest

strategy:
matrix:
example_dir:
- examples/v5-managed-react-legacy-decorator
- examples/v5-simple
- examples/v6-managed-react
- examples/v6-simple
- examples/v6-story-store-v7
- examples/v7-managed-react
- examples/v7-react18

steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 16.x
cache: 'yarn'
- run: yarn install --frozen-lockfile
- run: yarn bootstrap
- run: yarn build
- run: yarn e2e ${{ matrix.example_dir }}
env:
CI: true
32 changes: 32 additions & 0 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
name: publish

on:
push:
tags:
- '*'

jobs:
publish:
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [18.x]

steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'yarn'
- run: yarn install --frozen-lockfile
- run: yarn bootstrap
- name: npm publish
run: |
echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" > ~/.npmrc
npm whoami
yarn deploy:ci
env:
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
CI: true
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,10 @@ typings/


# End of https://www.gitignore.io/api/node
*.tsbuildinfo
.DS_Store
lib/
lib-esm/
__screenshot__
__screenshots__
.reg
32 changes: 24 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
![DEMO](https://raw.githubusercontent.com/reg-viz/storycap/artwork/demo_v2.gif)

[![npm](https://img.shields.io/npm/v/storycap.svg?style=flat-square)](https://www.npmjs.com/package/storycap)
[![CircleCI](https://circleci.com/gh/reg-viz/storycap.svg?style=svg)](https://circleci.com/gh/reg-viz/storycap)

> A [Storybook][storybook] Addon, Save the screenshot image of your stories :camera: via [Puppeteer][puppeteer].
Expand All @@ -32,6 +31,7 @@ It is primarily responsible for image generation necessary for Visual Testing su
- [Multiple PNGs from 1 story](#multiple-pngs-from-1-story)
- [Basic usage](#basic-usage)
- [Variants composition](#variants-composition)
- [Parallelisation across multiple computers](#parallelisation-across-multiple-computers)
- [Tips](#tips)
- [Run with Docker](#run-with-docker)
- [Full control the screenshot timing](#full-control-the-screenshot-timing)
Expand Down Expand Up @@ -246,6 +246,7 @@ interface ScreenshotOptions {
waitImages?: boolean; // default true
omitBackground?: boolean; // default false
captureBeyondViewport?: boolean; // default true
clip?: { x: number; y: number; width: number; height: number } | null; // default null
}
```

Expand All @@ -262,6 +263,7 @@ interface ScreenshotOptions {
- `waitImages`: Deprecated. Use `waitAssets`. If set true, Storycap waits until `<img>` in the story are loaded.
- `omitBackground`: If set true, Storycap omits the background of the page allowing for transparent screenshots. Note the storybook theme will need to be transparent as well.
- `captureBeyondViewport`: If set true, Storycap captures screenshot beyond the viewport. See also [Puppeteer API docs](https://github.com/puppeteer/puppeteer/blob/v13.1.3/docs/api.md#pagescreenshotoptions).
- `clip`: If set, Storycap captures only the portion of the screen bounded by x/y/width/height.

### type `Variants`

Expand All @@ -283,6 +285,7 @@ type Variants = {
waitImages?: boolean;
omitBackground?: boolean;
captureBeyondViewport?: boolean;
clip?: { x: number; y: number; width: number; height: number } | null;
};
};
```
Expand Down Expand Up @@ -358,10 +361,15 @@ Options:
-V, --viewport Viewport. [array] [default: ["800x600"]]
--disableCssAnimation Disable CSS animation and transition. [boolean] [default: true]
--disableWaitAssets Disable waiting for requested assets [boolean] [default: false]
--trace Emit Chromium trace files per screenshot. [boolean] [default: false]
--silent [boolean] [default: false]
--verbose [boolean] [default: false]
--forwardConsoleLogs Forward in-page console logs to the user's console. [boolean] [default: false]
--serverCmd Command line to launch Storybook server. [string] [default: ""]
--serverTimeout Timeout [msec] for starting Storybook server. [number] [default: 20000]
--serverTimeout Timeout [msec] for starting Storybook server. [number] [default: 60000]
--shard The sharding options for this run. In the format <shardNumber>/<totalShards>.
<shardNumber> is a number between 1 and <totalShards>. <totalShards> is the total
number of computers working. [string] [default: "1/1"]
--captureTimeout Timeout [msec] for capture a story. [number] [default: 5000]
--captureMaxRetryCount Number of count to retry to capture. [number] [default: 3]
--metricsWatchRetryCount Number of count to retry until browser metrics stable. [number] [default: 1000]
Expand All @@ -376,11 +384,11 @@ Options:
[string] [default: "{ "args": ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"] }"]
Examples:
storycap http://localshot:9009
storycap http://localshot:9009 -V 1024x768 -V 320x568
storycap http://localshot:9009 -i "some-kind/a-story"
storycap http://localhost:9009
storycap http://localhost:9009 -V 1024x768 -V 320x568
storycap http://localhost:9009 -i "some-kind/a-story"
storycap http://example.com/your-storybook -e "**/default" -V iPad
storycap --serverCmd "start-storybook -p 3000" http://localshot:3000
storycap --serverCmd "start-storybook -p 3000" http://localhost:3000
```

Expand Down Expand Up @@ -456,6 +464,16 @@ The above example generates the following:

**Note:** You can extend some viewports with keys of `viewports` option because the `viewports` field is expanded to variants internally.

### Parallelisation across multiple computers

To process more stories in parallel across multiple computers, the `shard` argument can be used.

The `shard` argument is a string of the format: `<shardNumber>/<totalShards>`. `<shardNumber>` is a number between 1 and `<totalShards>`, inclusive. `<totalShards>` is the total number of computers running the execution.

For example, a run with `--shard 1/1` would be considered the default behaviour on a single computer. Two computers each running `--shard 1/2` and `--shard 2/2` respectively would split the stories across two computers.

Stories are distributed across shards in a round robin fashion when ordered by their ID. If a series of stories 'close together' are slower to screenshot than others, they should be distributed evenly.

## Tips

### Run with Docker
Expand Down Expand Up @@ -530,11 +548,9 @@ You can change search channel with `--chromiumChannel` option or set executable
Storycap is tested with the followings versions:

- Simple mode:
- [x] Storybook v4.x
- [x] Storybook v5.x
- [x] Storybook v6.x
- Managed mode:
- [x] Storybook v4.x
- [x] Storybook v5.x
- [x] Storybook v6.x

Expand Down
4 changes: 2 additions & 2 deletions e2e.sh
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ function run() {
echo ""
}

total=${CIRCLE_NODE_TOTAL:-1}
current_idx=${CIRCLE_NODE_INDEX:-0}
total=${NODE_TOTAL:-1}
current_idx=${NODE_INDEX:-0}

rm -rf __screenshots__
mkdir -p __screenshots__/examples
Expand Down
5 changes: 0 additions & 5 deletions examples/v4-managed-react/.storybook/addons.js

This file was deleted.

15 changes: 0 additions & 15 deletions examples/v4-managed-react/.storybook/config.js

This file was deleted.

Loading

0 comments on commit 9d97498

Please sign in to comment.