UIテストを自動化して、アプリケーションの視覚的外観がすべてのサポート対象のデバイスやフォームファクタ上で適切であることを保証するというのは、一般的に困難な作業である。この作業の簡略化に、Flutter golden testsが一役買ってくれるかも知れない。MotorsアプリのUIスクリーンショットテストに対するeBayのアプローチがそれを示している。
視覚的なUIテストは、動作に関するUIテストとは違って、面倒で費用を要するプロセスになりがちである。リッチクライアントアプリケーションであればなおさらだ。
ひとつのデバイス上でUIがどのように見えるかというのは、考慮事項のひとつに過ぎません。テキストのサイズからさまざまな言語へのアクセシビリティに至るまで、無数とも言える可能性を考慮し、テストしなければならないのです。
デバイス、フォームファクタ、言語、デバイス方向の組み合わせ数の膨大さに加えて、視覚的なUIテストを極めて難しいものにしているのは、何が正しくて何が間違いなのかを一概に言えないことだ。その理由について、視覚テストツールAppraizeの作者であるGojko Adzic氏は次のように説明する。
視覚に関しては、正しさの説明が難しいことがよくあります。例えば、要素のサイズや位置、スタイルに関して、何らかのチェックを設計することは可能ですが、画面上の全体的な構成が悪かったり、不自然だったり、単に見苦しいという場合もあり得るのです。表示の何かが正しくない場合、人ならば簡単に指摘することができるのですが、期待される結果を表現することが難しいため、自動化はこれまであまり役に立ってきませんでした。
この影響によって、アプリの視覚のテストでは最終結果の表示に対する人のレビューが必要になるため、結果的に開発プロセス全体や新機能の作成を遅くする場合があった、とAdzic氏は言う。
この問題に対するアプローチのひとつにスクリーンショットテストがある。アプリのスクリーンショットを多数取得して、リファレンス用のスクリーンショットと比較する、という方法だ。2つのスクリーンショット間に何らかの差異があればフラグが付けられて、さらにレビューが行われる、という手順である。
Flutter Goldを使えば、このプロセスをもっと簡単にすることができる。Flutter Goldは、Flutterウィジェットをスクリーンショットとして描画してキャプチャし、専用のリポジトリ内にベースラインとして格納した後、それぞれのリファレンスショットを変更後のビルド時に生成されたものと比較する、という処理を可能にする自動化ツールである。
eBayはこのFlutter Goldの使用を、ウィジェットの単純なテストという範囲を越えて、次のイメージに示すような、複数のウィジェットを組み合わせた複数のバリエーションのテストをサポートするように発展させている。
この過程でeBayは、Flutter goldenのサポートが非常に合理化されており、そのため新たなテストに冗長な設定コードを記述する必要のあることに気付いた。このために、多数のUIテストの管理が煩雑な作業になっていたのだ。この問題に対処するため、同社のエンジニアたちはGolden ToolkitというFlutterパッケージを開発して、反復的なパターンの多くをカプセル化し、問題領域を単純化した。
このアプローチによって、アプリケーションの品質を犠牲にすることなく開発速度を向上することが可能になった、とeBayは述べている。