先日、Storybook のストーリーを、Puppeteer を使って自動でスクリーンショットを撮影する Addon を作りました。まだ React のサポートのみだったり、API がまだ不十分だったりしますが、簡単に使い方と仕組みについて紹介していきたいと思います。 はじめにまず、Puppeteer が何者かという点は、以下の記事が大変参考になるため、ここでは触れません。 —headless 時代の本命? Chrome を Node.js から操作するライブラリ puppeteer について - Qiita 今回作った Addon は、上記 Puppeeer を使って、任意のストーリーのスクリーンショットを取るためのものになります。 スクリーンショットを取るためのモチベーションは色々と考えられますが、ここでは開発時に使用している既存のストーリーを活用して、最小限の労力で Visual T
![Puppeteerを使ったStorybookの自動スクリーンショット撮影用のアドオンを作った - wadackel.me](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbe3fa385588183f62161408d5bcc3e8f9f9329f/height=288;version=1;width=512/https%3A%2F%2Fblog.wadackel.me%2F2017%2Fstorybook-chrome-screenshot%2Fogp.png)