ユーザーのアクションを伴うWidgetのGoldenTest

このスライドはFlutterKaigi 2025の登壇に使用したスライドのアーカイブになります。

チームラボでは、Flutterエンジニアを募集しています。
少しでも、チームラボにご興味をお持ち頂けましたら、採用ページをご覧頂けますと幸いです。
https://www.team-lab.com/recruit/

FlutterKaigi 2025とは
エンジニアが主役のFlutterカンファレンス。Flutter開発者有志による実行委員会が主催し、Flutter技術情報の共有とコミュニケーションを目的としている。
https://2025.flutterkaigi.jp/

Transcript

1. ユーザーのアクションを伴うWidgetの GoldenTest 1 horie Flutter Kaigi 2025
2. horie 2013年からチームラボでAndroidエンジニア 直近1, 2年はFlutterエンジニア 自己紹介
3. 会社紹介
4. GoldenTest概要 • ある地点のコードでレンダリングされるUIの画像を期待画像として保存しておき、実際の レンダリング結果と比較を行う • 比較して差分があったらTest失敗扱い • VRT(Visual Regression Testing) / 視覚的回帰テストとして利用される GoldenTest概要
5. GoldenTestのイメージ 期待画像 結果画像 GoldenTest概要 マスク画像 差分画像
6. 何が嬉しい？ • 意図しない UIの変更を防ぐ ◦ 意図したUIの変更のみを再レンダリングしてcommit ◦ 意図していないものは画像が更新されてないのでテストが失敗 • コードの変更による UIへの影響を可視化 ◦ PRのコードを実行しなくてもどのようなUIの変更が行われたか把握可能に GoldenTest概要
7. FlutterでのGoldenTest
8. FlutterでのGoldenTest flutter_testでのGoldenTestの記述 testWidgets('HomePage VRT', (WidgetTester tester) async { // 描画 await tester.pumpWidget( MaterialApp( theme: ThemeData(fontFamily: 'NotoSans'), home: const MyHomePage(title: 'title'), ), ); // 確認 await expectLater(find.byType(MyHomePage), matchesGoldenFile('goldens/my_home_page.png')); }); ※import・フォントの読み込み・画面サイズは省略
9. Scrollが必要なGoldenTest
10. テスト対象の画面 • ScaffoldにAppBarとListView ◦ 50個のセクション ▪ セクションごとに5つのListTile Scrollが必要なGoldenTest
11. Scrollが必要な画面のGoldenTest記述の流れ 1. Widgetを描画 2. FinderにスクロールするWidgetの検索条件を設定 3. 該当箇所までスクロール 4. Golden画像と確認 Scrollが必要なGoldenTest
12. Scrollが必要なGoldenTest Scrollが必要なGoldenTestの記述 testWidgets('ListPage section4', (WidgetTester tester) async { await tester.pumpWidget(...); // 描画 final targetFinder = find.text('セクション 4'); // 4番目のセクションを探す await tester.scrollUntilVisible( targetFinder, 200.0, ); // 該当箇所までスクロール await tester.pumpAndSettle(); // 安定するまで待つ await expectLater(find.byType(ListPage), matchesGoldenFile('goldens/scroll_list_page.png')); // 確認 });
13. Scrollが必要なGoldenTest Scrollが必要なGoldenTestの記述：Sliver（ListView / GridView）を利用する場合のテスト失敗① testWidgets('ListPage section30', (WidgetTester tester) async { await tester.pumpWidget(...); // 描画 final targetFinder = find.text('セクション 30'); // 30番目のセクションを探す await tester.scrollUntilVisible( targetFinder, 200.0, ); // 該当箇所までスクロール await tester.pumpAndSettle(); // 安定するまで待つ await expectLater(find.byType(ListPage), matchesGoldenFile('goldens/scroll_list_page.png')); // 確認 }); Bad state: No element
14. Sliver（ListView / GridView）では画面に表示される部分だけWidgetがレンダリングされるため、 描画前の場合はFinderから取得できない テスト失敗の原因 ・WidgetがレンダリングできるまでscrollUntilVisibleのmaxScrollsを増やす or ・Scrollが不要なGoldenTestのサイズに変更する テスト成功の改善 Scrollが必要なGoldenTest Scrollが必要なGoldenTestが失敗する①：Sliver（ListView / GridView）を利用する場合
15. Scrollが必要なGoldenTest Scrollが必要なGoldenTestの記述：Sliver（ListView / GridView）を利用する場合のテスト成功 testWidgets('ListPage section30', (WidgetTester tester) async { await tester.pumpWidget(...); // 描画 final targetFinder = find.text('セクション 30'); // 30番目のセクションを探す await tester.scrollUntilVisible( targetFinder, 200.0, maxScrolls: 100, ); // 該当箇所までスクロール await tester.pumpAndSettle(); // 安定するまで待つ await expectLater(find.byType(ListPage), matchesGoldenFile('goldens/scroll_list_page.png')); // 確認 });
16. Scrollが必要なGoldenTest testWidgets('ListPage section last', (WidgetTester tester) async { await tester.pumpWidget(...); // 描画 final targetFinder = find.textContaining('セクション'); // セクションを探す await tester.scrollUntilVisible( targetFinder, 200.0, ); // 該当箇所までスクロール await tester.pumpAndSettle(); // 安定するまで待つ await expectLater(find.byType(ListPage), matchesGoldenFile('goldens/scroll_list_page.png')); // 確認 }); Bad state: Too many elements Scrollが必要なGoldenTestの記述：Sliver（ListView / GridView）を利用する場合のテスト失敗②
17. ・scrollUntilVisibleではFinderで単一となるときしか利用できない テスト失敗の原因 ・Sliver（ListView / GridView）を利用するときはFinderは単一となる設定とする ・Type指定だと複数になる場合はValueKey等で単一とする ※ValueKeyはテスト対象に指定が必要 テスト成功の改善 Scrollが必要なGoldenTest Scrollが必要なGoldenTestが失敗する②：Finderで複数該当する
18. Scrollが必要なGoldenTest testWidgets('ListPage section last', (WidgetTester tester) async { await tester.pumpWidget(...); // 描画 final targetFinder = find.byKey(ValueKey('セクション30')); // セクションを探す await tester.scrollUntilVisible( targetFinder, 200.0, 　 maxScrolls: 100, ); // 該当箇所までスクロール await tester.pumpAndSettle(); // 安定するまで待つ await expectLater(find.byType(ListPage), matchesGoldenFile('goldens/scroll_list_page.png')); // 確認 }); Scrollが必要なGoldenTestの記述：Sliver（ListView / GridView）を利用する場合のテスト成功
19. • GoldenTestを利用したVRTは予期せぬUIの変更を防げたりする便利な技術 • scrollUntilVisibleで指定のスクロール位置のGoldenTestが可能 • Sliver（ListView / GridView）を利用したGoldenTestでscrollUntilVisibleを利 用する場合はmaxScrollsを考慮し、Finderは単一にする まとめ
20. 終わりに Flutterの開発を一緒に行ってくれる 仲間を募集しています！ 会社説明会 エンジニア求人ページ