© 2024 Ateam Inc. VRTツールのダークホース Lost Pixelを紹介したい ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット #VRT4選

© 2024 Ateam Inc. ⾃⼰紹介 2 ⾃⼰紹介 2 エイチームグループで リードエンジニアをしています 󰞵 現在は社内⽤のコンポーネントライブラリの開発 Reactコンポーネント開発やテストの記述、 CI/CDのメンテナンスなど。 でも、CSSは全く書けません 🙅 エッジランタイム(CDN)周りの開発などもしてい て、⼀⾒するとフロントエンドの⼈ですが、 元々はバックエンドの⼈です。

© 2024 Ateam Inc. アジェンダ 1. 🔎 Lost Pixel の特徴 2. 👍 Lost Pixel の推しポイント 3. 🥺 Lost Pixel のイマイチなポイント 4. 🧪 実際の運⽤について 3

© 2024 Ateam Inc. はじめに 今⽇の発表は、昨年末に書いたZennの記事がベースになっています。 4 設定値やコードなどはこちらに載っています。気になる⽅はぜひ読んでみてください。

© 2024 Ateam Inc. 🔎 Lost Pixelの特徴 5

© 2024 Ateam Inc. Lost Pixelの特徴その1⃣ スナップショットと差分検査がオールインワンなツール 6 スナップショット ツール 🎭 Playwrightベース - マルチブラウザ対応 - Playwrightを書く必要はない (書いてカスタムもできる) 差分検査 ツール pixelmatch or ODIFF - 選択可能 1コマンド(`npx lost-pixel`)でスナップショット‧差分検査⼀気通貫して実⾏される

© 2024 Ateam Inc. Lost Pixelの特徴その2⃣ スナップショットの対応ツールが豊富 7 Ladle Storybook Histoire - 撮影時にサーバ起動が不要 - 細かい設定不要で 各コンポーネントを撮影 カスタムページ URL指定で⾃動撮影 任意に組み合わせて実⾏可能

© 2024 Ateam Inc. Lost Pixelの特徴その3⃣ OSSモードとプラットフォームモード 8 ベースライン(⽐較元)画像の管理⽅法が異なる OSSモード(無料) - ベースラインは⾃⾝のリポジトリで管理 - キャプチャ画像がgit管理対象になる - レビューはPR上で画像の差分を⾒て⾏う - CIを⾃分で組む必要がある プラットフォームモード(有料) - ベースラインは専⽤のWebサービス上で管理 - レビュー‧承認もそのサービス上で⾏う - プレビューツールが充実 - Approve/DeclineがPRに⾃動反映される - 7,000ショット/⽉までのフリープラン有り

© 2024 Ateam Inc. 👍 個⼈的な推しポイント 9

© 2024 Ateam Inc. 推しポイント1⃣: VRTの設定を動的に⽣成できる 🎰 10 設定ファイル(lostpixel.config.ts)はJS/TSで記述ができる 撮影対象のページのリストや、各ページの撮影時の設定などを実⾏時に動的に⽣成できる データベースでVRTの対象を管理しておき、 「⾮エンジニア以外もシナリオの追加‧変更ができる」みたいなことも実現可能

© 2024 Ateam Inc. 推しポイント2⃣: 撮影前のアクションの定義 🎬 11 Playwrightの要領で撮影前の任意の処理を設定できる pageオブジェクトを参照できるので細かな操作が可能 - フォームにデータを⼊⼒したり - VRTの対象にしたくない要素を消したり - 任意の要素までスクロールしたり (対象がStorybookの場合は、`play`で定義した任意 の操作も実⾏される) ← URLパラメータに応じて任意の操作を⾏う例

© 2024 Ateam Inc. 🫥 推しポイント3⃣: 細やかな設定 🤌 12 しきい値や待機秒数などのパラメータはページ‧ストーリー毎に設定できる threshold: 0 waitBefore: 0 threshold: 1% waitBefore: 0 threshold: 0.1% waitBefore: 0 threshold: 0 waitBefore: 700ms VRTあるある - 1ページのために必要なしきい値のせいで、他ページの意図しない 差分が検知できなかった - 1つのケースのための待機時間のせいで、全体の実⾏時間が 無駄に増えてしまった - これらを最適化するために時間を溶かしてしまった - (最適化できずVRTがオオカミ少年になってしまった) Lost Pixelではスナップショット毎に設定ができるので、 これらの悩みから開放される Storybookの場合は各ストーリーの定義オブジェクトに 書けるで、管理もしやすい

© 2024 Ateam Inc. 推しポイント4⃣: マスク機能 😷 13 ランダムなコンテンツや、外部リソースのためにコントロールが できない要素が含まれる場合に便利 CSSセレクタで指定できる - #my-id, .my-class, [data-testid="my-banner"], etc... しきい値同様、各ページ‧シナリオ毎に設定が可能 撮影時に任意の要素をマスクキングして撮影できる

© 2024 Ateam Inc. 🥺 イマイチなポイント 14

© 2024 Ateam Inc. ドキュメントやナレッジが不⼗分 📝 15 公式のドキュメントの情報量が少ない ちなみに、`--help`オプションも整備されていない 凝ったことをしなければ公式のドキュメントで⾜りるが、 本格的に運⽤していこうとすると、 ソースコードを確認することになる 成⻑中のライブラリあるあるだが、 ⼀緒に成⻑させていくつもりで利⽤する気概が必要💪

© 2024 Ateam Inc. 差分のプレビューに難あり 📈📉 16 OSSモードでの差分のプレビュー機能が充実していない baseline(before) / current(after) / diffの3種類の画像データが⽣成されるのみ diff画像の例 diff単体では原因特定にまでは⾄れないので、 画像⽐較⽤のツールを⾃分で⽤意してするしかない 私のチームではローカルでの確認は諦め、 GithubのPR上で確認するようにした 先⽇Lost Pixelのオーナーと話した際に、ローカル⽤のプレビューツールを作っているといっていたので、今後に期待💊

