A Storybook Addon, Save the screenshot image of your stories 📷 via Puppeteer.
storybook-chrome-screenshot
takes a screenshot and saves it.
It is primarily responsible for image generation necessary for Visual Testing such as reg-viz
.
storybook-chrome-screenshot
executes Storybook in a child process and accesses the launched page using Puppeteer. It is a very simple mechanism.
For that reason, you can easily shoot screenshots by simply creating a story that works with the browser.
It is very easy to introduce storybook-chrome-screenshot
in your project.
First install storybook-chrome-screenshot
.
$ npm install --save-dev storybook-chrome-screenshot
Note: Please do not use globally but let it operate locally.
Next, register Addon.
.storybook/addons.js
// Other addons...
import 'storybook-chrome-screenshot/register';
Create a story with withScreenshot.
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withScreenshot } from 'storybook-chrome-screenshot';
import Button from './Button';
storiesOf('Button', module)
.add('with text',
withScreenshot()(() => (
<Button>Text</Button>
))
);
Open package.json
and add a screenshot
script for run storybook-chrome-screenshot
command.
{
"scripts": {
"screenshot": "storybook-chrome-screenshot -p 9001 -c .storybook"
}
}
Note: Parameters such as ports and configuration files should match the parameters of the
Storybook
you are currently using.
After that, just run the npm run screenshot
command, shotting a component wrapped with withScreenshot and save the images.
$ npm run screenshot
Or by using addDecorator()
, it is possible to shotting all the decorated stories.
import { withScreenshot } from 'storybook-chrome-screenshot';
storiesOf('Button', module)
.addDecorator(withScreenshot({
/* ...options */
}))
.add('with primary', () => (
<Button primary>Primary Button</Button>
))
.add('with secondary', () => (
<Button secondary>Secondary Button</Button>
));
Notify Puppeteer of the story wrapped in this function and let it recognize it as the target of the screenshot.
The following objects of options
can be specified.
{
delay: 0, // Delay milliseconds when shooting screenshots
viewport: { // Browser's viewport when shooting screenshots. (See: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetviewportviewport)
width: 1024,
height: 768,
deviceScaleFactor: 1,
isMobile: false,
hasTouch: false,
isLandscape: false,
},
}
Also, By passing the array
to viewport
, you can easily shoot multiple Viewports.
{
viewport: [
// Mobile
{
width: 300,
height: 420,
isMobile: true,
hasTouch: true,
},
// Tablet
{
width: 768,
height: 800,
isMobile: true,
hasTouch: true,
},
// Desktop
{
width: 1024,
height: 768,
},
],
}
Sets the default value of the option used with withScreenshot()
.
It is useful for changing Viewport of all stories.
Example: .storybook/config.js
import { setScreenshotOptions } from 'storybook-chrome-screenshot';
setScreenshotOptions({
viewport: {
width: 768,
height: 400,
deviceScaleFactor: 2,
},
});
Get the current option used with withScreenshot()
.
import { getScreenshotOptions } from 'storybook-chrome-screenshot';
console.log(getScreenshotOptions);
// => Current options...
$ $(npm bin)/storybook-chrome-screenshot --help
Usage: storybook-chrome-screenshot [options]
Options:
-V, --version output the version number
-p, --port [number] Storybook server port (Default 9001)
-h, --host [string] Storybook server host (Default "localhost")
-s, --static-dir <dir-names> Directory where to load static files from
-c, --config-dir [dir-name] Directory where to load Storybook configurations from (Default ".storybook")
-o, --output-dir [dir-name] Directory where screenshot images are saved (Default "__screenshots__")
--parallel [number] Number of Page Instances of Puppeteer to be activated when shooting screenshots (Default 4)
--filter-kind [regexp] Filter of kind with RegExp. (Example "Button$")
--filter-story [regexp] Filter of story with RegExp. (Example "^with\s.+$")
--browser-timeout [number] Timeout milliseconds when Puppeteer opens Storybook. (Default 30000)
--silent Suppress standard output
--debug Enable debug mode.
-h, --help output usage information
The following tasks remain. Contributes are welcome 😃
- Global Options.
-
Shooting at an arbitrary timing.(No plan for support) - Support for Vue.js.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request 💪
Bugs, feature requests and comments are more than welcome in the issues.
We will develop using the following npm scripts.
Launch the stories in the example
directory.
You can access Storybook by opening http://localhost:9001 in your browser.
Shotting a story in the example
directory and save it in the __screenshots__
directory.
Transpile the source code of the src
directory using babel.
It monitors the source code in the src
directory and transpiles it if there is a change.