Visual Regression Test ことはじめ

【Flutter推し活】Flutter好きが集うLT会 Studyplus x Linc'well で利用。

https://github.com/Betterment/alchemist/pull/176

Transcript

1. Visual Regression Test ことはじめ スタディプラス株式会社 本間卓真 2026/03/13 Flutter好きが集うLT会 Studyplus x Linc'well
2. 1. なぜ Visual Regression Test (VRT) を導入するに至ったか 2. Studyplus プロダクトへの導入 3. 課題 目次
3. • VRT とは: 画像比較による UI の見た目の差分を検出するテスト手法 ◦ Golden image と呼ばれる期待する UI の画像と、実際の出力を比較する • Studyplus モバイルアプリは 2025 年 3 月に Flutter リプレイスが完了 • 元々統制の取れていなかったデザインシステムを見直し、デザイナーと連携して UI コンポーネント をきちんと管理するように仕組みが整ってきている • コードの変更によって UI コンポーネントが壊れていないかの仕組みを作りたかった ◦ あくまでレイアウト崩れのための回帰テストとしてのカバー なぜ VRT を導入するに至ったか
4. • より簡単に運用できる Betterment/alchemist を CI tests 設定で導入 ◦ golden_toolkit の実質的な後継 ◦ flutter_test のラッパーで、内部では matchesGoldenFile メソッドを画像比較で利用 • flutter_test でも可能だが、AlchemistConfig で様々な設定をグローバルで適用しやすい、テストの記載量が 少ないなど運用のしやすさがある • CI tests: 四角の Ahem フォントで描画するため、フォントレンダリングによる運用負荷の削減 Studyplus プロダクトへの導入 テキストを用いた Golden image の例
5. Alchemist のテスト例 (checkbox) テスト 生成される画像例
6. • Studyplus では Widgetbook を用いて UI カタログを運用している ◦ Golden test 用に作成する widget と管理するコストがあるという話になった • Widgetbook には knobs という機能があり、インタラクティブにパラメータを変更できる • 共通化された widget では引数で差し替えられるように ◦ デフォルト値を入れることで、golden test では固定値によるテストを実現 Widgetbook との widget 共通化
7. Widgetbook の画面例
8. 利用する widget の共通化例 (banner)
9. Golden test Widgetbook
10. 1. Golden test と Widgetbook で共通利用する widget を作成 2. Golden test を作成し、flutter test –tags=golden –update-goldens を 実行することで期待する結果となる golden image を生成しておく 3. CI 等で flutter test --tags=golden を実行し、現状のコードと golden image を比較 4. テストが落ちたら、golden image を再生成するか component 自体を変更するかで対 応 Studyplus での Alchemist を使ったテストステップ
11. • 前述の通り、Studyplus では現状 CI tests の設定で運用しており、 Ahem フォントの四角文字に置き換え られるため、プラットフォームごとのフォントを完全には再現できていない • フォントサイズや line-height など、プロパティ自体の変更による差分には対応できている 課題 1. フォント テキストを用いた Golden image の例 (再掲)
12. • コンポーネント外のピクセル差分により CI 上で落ちるテストがいくつかあった ◦ alchemist のチームも把握済みで、画像を生成する環境とテストする環境を揃えるのがベ ストプラクティスというコメントもある ◦ Issue: https://github.com/Betterment/alchemist/issues/90 • 発生する運用が手間なので、ほんの僅かな差分であれば許すようにしている 課題 2. 環境起因によるテスト失敗
13. 画像比較する goldenTestComparator を上書き カスタムの comparator global の comparator を上書き
14. • デザインシステムの UI コンポーネントの運用を支える手法として VRT を導入しました • Widgetbook を利用している場合は表示する widget の共通化をすることで管理コストも減ります • ゆくゆくはコンポーネントを複数並べるような、画面単位でのレイアウト崩れへの対応も視野に入れ つつ、優先度が高い画面や確認手順が困難な画面へ拡大予定です • SKILL.md を整備すれば coding agent によってテストファイルの生成も楽です まとめ