これは FOLIO アドベントカレンダー2018 の23日目の記事です。 さて、昨日の@minodiskの記事でも触れられている通り、FOLIOのWebフロントエンドではStorybookを中心に据えた画像回帰テストを実践しています。 この記事では、FOLIOに画像回帰テストを導入するためにやってきた取り組みについて書いていきます。 大まかなワークフロー画像回帰テストのワークフローを簡単に説明します。 まずは対象となるコンポーネントについてStorybookでStoryを用意します。 StorybookこのStoryからCIで生成されるキャプチャ画像がスナップショットファイルとなります。 さて、仕様変更などによって上記のコンポーネントに変更が生じたとします。
![FOLIOの画像回帰テストの裏側 – Yosuke Kurami – Medium](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed37e50bd817e0a668cddb2ed15e5328ca5ba041/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A880%2F1%2A6F9QHuvVdrPrKg0xcqsaFA.png)