FlutterのGolden Testを強化する「flutter_test_goldens」

Flutterでは、ウィジェットや画面の見た目が意図せず変わっていないかを確認するために、Golden Testを利用できます。

flutter_test_goldens は、FlutterのGolden Testをより扱いやすくするためのツールキットです。

単純なスクリーンショット比較だけではなく、複数のGolden画像をまとめて確認するギャラリーや、アニメーション・ユーザー操作の状態を記録するタイムラインなど、より高度なGolden Testを構築できます。

flutter_test_goldensとは

flutter_test_goldens は、FlutterでGolden Testを書くためのツールキットです。

Golden Testでは、ウィジェットを描画した結果を画像として保存し、後から実行した結果と比較することで、UIに意図しない変更が発生していないか確認できます。

flutter_test_goldens では、従来のGolden Testを拡張し、複数の状態をまとめて確認したり、アニメーションの途中経過を記録したりできます。

現在のバージョンは 0.1.0 です。

主な特徴

機能内容
Single Shot Galleries複数のGolden画像をギャラリーとして確認
Multi-Golden Galleries複数のGoldenをまとめて扱える
Magazine Galleries複数のUI状態を一覧で確認
Animation Timelinesアニメーションの状態をタイムラインとして記録
Interaction Timelinesユーザー操作による状態変化を記録
FlutterCameraウィジェットの状態を撮影
FlutterScreenshotスクリーンショットを取得
ScreenshotCollection複数のスクリーンショットを管理
FakeScreenテスト用の画面環境を構築
PixelSnapウィジェットのピクセル位置を調整
Font loadingGolden Test用のフォント読み込み
Failure ScenesGolden Test失敗時の状態を確認
MetadataGolden Sceneにメタデータを保存

基本的な使い方

まず、開発用依存関係に flutter_test_goldens を追加します。

YAML

dev_dependencies:
  flutter_test_goldens: any

その後、Golden Testを作成します。

Dart

import 'package:flutter_test_goldens/flutter_test_goldens.dart';

void main() {
  testGoldenScene("my golden test", (tester) async {
    // Golden Testを実装
  });
}

testGoldenScene()を利用することで、Golden Sceneとしてテストを定義できます。

Golden Scene

flutter_test_goldensでは、Golden Testを「Scene」として扱うことができます。

単純に1枚の画像を比較するだけではなく、テスト対象のUIや状態をまとめて扱えるのが特徴です。

例えば、同じウィジェットについて以下のような状態をGoldenとして確認できます。

  • 初期状態
  • ボタンを押した状態
  • フォーカスされた状態
  • エラー状態
  • アニメーション中の状態
  • 複数の画面サイズでの状態

UIの状態が多いアプリでは、通常のGolden Testだけで管理するよりもテスト結果を整理しやすくなります。

Galleryで複数の状態を確認

Galleryを利用すると、複数のGoldenをギャラリーとしてまとめて扱えます。

例えば、コンポーネントの状態を一覧化するようなテストに利用できます。

Dart

Gallery(
  children: [
    // テスト対象のWidget
  ],
);

ボタンやフォームなど、状態によって見た目が変わるUIコンポーネントの確認に向いています。

Animation Timeline

flutter_test_goldensでは、アニメーションの状態をタイムラインとして扱うこともできます。

通常のGolden Testでは、特定の時点におけるUIを画像として比較するケースが一般的です。

Animation Timelineを利用すると、アニメーションの進行に伴うUIの変化を確認できます。

例えば、以下のようなUIのテストに利用できます。

  • ページ遷移
  • ダイアログの表示
  • 展開・折りたたみアニメーション
  • ローディングアニメーション
  • UIコンポーネントのアニメーション

Interaction Timeline

ユーザー操作によるUIの変化をテストするためのInteraction Timelineも用意されています。

例えば、

  1. 画面を表示
  2. ボタンをタップ
  3. UIが変化
  4. 別のボタンをタップ
  5. 表示内容が変化

といった一連の操作をテスト対象として扱えます。

インタラクティブなUIでは、最終状態だけではなく操作途中の状態も重要になるため、このようなテスト方法が役立ちます。

FlutterCamera

FlutterCameraは、GalleryなどでFlutterのUIを撮影するために利用できます。

Golden Testでは、テスト対象のウィジェットを決められた環境で描画し、その結果を画像として比較します。

FlutterCameraを利用することで、撮影対象となるUIを扱いやすくできます。

FlutterScreenshot

FlutterScreenshotは、Flutterの画面をスクリーンショットとして扱うための機能です。

