2019静的サイトを作っていて結構思うことなのですが、こういうこと↓が結構あります。「コンポーネント変更したら別のページでも使われているの知らなくて崩れちゃった」これらを回避するために、デプロイする前に全ページ確認する作業をやらなくてはいけません。これはかなり面倒です。サイト全体のスクショを開発前と開発後で差分を抽出して、意図しない見た目の変更をキャッチできるようにすれば確認する手間が減ります。そんな手間を省くためにサイト全体のスクリーンショットの差分を取得できる環境を作ってみました。現在のサイトのスクリーンショットを保存するpuppeteerでスクリーンショットは下記の流れで撮ります。page.screenshot()でスクリーンショットを保存するbrowser.close()でブラウザを終了する今回はスクリーンショットを撮るためだけのこういうクラスを作りました。browser.newPageではなくcontext.newPageを使っています。これはブラウザキャッシュを効かせないようにするためにシークレットモードを使用するためにbrowser.createIncognitoBrowserContext()を使っているからです。}}保存する今回はローカルに起動したサイトのトップページを保存します。./regression-test/screenshots配下に保存されます。ssSaver.close();};save();実行はts-nodeを使います。./regression-test/save-screenshots.ts試しにブログトップを保存このブログのトップを試しに保存してみました。縦に長いのでここに置いてあります。画像の差分を取るresemblejsという画像を比較してくれるライブラリがあるのでそれを使います。resemblejs画像の差分を取得するスクリプト差分情報のとり方はresemble(image1).compareTo(image2)でCompareResultが非同期で渡ってきます。比較する画像のパスと差分画像のファイル名を引数に、非同期で差分情報を返す関数を作成しました。});};差分を取る今回はトップページの差分を取ります。差分がなければ新しい画像と差分画像は削除されるようにしました。ssSaver.close();};diffScreenshot();実行はts-nodeを使用します。./regression-test/diff-screenshots.tsこのブログで試してみた試しにこの記事のデプロイ前後の差分をとってみました。差分があるところはピンクになります。いい感じにできたのではないでしょうか。CIと組み合わせてプルリクエストごとにテストが走るともっと良いですね。差分画像ソースコードここまでのソースコードはここにあります。kwst.site.。