© 2024 Ateam Inc. 🧪 実際の運⽤について 17

© 2024 Ateam Inc. 前提 18 - 社内⽤のコンポーネントライブラリプロジェクトで利⽤ - Lost Pixel はOSSモードで利⽤ - VRTは各コンポーネントのビジュアル要件の担保のために実⾏ - 意図しないビジュアルの差がないか - フォーカスやホバー、キーボード操作時のビジュアル変化が要件を満たしているか - Storybookをコンポーネントカタログ兼HowToドキュメントとして利⽤ - ライブラリ利⽤者が⾒やすいよう、「VRTのためのストーリー」は混ぜたくない - VRT⽤にStorybookを分けることもできるが、なるべくなら1つにしたい(管理コスト)

© 2024 Ateam Inc. Storybook + カスタムページ 19 ComponentA-1 ComponentA-2 ComponentA.stories.tsx ComponentB-1 ComponentB.stories.tsx ComponentC-1 ComponentC.stories.tsx こんな感じで各コンポーネント毎に Storybookがあるとする

© 2024 Ateam Inc. Storybook + カスタムページ 20 ComponentA-1 ComponentA-2 ComponentA.stories.tsx ComponentB-1 ComponentB.stories.tsx ComponentC-1 ComponentC.stories.tsx Lost PixelのStorybookショットで⾃動的に デフォルトの状態を撮影 📸 x4 📸 📸 📸 📸

© 2024 Ateam Inc. Storybook + カスタムページ 21 ComponentA-1 ComponentA-2 ComponentA.stories.tsx ComponentB-1 ComponentB.stories.tsx ComponentC-1 ComponentC.stories.tsx これらはインタラクティブなパーツで、 操作後の状態も撮影したいとする

© 2024 Ateam Inc. Storybook + カスタムページ 22 ComponentA-1 ComponentA-2 ComponentA.stories.tsx ComponentB-1 ComponentB.stories.tsx ComponentC-1 ComponentC.stories.tsx tags: ['vrt-hover-[data-testid=ComponentB]'] tags: ['vrt-focus-button-keyboard-Enter'] (data-testid="ComponentB"要素にホバー) (buttonにフォーカスしてエンターキー押下) カスタムページショット⽤にストーリーのオブジェクトにtags情報を付与しておく (タグのルールは事前にプロジェクトで決めておく) 実際の例

© 2024 Ateam Inc. Storybook + カスタムページ 23 ComponentA-1 ComponentA-2 ComponentA.stories.tsx ComponentB-1 ComponentB.stories.tsx ComponentC-1 ComponentC.stories.tsx VRT実⾏時にtagsの情報から 動的にカスタムページリスト(URL)を⽣成するよう 設定ファイルに書いておき、追加撮影 📸 x2 - タグの情報をURLパラメータに変換 - URLパラメータに従って操作するよう 「撮影前のアクション(Playwright)」を設定しておく 📸 📸 tags: ['vrt-hover-[data-testid=ComponentB]'] tags: ['vrt-focus-button-keyboard-Enter']

© 2024 Ateam Inc. Storybook + カスタムページ 24 ComponentA-1 ComponentA-2 ComponentA.stories.tsx ComponentB-1 ComponentB.stories.tsx ComponentC-1 ComponentC.stories.tsx Storybookの`play`や専⽤のスクリプトを書く必要がなく、 ルールに従ってtagsを書くだけで誰でもシナリオを追加できる 📸 📸 📸 📸 📸 tags: ['vrt-hover-[data-testid=ComponentB]'] Storybookショットとカスタムページショット組み合わせて⼀度に複数の状態のVRTができる デフォルトの状態 操作後の状態 📸 tags: ['vrt-focus-button-keyboard-Enter']

© 2024 Ateam Inc. レビューとベースラインのアップデート 💯 25 ビジュアルの変更はベースラインの差分をPRに含めてコードレビュー レビュワーはPR上で、コードの差分とセットでビジュアルの変化を確認できる レビュイーもPRの概要に⼿動でキャプチャした画像を貼らなくてよい

© 2024 Ateam Inc. レビューとベースラインのアップデート 💯 26 CIではVRTを実⾏させ、差分が発⽣したらFailにする 差分があるということは‧‧‧ - 意図していないビジュアルの差分が発⽣している - 意図はしているがベースラインのアップデートを忘れている コードを修正するか、ベースラインをアップデートをするか選択して再レビュー 特定のPRコメントにフックし、CIで⾃動的にベースラインのアップデートコミットを ⾏えるようにしておくと便利 ✌(ローカルでVRT実⾏+再コミットの⼿間が省ける) (詳細の設定はZennの記事を⾒てください)

© 2024 Ateam Inc. まとめ 27

© 2024 Ateam Inc. まとめ 28 1. Lost Pixel はVRTのよくあるつらみを解消してくれる機能‧特徴が豊富 - スナップショット時のマスキング 😷 - ページ‧ストーリー毎に設定値(しきい値等)が設定可能 🤌 - OSSモードなら無料で利⽤できる 🤑 2. カスタマイズ性にも優れている - 撮影対象を動的に⽣成‧管理 🎰 - Playwrightが書ければ撮影前のアクションも設定できる 🎭 3. ドキュメントやナレッジなどはまだまだ⾜りていない - ソースコードを読んで、時にはコントリビュートする気合が必要 🥋

© 2024 Ateam Inc. ご清聴ありがとうございました 🙏 29