スクリーンショットを単純に1枚だけ扱うのではなく、ScreenshotCollectionと組み合わせて複数のスクリーンショットを管理できます。

ScreenshotCollection

ScreenshotCollectionでは、複数のスクリーンショットをコレクションとして扱えます。

複数のUI状態をGoldenとして管理する場合に利用できます。

FakeScreen

FakeScreenは、Golden Testでテスト用の画面環境を構築するための機能です。

実際のアプリ画面とは分離して、テストに必要な画面状態を再現できます。

PixelSnap

flutter_test_goldensには、ピクセル単位の位置調整を行うためのPixelSnap関連ウィジェットも用意されています。

代表的なものとして以下があります。

  • PixelSnapCenter
  • PixelSnapColumn
  • PixelSnapFlex
  • PixelSnapRow
  • PixelSnapAlign

Golden Testでは、わずかなピクセル位置の違いが画像比較の差分になることがあります。

PixelSnapを利用することで、ウィジェットの配置をピクセル境界に合わせることができます。

フォントの読み込み

Golden Testでは、フォントの違いによって画像比較の結果が変わる場合があります。

flutter_test_goldensでは、アプリで使用するフォントをテスト環境に読み込むための機能が用意されています。

例えば、loadAppFonts()を利用できます。

Dart

await loadAppFonts();

テスト全体でフォントを読み込む場合は、flutter_test_config.dartを利用できます。

Dart

import 'dart:async';

import 'package:flutter_test_goldens/flutter_test_goldens.dart';

Future<void> testExecutable(
  FutureOr<void> Function() testMain,
) async {
  await loadAppFonts();
  await testMain();
}

これにより、Golden Test実行時にアプリで使用するフォントを読み込めます。

Golden Test失敗時の確認

Golden Testでは、期待する画像と実際に生成された画像に差分があるとテストが失敗します。

flutter_test_goldensでは、失敗時の情報を確認しやすくするためのFailure Sceneや詳細なFailure Reportが用意されています。

また、Golden SceneのメタデータをPNGに保存する機能もあります。

これにより、単純な画像比較だけでは確認しにくいテスト情報を扱いやすくできます。

Golden画像の抽出

flutter_test_goldensには、Golden Sceneから画像を抽出するためのCLIも用意されています。

まずCLIを有効化します。

Bash

dart pub global activate flutter_test_goldens

Golden Sceneの抽出は以下のコマンドで実行できます。

Bash

golden-scene extract [scene/file/path.png]

実際に画像を生成せず、処理内容だけ確認したい場合は--dry-runを利用できます。

Bash

golden-scene extract --dry-run [scene/file/path.png]

GitHub Actionsとの組み合わせ

Golden TestはCI環境でも実行できます。

例えば、GitHub ActionsからFlutterのテストを実行することで、Pull RequestなどでUIの変更を検出できます。

Bash

flutter test test_goldens

Golden Testが失敗した場合のPNGをCIのArtifactとして保存する構成にもできます。

これにより、コード変更によってUIに差分が発生していないかを開発チームで確認できます。

どのような場面で使える？

flutter_test_goldensは、特にUIの状態が多いFlutterアプリで利用しやすいパッケージです。

UIコンポーネントの確認

ボタン、カード、フォームなど、状態によって見た目が変化するコンポーネントをまとめてテストできます。

デザイン変更の検出

アプリのUIを変更した際に、意図しない見た目の変更が発生していないか確認できます。

アニメーションの確認

Animation Timelineを利用することで、アニメーションを含むUIの状態をテストできます。

インタラクションの確認

Interaction Timelineを利用して、ユーザー操作によって変化するUIを確認できます。

CIでのUIテスト

Flutter Testと組み合わせてCI上でGolden Testを実行し、UIの回帰を検出できます。

まとめ

flutter_test_goldens は、FlutterのGolden Testを拡張するためのツールキットです。

単純な画像比較だけではなく、

  • Golden Scene
  • Gallery
  • Animation Timeline
  • Interaction Timeline
  • FlutterCamera
  • FlutterScreenshot
  • ScreenshotCollection
  • FakeScreen
  • PixelSnap
  • フォント読み込み
  • Failure Scene
  • 詳細なFailure Report
  • Golden Sceneのメタデータ

など、UIテストを整理するための機能が用意されています。

特に、画面やUIコンポーネントの状態が多いFlutterアプリでは、Golden Testをより体系的に管理するための選択肢となるパッケージです。

タイトルとURLをコピーしました