More than 5 years have passed since last update.

BackstopJSとは

Posted at 2019-10-07

こんにちは
未来電子という会社でインターンをさせてもらっているものです。
まだ経験が浅いため、間違いがあるかもしれませんが、お手柔らかにお願いします。

今回はBackstopJSについて備忘録として書きます。

BackstopJSとは変更前後のスクリーンショットの差分を抽出してテストするvisual regression testです。
（visual regression testとは視覚的に回帰してテストするということです。）

普通UIの表示崩れなどが起こったときなどはtemplatesを見ることによって解決していました。
しかしBackstopJSはスクリーンショットで差分を検出できるため、templatesを見なくても良くなるのです。
そのためUIをチェックするときに非常に便利です。

インストール方法、使い方

$ npm install -g backstopjsでインストールできます。

$ backstop init
で初期化します。

次に
$ yarn storybook
でタブを増やし
$ yarn spec:visual
でスクリーンショットを取ります。

最後に
$ yarn test:visual
で再度スクリーンショットを取り、差分をテストすることができます。

異なる部分があればエラーが表示されます。