Webページの見た目の差分を比較・抽出するツールを作った

Webページの開発環境と本番環境の見た目を比較するツールを作りました。 GitHubのリポジトリはこちら はじめに なぜこのツールを作ったか 数百ページに及ぶリファクタリングを行った際に、各ページのレイアウトに影響が出ていないか目視で検証するのが大変だったことから、このツールを作りました。 当時は、開発環境と本番環境のWebページをブラウザで並べて表示し、タブを切り替えて差異がないか目視で確認していました。コンテンツ量が多く何度もスクロールしながら確認しなければならないページでは見落としが起きないように集中力を保つ必要があり、100ページ以上の確認には3時間近くもかかっている状況でした。 全ページの確認が完了するまでに時間がかかりすぎることや、見落としのリスクもある方法を改善したいとツールを探したのですが希望に合うものが見つからず、自作することにしました。 レイアウトを比較して差がある場合