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.3k
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
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
1.4k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.2k
Cloudflare Fonts試してみた🔤
aiji42
2
630
Hyperdrive試してみた🛸
aiji42
3
1k
Workers Browser Rendering API について
aiji42
0
410
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.2k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
650
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
11
4.6k
Cloudflare Workersで動くOG画像生成器
aiji42
1
1.4k
Other Decks in Technology
See All in Technology
AOAI Dev Day - Opening Session
yoshidashingo
2
430
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
740
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
How to Think Like a Performance Engineer
csswizardry
4
590
Featured
See All Featured
Teambox: Starting and Learning
jrom
130
8.6k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
KATA
mclloyd
20
13k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Designing the Hi-DPI Web
ddemaree
276
34k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
A Philosophy of Restraint
colly
200
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