概要
このレッスンを受講する前に
以下のレッスンを修了していると、ここでの学習効果が一層高まります。
- mablアプリケーションの概要
- テスト結果のベストプラクティス
学習目標 ✔️
このレッスンを修了すると、以下の知識や技能が身につきます。
- ビジュアルテストの価値を理解する💰
- ビジュアルテストが機能する仕組みを理解する🛠
- ビジュアルテストの作成方法を理解する🧠
- 視覚的変化を確認する場所を理解する👀
ビジュアルテストの主なメリット 🗝
- 機能テストは重要ですが、ビジュアルテストはアプリケーションの外観に問題がないことを確認するための機能テストを補完する非常に重要な機能です。
- ビジュアルテストは、アプリケーションの静的なセクションの視覚的な変化を識別するのに役立ちます。
- mablでは視覚的な変化を示すだけでなく、視覚的な変化に関するインサイトを提供し、さらに並べて比較し、相違点を強調表示することができます。
- 機能テストの補完に加えて、多くのユーザーがアプリケーションパフォーマンスに影響を与えることなく本番環境をモニタリングするのにビジュアルテストを活用しています。
概要 🗻
mabl Trainerで作成したテストでの視覚的変化の検出には、次の2つのタイプが存在します。
- 機械学習ベースの変化の検出 - mablは確立されたベースラインを用いて予期された視覚的変化と予期しない視覚的変化を識別します。この場合は、視覚的変化に関するインサイトがトリガーされます (注: プランで視覚的変化の学習を有効にしているテストにのみ適用されます。これを行う手順はこのレッスンで学習します)。
- 実行ごとの変化の検出 - 現在のテスト実行と以前のテスト実行との間のすべての変化を検出します (これはプランで機械学習が有効になっていない場合のデフォルト設定です)。
作業の開始
機械学習ベースのビジュアルテストが機能する仕組み 🧐
- mablでは、機械学習を使用することでアプリケーションのUIのビジュアルモデルを作成し、アプリケーションの静的なセクションにおける視覚的な変化を識別することができます。
- プランに対してテストを10回程度実行すると、固定ベースラインが作成されます。このベースラインは簡単に更新し意図した変化に合わせて調整できます (ベースラインを再構築する方法はこちらで確認してください)。
- mablでは、動的に変化するもの (広告、アニメーション、ビデオ、製品/サービスの交互の画像など) を認識し、通知とインサイトを提供し、相違点を比較して強調表示します。
ビジュアルテストを使用する際の注意点
- 視覚的変化がテストの成功/失敗に影響することはありません (ただし、視覚的変化はすべて通知され、[Insights] で確認することができます)。
- 正しく読み込まれているかどうか (および各種ブラウザーでの視覚的変化、リンク切れ、JavaScriptのエラー、ネットワークアクティビティの問題) をチェックするビジュアルテストを作成するには、ビジュアルスモークテストを作成する必要があります。これについては、このシリーズの別のレッスンで説明しますが、ここでは、こちらをクリックしてビジュアルスモークテストの作成について確認してください。
ビジュアルテストを開始する方法✍️
ビジュアルテストを開始するのは非常に簡単で、プランでテストを作成し、視覚的変化の学習を有効にするだけです。ユーザーが行うのはこれだけで、これ以外はすべてmablによって処理されます。
このテストを実行すると、機械学習によってアプリケーションのUIのビジュアルモデルが自動的に作成されます (これらのスクリーンショットの一部はテスト出力に表示されます)。
テスト内のステップ (フローを含む) の追加、削除、編集が自動的に検出され、UIのビジュアルモデルの調整が行われます。
視覚的変化が検出されてもテストが失敗することはありません。
検出された視覚的変化は警告として扱われ、テスト出力に表示されます。
どの変化が重要であるかをmablが判断し、それらの変化に対するインサイトを生成します。
インサイトへのアクセス: 🏃♀️
次の画面の左側に、ベルの形の [Insights] アイコンがあります。
ここから、「インサイトのタイプ」を使って視覚的変化だけが表示されるようにフィルタリングし、クリックしてテスト出力にアクセスするか、ページの上部にある [Visual changes] タイルをクリックしてVisual Explorerを開くことができます。ここでは、視覚的変化のフィルターが自動的に適用されます。これについては、この後のページでご説明します。
注: この [Insights] ページへのリンクは、アプリケーションで設定できるメール送信レポートにも記載されます (レポートについては、別のレッスンで説明します)。
テスト出力の確認 👀
[Insights] ページで、右側にあるその他のアクション記号 (3つのドット) をクリックし、[View Insights Details]、[Results] の順に選択します。
テスト結果ページに移動すると、自動的にステップがフィルタリングされ、対応する視覚的変化のあるステップが表示されます。
ここでは、現在またはベースライン、または並べて比較したものを確認できます。相違点は強調表示できます。
下の画像に示しているように、次の操作を行うことができます。
(A) mablによって動的コンテンツ領域 (使用可能な場合) が識別された場所を確認できます。この場合は、[Highlighting] ドロップダウンをクリックして、[Dynamic content] を選択します。
(B) [Actions] ドロップダウンをクリックし、現在のステップのベースラインの再構築、すべてのステップのベースラインの再構築、またはスクリーンショットをダウンロードして詳細な確認や配布に使用することができます。
Visual Explorer 🚀
[Insights] ページの上部にある [Visual changes] タイルをクリックすると、Explorerページが表示されます (このページには、アプリケーションの左側の [Explorer] アイコンをクリックしてアクセスすることもできます)。ここでは、視覚的変化のフィルターが自動的に適用されます。
上記のビデオでは、テストやURLを指定してさらにフィルタリングを行い、日付の範囲を指定して視覚的変化の絞り込みを行えることが分かります。
画像をクリックすると、テスト出力に表示したときと同様のオプションが表示されますが、表示されるオプションの数は少なくなります。
現在またはベースラインの画像を確認したり、画像を並べて比較したりすることができます。また、[Highlighting] ドロップダウンをクリックして、視覚的変化や動的コンテンツを強調表示することもできます。
詳細な確認を行う場合は、右上隅にある [RESULTS] をクリックして、テスト出力ページに移動します。
まとめ
復習
ここで学習した内容
- ビジュアルテストが機能する仕組み
- ビジュアルテストの作成方法
- 視覚的変化によってテストが失敗することはなく、インサイトの生成のみが行われること
- 結果とインサイトが表示される場所
つながり
既知の内容や業務との関連性
- プランでテストを作成すると、ビジュアルテストは自動的に作成されます。テストの作成以外にユーザーが行う作業はありません。
- ビジュアルテストはすでに行っている作業を補完するもので、エンドツーエンドテストソリューションの重要な要素として機能します。
応用
今後の使用方法
- 視覚的変化をチェックし、アプリケーションの外観が期待したものになっていることを確認するようにします。
- ビジュアルテストを活用して、パフォーマンスに影響を与えることなく本番環境をモニタリングします。