VRTを導入してみた
今回のお話のサイト
コンポーネントのディレクトリ構成をリファクタリングしようと思ったのですが
変更範囲が大きいので表示が崩れていないかを確認する方法が欲しいと思っていました。
手動で確認するのは限界があるので
このタイミングで導入することにしました。
VRTとは
VRT（Visual Regression Testing）は
スクリーンショットを撮影して以前の画像と比較することで
見た目の変化を自動で検知するテスト手法です。
コードの変更によって意図せずスタイルが崩れていないかを
自動でチェックしてくれるので
リファクタリングや大きな変更のときに特に役立ちます。
「動いてるから大丈夫」ではなく
「見た目も変わっていないことを確認できる」というのがポイントです。
技術選定
VRTのツールはいくつか選択肢がありました。
StorybookとStorycapを組み合わせる方法を前職でやっていたので
こちらを試そうと思いましたが思ったより導入コストが高そうだったので、
まずはPlaywrightでシンプルにページ単位のスクリーンショット比較から始めることにしました。
実装したこと
Playwrightをインストールしてスクリーンショットを撮影するテストを作成しました。
撮影対象はトップページのみで
- PCサイズ（Desktop Chrome）
- スマホサイズ（iPhone 13）
の2パターンで確認しています。
最初はページ全体を撮影しようとしたんですが
スクロールアニメーションの影響で下の方が表示されない問題がありました。
原因を調べたところ framer-motion の whileInViewを使っていたためのようで
スクロールしないと要素が表示されない状態になっていたからです。
これをきっかけにアニメーションをブラウザ標準のIntersection Observer APIを使った
カスタムフック useInView を作成し置き換えました。
置き換えた際にprefers-reduced-motionにも対応したことで
VRT撮影時にアニメーションを無効化できるようになり
ページ全体の撮影が可能になりました。
またGoogleマップのiframeは毎回微妙に表示が変わるので
マスク処理で差分検知から除外しています。
やってみて
実際に使ってみると表示崩れの自動検知はできるようになりました。
リファクタリング後も見た目が変わっていないことを確認できたので導入できてよかったしてよかったです。