機能テストのその先、Visual Testing
ここでは「Beyond Functional Testing」の一つであるVisual Testingについて、ApplitoolsのシニアエンジニアのAngie Jonesの「Your Tests Lack Vision: Adding Eyes to Your Automation Framework」セッションを取り上げたいと思います。
Visual Testingは画面の見た目のチェックすることを目的としたテストで、前回のスクリーンショットを取得しておいて前回との画像差分を比較する手法が一般的です。
Visual Testingを自動化することの重要性はマニュアルテストのコストを削減するという意味ももちろんありますが、それ以上にマニュアルでは差分を見逃してしまう可能性が高いことがあります。
例えば画面の配色を一部変えたというエンハンスがあったとしましょう。そのときにマニュアルでテストするときには配色だけに注意がいき、もし画面の要素のサイズに変化があったとしてもその変化に意識がいかずに見逃してしまう可能性が高いでしょう。
しかし、自動化したVisual Testingではその差分を必ず捉えることができ、マニュアルテストに比べて非常に効率的かつ効果的にVisual Testingを実行できます。
しかしながら、今まで一般的に採用されていた前回画像との差分をピクセル単位で出す手法では期待していない差分が検出されやすく、非常に不安定なテストとなってしまいます。
ピクセル単位で比較する場合、以下の例のように状態が少しでも変化しただけで期待していない差分が検出されてしまいます。
- モバイルの充電が70%→100%に変わる
- テストを実施する日が変わるだけで日付を表示している部分が変わる
- 検索したときにレイアウトは同じだが表示されるコンテンツが変わる
ピクセル単位で差分を出す手法の問題点はそれだけではありません。以下の画像を見てください。間違い探しとその差分をピクセル単位で比較した結果の画像になりますが、画像の微細なずれなどが検出されてしまい、どの部分が間違っていたか把握することが難しくなってしまっています。
Visual Testingのパイオニア的な存在であるApplitoolsはそれらにうまく対処しています。Applitoolsの機能として、差分を比較するレベルを変更することができます。
例えば、"strict"というレベルではコンテンツ、レイアウト、色などは比較しますが、人間には検知できない画像の乱れなどは排除してくれます。また"layout"というレベルではレイアウトのみ比較し、検索結果のようにコンテンツが変更されたとしてもその部分は除いて差分比較してくれます。
この機能を使うことで、期待していない差分を取り除くことができます。
またApplitoolsではボタンをワンクリックするだけでどこが差分として検出されたか視覚的に分かるようになっています。
それ以外にもApplitoolsには多くの機能があります。例えばクロスブラウザや各種ツールとの連携などいろいろありますが、詳しくはApplitoolsのページを確認ください。Applitoolsは今までのVisual Testingでのデメリットを解消し、Visual Testingを実用的に使えるようにしてくれています。
Applitoolsは有償ツールではありますが、このようにツールを有効的に使って「Beyond Functional Testing」を行うことが必須の時代になってきています。
