Nuxt.jsのサイトにPercyを導入してレンダリング差分を視覚化する - Qiita

はじめに Percy はWebページのレンダリング結果の差分を視覚化して、レビューを可能とするサービスです。GitHubと連携させることで、PRを作る度に所定のブランチ(デフォルトではmaster)との差分を抽出し、その結果をPRのステータスへと反映させることができます。そのため、HTMLのマークアップやCSSなどを変更した際に、意図しないリグレッションが発生していないかどうかをチェックするのに有効です。 例えば、CSSを変更したことによって、一部テキストのフォントカラーが変わったとしましょう。左が変更前、右が変更後です。 Percyを使うと、この両者のレンダリング結果の差分を抽出し、次のように異なる箇所をハイライト表示させることができます。 Percyは 月あたり5000以下のスナップショットであれば無料で利用可能 なので、小規模なプロジェクトであれば導入も難しくありません。そこでこの記