{"_id":"@beisen/storybook-chrome-screenshot","_rev":"3-65703d863c061a757e7ac40b2cff2fd3","name":"@beisen/storybook-chrome-screenshot","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@beisen/storybook-chrome-screenshot","version":"0.0.1","description":"A Storybook addon, Save the screenshot image of your stories! via puppeteer.","main":"lib/index.js","types":"lib/index.d.ts","bin":{"storybook-chrome-screenshot":"lib/cli.js"},"scripts":{"build":"tsc","test":"npm run test:lint && npm run test:unit && npm run test:e2e","test:lint":"tslint \"src/**/*.ts\" \"src/**/*.tsx\"","test:unit":"jest","test:e2e":"bash scripts/e2e.sh","test:watch":"npm run test:unit -- --watch","clean":"rm -rf lib","prebuild":"npm run clean","prescreenshot":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/tsuyoshiwada/storybook-chrome-screenshot.git"},"author":{"name":"tsuyoshiwada"},"license":"MIT","bugs":{"url":"https://github.com/tsuyoshiwada/storybook-chrome-screenshot/issues"},"homepage":"https://github.com/tsuyoshiwada/storybook-chrome-screenshot#readme","files":["lib","CHANGELOG.md","README.md","LICENSE","package.json","register.js"],"keywords":["storybook","addon","puppeteer","chrome","screenshot","capture","visual-testing"],"devDependencies":{"@storybook/addon-backgrounds":"^3.4.0","@storybook/addon-knobs":"^3.4.0","@storybook/react":"^3.4.0","@types/enzyme":"^3.1.9","@types/enzyme-adapter-react-16":"^1.0.2","@types/jest":"^22.2.2","@types/node":"^9.6.1","@types/react":"16.1.0","@types/react-dom":"^16.0.4","babel-core":"^6.26.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","jest":"^22.4.3","react":"^16.3.0","react-dom":"^16.3.0","react-test-renderer":"^16.3.0","tslint":"^5.9.1","tslint-react":"^3.5.1","typescript":"^2.8.1"},"dependencies":{"@types/commander":"^2.12.2","@types/imagesloaded":"^4.1.1","@types/lodash":"^4.14.106","@types/log-symbols":"^2.0.0","@types/mkdirp":"^0.5.2","@types/node-emoji":"^1.8.0","@types/progress":"^2.0.1","@types/puppeteer":"^1.2.0","@types/query-string":"^5.1.0","@types/sanitize-filename":"^1.1.28","@types/storybook__react":"^3.0.7","babel-polyfill":"^6.26.0","chalk":"^2.3.2","commander":"^2.15.1","imagesloaded":"^4.1.4","is-ci":"^1.1.0","lodash":"^4.17.5","log-symbols":"^2.2.0","mkdirp":"^0.5.1","node-emoji":"^1.8.1","progress":"^2.0.0","puppeteer":"^1.2.0","query-string":"^6.0.0","sanitize-filename":"^1.6.1","util-inspect":"^0.1.8"},"peerDependencies":{"@storybook/addons":">=3.1.0","react":">=15.0.0 || ^16.0.0-alpha","react-dom":">=15.0.0 || ^16.0.0-alpha"},"jest":{"setupFiles":["<rootDir>/jest/setupTests.ts"],"moduleFileExtensions":["ts","tsx","js"],"transform":{"^.+\\.(ts|tsx)$":"<rootDir>/jest/preprocessor.js"},"testMatch":["**/__tests__/*.test.(ts|tsx)"]},"gitHead":"fac8a84ad1088e0752370ed69083bf0e070de0f2","_id":"@beisen/storybook-chrome-screenshot@0.0.1","_npmVersion":"5.8.0","_nodeVersion":"8.11.1","_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"dist":{"integrity":"sha512-rWuwXx4HSBdreS+6eTLpxKXJNO7YCJH2tVwbvBFM5h7IZUJ5aeK61YCfzA8J2Oh1QsLyxuIV4gxQwOqvc7Y/og==","shasum":"662f4fb3e74a412ee6a972d8a7e67e16b143daa0","tarball":"https://registry.npmjs.org/@beisen/storybook-chrome-screenshot/-/storybook-chrome-screenshot-0.0.1.tgz","fileCount":140,"unpackedSize":206684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7o8QCRA9TVsSAnZWagAAc30P/01DpNEJuHTH2WpRj6iQ\nkfPjslLJU2QjOGgHFB2eUMqeORZfmmQmIOSghSAXOne6kTR4pFFSWFTlJcsH\nTbLXWF7xffpS5OhEVBGuNUzcvJjFuKeq0Z53LLQ3aEGEh0Hgd120xa4BIXwU\nn6VyyS/mPU99MpJ7OQq5T0tCEqz7yOY/0/pSzLLaE2zzyYvDTa+R2mWD/Yi2\nxnDpQW9443oE00CTSeyZbvTRC2uNPZYJh9Nbm+Sp4tDgxvNw31Zfdb8OojN6\nTyY0KFHTTCUqv+GwzF6O6sW82idfIsDri4gvONDBbUETxdVAL+ejpZt8SsIr\nAa8qHrbglX/u/MTuzTHi/JRnvnDGxxabxlC0wHo/CgFsP5juGb3RuuqEXi54\nA+3e54BRoTkT8ysOLkj2MPjPUWw5PaXdAOnDeL1FFHb2AX/Mp9k3QbvPippu\nobibg93E3kabI2WM6A9SdcGvnsIMr5sIILrs77n7xtjNdDAXqYcwKOyMRvmL\nXELku2Sd3XADHB2BqltEa5F/cyNA53xD08M5aTJvv5PeqFk/mkQK/WAdfjnW\nCBYKW5t4EUnrP2OUvwU+sYoKcv2gLZC2n6iyPWAIkRKGQaQmFXUk9vxf/pPf\nvy+icHiVqLiAB4E5Azr3lKQ+eRo5QQAiTOVw7SfUV80shtEiWqwmFD7q6uv6\nSqYT\r\n=S7aL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcJeBa/ChmMEJ98sMhQdPoM43S8PfyEJFtIQSR+IvxMAiEA1B/Y/8A+0U0HoK6RDa82/PhdYYch0DksScD4OE9tXyI="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"},{"name":"lgm","email":"it1011@qq.com"},{"name":"neozw","email":"lihegaozhong@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-chrome-screenshot_0.0.1_1525583629574_0.7990989965083912"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-06T05:13:49.514Z","0.0.1":"2018-05-06T05:13:49.678Z","modified":"2022-04-04T18:19:19.057Z"},"maintainers":[{"email":"albertzhang.pro@gmail.com","name":"albert-zhang"},{"email":"liugenpeng@beisen.com","name":"liugenpeng"},{"email":"ci@beisen.com","name":"beisencorp"},{"email":"it1011@qq.com","name":"lgm"},{"email":"lihegaozhong@gmail.com","name":"neozw"}],"description":"A Storybook addon, Save the screenshot image of your stories! via puppeteer.","homepage":"https://github.com/tsuyoshiwada/storybook-chrome-screenshot#readme","keywords":["storybook","addon","puppeteer","chrome","screenshot","capture","visual-testing"],"repository":{"type":"git","url":"git+https://github.com/tsuyoshiwada/storybook-chrome-screenshot.git"},"author":{"name":"tsuyoshiwada"},"bugs":{"url":"https://github.com/tsuyoshiwada/storybook-chrome-screenshot/issues"},"license":"MIT","readme":"# Storybook Chrome Screenshot Addon\n\n[storybook]: https://github.com/storybooks/storybook\n[puppeteer]: https://github.com/GoogleChrome/puppeteer\n\n![DEMO](https://raw.githubusercontent.com/tsuyoshiwada/storybook-chrome-screenshot/artwork/demo.gif)\n\n[![npm](https://img.shields.io/npm/v/storybook-chrome-screenshot.svg?style=flat-square)](https://www.npmjs.com/package/storybook-chrome-screenshot)\n[![CircleCI](https://img.shields.io/circleci/project/github/tsuyoshiwada/storybook-chrome-screenshot/master.svg?style=flat-square)](https://circleci.com/gh/tsuyoshiwada/storybook-chrome-screenshot)\n[![David](https://img.shields.io/david/tsuyoshiwada/storybook-chrome-screenshot.svg?style=flat-square)](https://david-dm.org/tsuyoshiwada/storybook-chrome-screenshot)\n\n> A [Storybook][storybook] Addon, Save the screenshot image of your stories :camera: via [Puppeteer][puppeteer].\n\n`storybook-chrome-screenshot` takes a screenshot and saves it.  \nIt is primarily responsible for image generation necessary for Visual Testing such as `reg-viz`.\n\n\n\n\n## Table of Contents\n\n* [Features](#features)\n* [How it works](#how-it-works)\n* [Getting Started](#getting-started)\n    - [Installation](#installation)\n    - [Register Addon](#register-addon)\n    - [Register initialization process](#register-initialization-process)\n    - [Setup your stories](#setup-your-stories)\n        - [React](#react)\n        - [Angular](#angular)\n        - [Vue.js](#vuejs)\n    - [Run `storybook-chrome-screenshot` Command](#run-storybook-chrome-screenshot-command)\n    - [Support for addDecorator](#support-for-adddecorator)\n* [API](#api)\n    - [initScreenshot()](#initscreenshot)\n    - [withScreenshot(options = {})](#withscreenshotoptions--)\n    - [setScreenshotOptions(options = {})](#setscreenshotoptionsoptions--)\n    - [getScreenshotOptions()](#getscreenshotoptions)\n* [Command Line Options](#command-line-options)\n* [Tips](#tips)\n    - [Disable component animation](#disable-component-animation)\n* [Examples](#examples)\n* [TODO](#todo)\n* [Contribute](#contribute)\n    - [Development](#development)\n        - [`npm run test`](#npm-run-test)\n        - [`npm run build`](#npm-run-build)\n* [License](#license)\n\n\n\n\n## Features\n\n* :camera: Take screenshots of each stories. via [Puppeteer][puppeteer].\n* :rocket: Provide flexible screenshot shooting options.\n* :tada: Supports the following framework / View framework.\n    - [React](https://github.com/facebook/react/)\n    - [Angular](https://github.com/angular/angular)\n    - [Vue.js](https://github.com/vuejs/vue)\n\n\n\n## How it works\n\n`storybook-chrome-screenshot` executes [Storybook][storybook] in a child process and accesses the launched page using [Puppeteer][puppeteer]. It is a very simple mechanism.  \nFor that reason, you can easily shoot screenshots by simply creating a story that works with the browser.\n\n\n\n\n## Getting Started\n\nIt is very easy to introduce `storybook-chrome-screenshot` in your project.\n\n\n### Installation\n\nFirst install `storybook-chrome-screenshot`.\n\n```bash\n$ npm install --save-dev storybook-chrome-screenshot\n```\n\n> **Note:** Please do not use globally but let it operate locally.\n\n\n### Register Addon\n\nNext, register Addon.\n\n**.storybook/addons.js**\n\n```javascript\n// Other addons...\nimport 'storybook-chrome-screenshot/register';\n```\n\n\n### Register initialization process\n\nAdd [initScreenshot](#initscreenshot) decorator. It has to be **before** the first [withScreenshot](#withscreenshotoptions--) decorator. Addon uses it to catch the finish of the components' rendering.\n\n**Example: .storybook/config.js**\n\n```javascript\nimport { addDecorator } from '@storybook/react';\nimport { initScreenshot } from 'storybook-chrome-screenshot';\n\naddDecorator(initScreenshot());\n```\n\n\n### Setup your stories\n\nCreate a story with [withScreenshot](#withscreenshotoptions--).\n\n\n#### React\n\n```javascript\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { withScreenshot } from 'storybook-chrome-screenshot';\nimport Button from './Button';\n\nstoriesOf('Button', module)\n  .add('with text',\n    withScreenshot()(() => (\n      <Button>Text</Button>\n    ))\n  );\n```\n\n\n#### Angular\n\nThis function works well even if you use Angular:\n\n```javascript\nimport { storiesOf } from '@storybook/angular';\nimport { withScreenshot } from 'storybook-chrome-screenshot';\nimport { MyButtonComponent } from '../src/app/my-button/my-button.component';\n\nstoriesOf('Button', module)\n  .add('with custom label',\n    withScreenshot()(() => ({\n      component: MyButtonComponent,\n      props: {\n        text: 'Text',\n      },\n    }))\n  );\n```\n\n\n#### Vue.js\n\nOf course, Vue.js works the same way:\n\n```javascript\nimport { storiesOf } from '@storybook/vue';\nimport { withScreenshot } from 'storybook-chrome-screenshot';\nimport MyButton from './Button.vue';\n\nstoriesOf('MyButton', module)\n  .add('pre-registered component',\n    withScreenshot()(() => ({\n      template: '<my-button :rounded=\"true\">A Button with rounded edges</my-button>',\n    }))\n  )\n  .add('template + component',\n    withScreenshot()(() => ({\n      components: { MyButton },\n      template: '<my-button>Button rendered in a template</my-button>',\n    }))\n  )\n  .add('render + component',\n    withScreenshot()(() => ({\n      render: h => h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']),\n    }))\n  );\n```\n\n\n### Run `storybook-chrome-screenshot` Command\n\nOpen `package.json` and add a `screenshot` script for run `storybook-chrome-screenshot` command.\n\n```json\n{\n  \"scripts\": {\n    \"screenshot\": \"storybook-chrome-screenshot -p 9001 -c .storybook\"\n  }\n}\n```\n\n> **Note:** Parameters such as ports and configuration files should match the parameters of the `Storybook` you are currently using.\n\nAfter that, just run the `npm run screenshot` command, shotting a component wrapped with [withScreenshot](#withscreenshotoptions--) and save the images.\n\n```bash\n$ npm run screenshot\n```\n\n\n### Support for addDecorator\n\nOr by using `addDecorator()`, it is possible to shotting all the decorated stories.\n\n```javascript\nimport { storiesOf } from '@storybook/react';\nimport { withScreenshot } from 'storybook-chrome-screenshot';\n\nstoriesOf('Button', module)\n  .addDecorator(withScreenshot({\n    /* ...options */\n  }))\n  .add('with primary', () => (\n    <Button primary>Primary Button</Button>\n  ))\n  .add('with secondary', () => (\n    <Button secondary>Secondary Button</Button>\n  ));\n```\n\n\n\n\n## API\n\n\n### initScreenshot()\n\nThis decorator has to be added to every story. Addon uses it to understand when story's rendering is finished.\n\n**Important!.** `initScreenshot` has to be added before the first [withScreenshot](#withscreenshotoptions--).\n\n**Example: .storybook/config.js**\n\n```javascript\nimport { addDecorator } from '@storybook/react';\nimport { initScreenshot } from 'storybook-chrome-screenshot';\n\naddDecorator(initScreenshot());\n```\n\n\n### withScreenshot(options = {})\n\nNotify [Puppeteer][puppeteer] of the story wrapped in this function and let it recognize it as the target of the screenshot.\n\nThe following objects of `options` can be specified.\n\n```javascript\n{\n  namespace: 'global',    // namespace for your screenshots. It is using in the filenames, e.g.  Button-with-primary_global.png\n  delay: 0,               // Delay milliseconds when shooting screenshots\n  viewport: {             // Browser's viewport when shooting screenshots. (See: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetviewportviewport)\n    width: 1024,\n    height: 768,\n    deviceScaleFactor: 1,\n    isMobile: false,\n    hasTouch: false,\n    isLandscape: false,\n  },\n}\n```\n\nAlso, By passing the `array` to `viewport`, you can easily shoot multiple Viewports.\n\n```javascript\n{\n  viewport: [\n    // Mobile\n    {\n      width: 300,\n      height: 420,\n      isMobile: true,\n      hasTouch: true,\n    },\n    // Tablet\n    {\n      width: 768,\n      height: 800,\n      isMobile: true,\n      hasTouch: true,\n    },\n    // Desktop\n    {\n      width: 1024,\n      height: 768,\n    },\n  ],\n}\n```\n\n\n### setScreenshotOptions(options = {})\n\nSets the default value of the option used with [withScreenshot()](#withscreenshotoptions--).  \nIt is useful for changing Viewport of all stories.\n\n**Example: .storybook/config.js**\n\n```javascript\nimport { setScreenshotOptions } from 'storybook-chrome-screenshot';\n\nsetScreenshotOptions({\n  viewport: {\n    width: 768,\n    height: 400,\n    deviceScaleFactor: 2,\n  },\n});\n```\n\n\n### getScreenshotOptions()\n\nGet the current option used with [withScreenshot()](#withscreenshotoptions--).\n\n```javascript\nimport { getScreenshotOptions } from 'storybook-chrome-screenshot';\n\nconsole.log(getScreenshotOptions());\n// => Current screenshot options...\n```\n\n\n\n\n## Command Line Options\n\n```bash\n$ $(npm bin)/storybook-chrome-screenshot --help\n\n  Usage: storybook-chrome-screenshot [options]\n\n\n  Options:\n\n    -V, --version                 output the version number\n    -p, --port [number]           Storybook server port. (default: 9001)\n    -h, --host [string]           Storybook server host. (default: localhost)\n    -s, --static-dir <dir-names>  Directory where to load static files from.\n    -c, --config-dir [dir-name]   Directory where to load Storybook configurations from. (default: .storybook)\n    -o, --output-dir [dir-name]   Directory where screenshot images are saved. (default: __screenshots__)\n    --parallel [number]           Number of Page Instances of Puppeteer to be activated when shooting screenshots. (default: 4)\n    --filter-kind [regexp]        Filter of kind with RegExp. (example: \"Button$\")\n    --filter-story [regexp]       Filter of story with RegExp. (example: \"^with\\s.+$\")\n    --inject-files <file-names>   Path to the JavaScript file to be injected into frame. (default: )\n    --browser-timeout [number]    Timeout milliseconds when Puppeteer opens Storybook. (default: 30000)\n    --silent                      Suppress standard output.\n    --debug                       Enable debug mode.\n    -h, --help                    output usage information\n```\n\n\n\n\n## Tips\n\n\n### Disable component animation\n\nWhen shooting screenshots, you may want to disable component animation. In this case it is easiest to inject Script using the `--inject-files` option.\n\nYou can create `./disable-animation.js` and disable CSS Animation with the next snippet.\n\n```javascript\n(() => {\n  const $iframe = document.getElementById('storybook-preview-iframe');\n  const $doc = $iframe.contentDocument;\n  const $style = $doc.createElement('style');\n\n  $style.innerHTML = `* {\n    transition: none !important;\n    animation: none !important;\n  }`;\n\n  $doc.body.appendChild($style);\n})();\n```\n\nPass the created file to the `--inject-files` option.\n\n```bash\n$ $(npm bin)/storybook-chrome-screenshot --inject-files ./disable-animation.js [...more options]\n```\n\n\n\n\n## Examples\n\n* [tsuyoshiwada/scs-with-reg-viz](https://github.com/tsuyoshiwada/scs-with-reg-viz) : A example repository of visual regression test using storybook-chrome-screenshot and reg-suit.\n* [Quramy/angular-sss-demo](https://github.com/Quramy/angular-sss-demo) : Storybook, Screenshot, and Snapshot testing for Angular\n* [viswiz-io/viswiz-tutorial-storybook](https://github.com/viswiz-io/viswiz-tutorial-storybook) : A tutorial repository for setting up visual regression testing with VisWiz.io\n\n\n\n\n## TODO\n\nThe following tasks remain. Contributes are welcome :smiley:\n\n* [x] Global Options.\n* [x] ~~Shooting at an arbitrary timing.~~ (No plan for support)\n* [x] Support for [Angular](https://angular.io).\n* [x] Support for [Vue.js](https://github.com/vuejs/vue).\n* [ ] More unit testing.\n\n\n\n\n## Contribute\n\n1. Fork it!\n1. Create your feature branch: `git checkout -b my-new-feature`\n1. Commit your changes: `git commit -am 'Add some feature'`\n1. Push to the branch: `git push origin my-new-feature`\n1. Submit a pull request :muscle:\n\nBugs, feature requests and comments are more than welcome in the [issues](https://github.com/tsuyoshiwada/storybook-chrome-screenshot/issues).\n\n\n### Development\n\nWe will develop using the following npm scripts.\n\n\n#### `npm run test`\n\nWe will run Lint, unit test, E2E test in order.  \nEach test can also be executed individually with the following command.\n\n```bash\n# Run TSLint\n$ npm run test:lint\n\n# Run unit test using Jest\n$ npm run test:unit\n\n# Run E2E test\n$ npm run test:e2e\n\n# Run unit tests in watch mode\n$ npm run test:watch\n```\n\n\n#### `npm run build`\n\nCompile the source code written in TypeScript.\n\n\n\n\n## License\n\n[MIT © tsuyoshiwada](./LICENSE)\n","readmeFilename":"README.md"}