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.9k
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.4k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
2.2k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.6k
Cloudflare Fonts試してみた🔤
aiji42
2
770
Hyperdrive試してみた🛸
aiji42
3
1.4k
Workers Browser Rendering API について
aiji42
0
540
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.5k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
920
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
5.9k
Other Decks in Technology
See All in Technology
Google Cloud Next 2025 Recap マーケティング施策の運用及び開発を支援するAIの活用 / Use of AI to support operation and development of marketing campaign
atsushiyoshikawa
0
380
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
150
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
5
1.4k
MCP でモノが動くとおもしろい/It is interesting when things move with MCP
bitkey
3
620
Amplifyとゼロからはじめた AIコーディング。失敗と気づき
mkdev10
1
170
ユーザーコミュニティが海外スタートアップのDevRelを補完する瞬間
nagauta
1
200
4月15日の AZ 障害をテクサポの中の人目線で振り返ってみる
kazzpapa3
3
180
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
iktakahiro
1
170
AOAI で AI アプリを開発する時にまず考えたいこと
mappie_kochi
1
780
SONiCにて使用されているSAIの実際
sonic
0
270
kernelvm-brain-net
raspython3
0
660
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2025年版)
infiniteloop_inc
14
47k
Featured
See All Featured
Navigating Team Friction
lara
185
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
4 Signs Your Business is Dying
shpigford
183
22k
Six Lessons from altMBA
skipperchong
28
3.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Thoughts on Productivity
jonyablonski
69
4.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Building an army of robots
kneath
305
45k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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