Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Visual Regression Test ことはじめ

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

Visual Regression Test ことはじめ

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

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

Avatar for Takuma Homma

Takuma Homma

March 23, 2026
Tweet

More Decks by Takuma Homma

Other Decks in Technology

Transcript

  1. • VRT とは: 画像比較による UI の見た目の差分を検出するテスト手法 ◦ Golden image と呼ばれる期待する

    UI の画像と、実際の出力を比較する • Studyplus モバイルアプリは 2025 年 3 月に Flutter リプレイスが完了 • 元々統制の取れていなかったデザインシステムを見直し、デザイナーと連携して UI コンポーネント をきちんと管理するように仕組みが整ってきている • コードの変更によって UI コンポーネントが壊れていないかの仕組みを作りたかった ◦ あくまでレイアウト崩れのための回帰テストとしてのカバー なぜ VRT を導入するに至ったか
  2. • より簡単に運用できる Betterment/alchemist を CI tests 設定で導入 ◦ golden_toolkit の実質的な後継

    ◦ flutter_test のラッパーで、内部では matchesGoldenFile メソッドを画像比較で利用 • flutter_test でも可能だが、AlchemistConfig で様々な設定をグローバルで適用しやすい、テストの記載量が 少ないなど運用のしやすさがある • CI tests: 四角の Ahem フォントで描画するため、フォントレンダリングによる運用負荷の削減 Studyplus プロダクトへの導入 テキストを用いた Golden image の例
  3. • Studyplus では Widgetbook を用いて UI カタログを運用している ◦ Golden test

    用に作成する widget と管理するコストがあるという話になった • Widgetbook には knobs という機能があり、インタラクティブにパラメータを変更できる • 共通化された widget では引数で差し替えられるように ◦ デフォルト値を入れることで、golden test では固定値によるテストを実現 Widgetbook との widget 共通化
  4. 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 を使ったテストステップ
  5. • 前述の通り、Studyplus では現状 CI tests の設定で運用しており、 Ahem フォントの四角文字に置き換え られるため、プラットフォームごとのフォントを完全には再現できていない •

    フォントサイズや line-height など、プロパティ自体の変更による差分には対応できている 課題 1. フォント テキストを用いた Golden image の例 (再掲)
  6. • コンポーネント外のピクセル差分により CI 上で落ちるテストがいくつかあった ◦ alchemist のチームも把握済みで、画像を生成する環境とテストする環境を揃えるのがベ ストプラクティスというコメントもある ◦ Issue:

    https://github.com/Betterment/alchemist/issues/90 • 発生する運用が手間なので、ほんの僅かな差分であれば許すようにしている 課題 2. 環境起因によるテスト失敗
  7. • デザインシステムの UI コンポーネントの運用を支える手法として VRT を導入しました • Widgetbook を利用している場合は表示する widget

    の共通化をすることで管理コストも減ります • ゆくゆくはコンポーネントを複数並べるような、画面単位でのレイアウト崩れへの対応も視野に入れ つつ、優先度が高い画面や確認手順が困難な画面へ拡大予定です • SKILL.md を整備すれば coding agent によってテストファイルの生成も楽です まとめ