VRTツールのダークホース Lost Pixelを紹介したい
by
AijiUejima
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
© 2024 Ateam Inc. VRTツールのダークホース Lost Pixelを紹介したい ビジュアルリグレッションテストツール4選!ユーザーが語る各ツールのメリット #VRT4選
Slide 2
Slide 2 text
© 2024 Ateam Inc. ⾃⼰紹介 2 ⾃⼰紹介 2 エイチームグループで リードエンジニアをしています 現在は社内⽤のコンポーネントライブラリの開発 Reactコンポーネント開発やテストの記述、 CI/CDのメンテナンスなど。 でも、CSSは全く書けません 🙅 エッジランタイム(CDN)周りの開発などもしてい て、⼀⾒するとフロントエンドの⼈ですが、 元々はバックエンドの⼈です。
Slide 3
Slide 3 text
© 2024 Ateam Inc. アジェンダ 1. 🔎 Lost Pixel の特徴 2. 👍 Lost Pixel の推しポイント 3. 🥺 Lost Pixel のイマイチなポイント 4. 🧪 実際の運⽤について 3
Slide 4
Slide 4 text
© 2024 Ateam Inc. はじめに 今⽇の発表は、昨年末に書いたZennの記事がベースになっています。 4 設定値やコードなどはこちらに載っています。気になる⽅はぜひ読んでみてください。
Slide 5
Slide 5 text
© 2024 Ateam Inc. 🔎 Lost Pixelの特徴 5
Slide 6
Slide 6 text
© 2024 Ateam Inc. Lost Pixelの特徴その1⃣ スナップショットと差分検査がオールインワンなツール 6 スナップショット ツール 🎭 Playwrightベース - マルチブラウザ対応 - Playwrightを書く必要はない (書いてカスタムもできる) 差分検査 ツール pixelmatch or ODIFF - 選択可能 1コマンド(`npx lost-pixel`)でスナップショット‧差分検査⼀気通貫して実⾏される
Slide 7
Slide 7 text
© 2024 Ateam Inc. Lost Pixelの特徴その2⃣ スナップショットの対応ツールが豊富 7 Ladle Storybook Histoire - 撮影時にサーバ起動が不要 - 細かい設定不要で 各コンポーネントを撮影 カスタムページ URL指定で⾃動撮影 任意に組み合わせて実⾏可能
Slide 8
Slide 8 text
© 2024 Ateam Inc. Lost Pixelの特徴その3⃣ OSSモードとプラットフォームモード 8 ベースライン(⽐較元)画像の管理⽅法が異なる OSSモード(無料) - ベースラインは⾃⾝のリポジトリで管理 - キャプチャ画像がgit管理対象になる - レビューはPR上で画像の差分を⾒て⾏う - CIを⾃分で組む必要がある プラットフォームモード(有料) - ベースラインは専⽤のWebサービス上で管理 - レビュー‧承認もそのサービス上で⾏う - プレビューツールが充実 - Approve/DeclineがPRに⾃動反映される - 7,000ショット/⽉までのフリープラン有り
Slide 9
Slide 9 text
© 2024 Ateam Inc. 👍 個⼈的な推しポイント 9
Slide 10
Slide 10 text
© 2024 Ateam Inc. 推しポイント1⃣: VRTの設定を動的に⽣成できる 🎰 10 設定ファイル(lostpixel.config.ts)はJS/TSで記述ができる 撮影対象のページのリストや、各ページの撮影時の設定などを実⾏時に動的に⽣成できる データベースでVRTの対象を管理しておき、 「⾮エンジニア以外もシナリオの追加‧変更ができる」みたいなことも実現可能
Slide 11
Slide 11 text
© 2024 Ateam Inc. 推しポイント2⃣: 撮影前のアクションの定義 🎬 11 Playwrightの要領で撮影前の任意の処理を設定できる pageオブジェクトを参照できるので細かな操作が可能 - フォームにデータを⼊⼒したり - VRTの対象にしたくない要素を消したり - 任意の要素までスクロールしたり (対象がStorybookの場合は、`play`で定義した任意 の操作も実⾏される) ← URLパラメータに応じて任意の操作を⾏う例
Slide 12
Slide 12 text
© 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の場合は各ストーリーの定義オブジェクトに 書けるで、管理もしやすい
Slide 13
Slide 13 text
© 2024 Ateam Inc. 推しポイント4⃣: マスク機能 😷 13 ランダムなコンテンツや、外部リソースのためにコントロールが できない要素が含まれる場合に便利 CSSセレクタで指定できる - #my-id, .my-class, [data-testid="my-banner"], etc... しきい値同様、各ページ‧シナリオ毎に設定が可能 撮影時に任意の要素をマスクキングして撮影できる
Slide 14
Slide 14 text
© 2024 Ateam Inc. 🥺 イマイチなポイント 14
Slide 15
Slide 15 text
© 2024 Ateam Inc. ドキュメントやナレッジが不⼗分 📝 15 公式のドキュメントの情報量が少ない ちなみに、`--help`オプションも整備されていない 凝ったことをしなければ公式のドキュメントで⾜りるが、 本格的に運⽤していこうとすると、 ソースコードを確認することになる 成⻑中のライブラリあるあるだが、 ⼀緒に成⻑させていくつもりで利⽤する気概が必要💪
Slide 16
Slide 16 text
© 2024 Ateam Inc. 差分のプレビューに難あり 📈📉 16 OSSモードでの差分のプレビュー機能が充実していない baseline(before) / current(after) / diffの3種類の画像データが⽣成されるのみ diff画像の例 diff単体では原因特定にまでは⾄れないので、 画像⽐較⽤のツールを⾃分で⽤意してするしかない 私のチームではローカルでの確認は諦め、 GithubのPR上で確認するようにした 先⽇Lost Pixelのオーナーと話した際に、ローカル⽤のプレビューツールを作っているといっていたので、今後に期待💊
Slide 17
Slide 17 text
© 2024 Ateam Inc. 🧪 実際の運⽤について 17
Slide 18
Slide 18 text
© 2024 Ateam Inc. 前提 18 - 社内⽤のコンポーネントライブラリプロジェクトで利⽤ - Lost Pixel はOSSモードで利⽤ - VRTは各コンポーネントのビジュアル要件の担保のために実⾏ - 意図しないビジュアルの差がないか - フォーカスやホバー、キーボード操作時のビジュアル変化が要件を満たしているか - Storybookをコンポーネントカタログ兼HowToドキュメントとして利⽤ - ライブラリ利⽤者が⾒やすいよう、「VRTのためのストーリー」は混ぜたくない - VRT⽤にStorybookを分けることもできるが、なるべくなら1つにしたい(管理コスト)
Slide 19
Slide 19 text
© 2024 Ateam Inc. Storybook + カスタムページ 19 ComponentA-1 ComponentA-2 ComponentA.stories.tsx ComponentB-1 ComponentB.stories.tsx ComponentC-1 ComponentC.stories.tsx こんな感じで各コンポーネント毎に Storybookがあるとする
Slide 20
Slide 20 text
© 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 📸 📸 📸 📸
Slide 21
Slide 21 text
© 2024 Ateam Inc. Storybook + カスタムページ 21 ComponentA-1 ComponentA-2 ComponentA.stories.tsx ComponentB-1 ComponentB.stories.tsx ComponentC-1 ComponentC.stories.tsx これらはインタラクティブなパーツで、 操作後の状態も撮影したいとする
Slide 22
Slide 22 text
© 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情報を付与しておく (タグのルールは事前にプロジェクトで決めておく) 実際の例
Slide 23
Slide 23 text
© 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']
Slide 24
Slide 24 text
© 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']
Slide 25
Slide 25 text
© 2024 Ateam Inc. レビューとベースラインのアップデート 💯 25 ビジュアルの変更はベースラインの差分をPRに含めてコードレビュー レビュワーはPR上で、コードの差分とセットでビジュアルの変化を確認できる レビュイーもPRの概要に⼿動でキャプチャした画像を貼らなくてよい
Slide 26
Slide 26 text
© 2024 Ateam Inc. レビューとベースラインのアップデート 💯 26 CIではVRTを実⾏させ、差分が発⽣したらFailにする 差分があるということは‧‧‧ - 意図していないビジュアルの差分が発⽣している - 意図はしているがベースラインのアップデートを忘れている コードを修正するか、ベースラインをアップデートをするか選択して再レビュー 特定のPRコメントにフックし、CIで⾃動的にベースラインのアップデートコミットを ⾏えるようにしておくと便利 ✌(ローカルでVRT実⾏+再コミットの⼿間が省ける) (詳細の設定はZennの記事を⾒てください)
Slide 27
Slide 27 text
© 2024 Ateam Inc. まとめ 27
Slide 28
Slide 28 text
© 2024 Ateam Inc. まとめ 28 1. Lost Pixel はVRTのよくあるつらみを解消してくれる機能‧特徴が豊富 - スナップショット時のマスキング 😷 - ページ‧ストーリー毎に設定値(しきい値等)が設定可能 🤌 - OSSモードなら無料で利⽤できる 🤑 2. カスタマイズ性にも優れている - 撮影対象を動的に⽣成‧管理 🎰 - Playwrightが書ければ撮影前のアクションも設定できる 🎭 3. ドキュメントやナレッジなどはまだまだ⾜りていない - ソースコードを読んで、時にはコントリビュートする気合が必要 🥋
Slide 29
Slide 29 text
© 2024 Ateam Inc. ご清聴ありがとうございました 🙏 29