Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VRTツールのダークホース Lost Pixelを紹介したい
Search
AijiUejima
February 21, 2024
Technology
5
2.8k
VRTツールのダークホース Lost Pixelを紹介したい
「ビジュアルリグレッションテストツール4選!ユーザーが語る各ツールのメリット」
https://trident-qa.connpass.com/event/308664/
の登壇資料です。
AijiUejima
February 21, 2024
Tweet
Share
More Decks by AijiUejima
See All by AijiUejima
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
aiji42
7
5.3k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
2.2k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.6k
Cloudflare Fonts試してみた🔤
aiji42
2
760
Hyperdrive試してみた🛸
aiji42
3
1.3k
Workers Browser Rendering API について
aiji42
0
520
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.5k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
910
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
5.8k
Other Decks in Technology
See All in Technology
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
250
Bazel for Ruby (RubyKaigi 2025)
p0deje
0
120
ドキュメント管理の理想と現実
kazuhe
1
230
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
790
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
5.8k
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
190
Road to Go Gem #rubykaigi
sue445
0
940
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
15
5.4k
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
260
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
3
150
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
340
CodePipelineのアクション統合から学ぶAWS CDKの抽象化技術 / codepipeline-actions-cdk-abstraction
gotok365
5
300
Featured
See All Featured
The Language of Interfaces
destraynor
157
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
400
4 Signs Your Business is Dying
shpigford
183
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
GraphQLとの向き合い方2022年版
quramy
46
14k
Designing Experiences People Love
moore
141
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Gamification - CAS2011
davidbonilla
81
5.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
670
Transcript
© 2024 Ateam Inc. VRTツールのダークホース Lost Pixelを紹介したい ビジュアルリグレッションテストツール4選!ユーザーが語る各ツールのメリット #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