PuppeteerとResemble.jsを使ったスクショ比較によるピクセル差分テスト - Qiita

やりたいこと Puppeteerによるクローリングでスクリーンショットを取得する。 Resemble.jsを使って時系列による二地点の画像比較を行う。 Resemble.jsは二つの画像の比較を行った上で、差分部分のピクセルに色を付けた比較画像を出力してくれるので、差分ピクセルが一定比率を超えた場合に、Jasmineによるテストが落ちるようにしたい。 背景 「１ピクセルを笑うものは、１ピクセルに泣く。」 Webメディアを運営している会社などでは、１ピクセル程デザインがずれただけで収益が大きく変動すると言うのもよく聞く話ですね。 そこまでシビアな環境にいなくても、例えば、cssをちょこっといじりたい時に、他の画面のどこのデザインに跳ねてるのかが分からず、不安になったりしますよね。そのcssが長い年月をかけて肥大化していて、複雑怪奇に色々なところに当たっていたりするものだったりするとなおさらで