ビジュアルリグレッションテストのすすめ

15931 ワード

日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない(と思っていた)ページで表示が崩れてしまったことってありませんか?

私はたびたび経験があります。

毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。
自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。

どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。

ビジュアルリグレッションテストとは

ざっくりいうと「見た目の比較」をするテストのことです。
変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。

どうやって使うの

ビジュアルリグレッションテストを導入するための方法はいくつかあるのですが
今回は下記の2つを採用して実装しました。

  • Playwright
    Webテストと自動化のためのフレームワークです。
    ローカルでChromium、Firefox、WebKitを使用し様々なブラウザ操作をすることができます。
    今回はページの表示、スクリーンショットの撮影を担当しています。