VisualTest で AI を使って効率良く UI の視覚的なバグを検出

VisualTest は、視覚的なバグを検出する SDK ベースのツールです。テストに AI を取り入れることで、重要な差異のみに集中できるようにします。VisualTest は、機能テスト ワークフロー内の指定された時点で、ベースラインとなる UI のスクリーンショットをキャプチャして、同じテストの実行中、またはリグレッション テスト中に、新旧のスクリーンショットを比較して変更を確認することで、アプリケーションのルック & フィールを検証します。ピクセルと DOM 情報を処理し、コンピューター ビジョン技術を使用して、UI の重要な変更を判断します。

VisualTest では以下のことができます。

  • ベースライン画像と新しいスクリーンショットの比較
  • 意図的でない差異の確認
  • 調査結果の報告

テスト中、VisualTest は以下の種類のスクリーンショットをキャプチャできます。

  • フルページ – ページ全体をキャプチャします。
  • ビューポート – ページの表示部分をキャプチャします。
  • 要素 – 特定のビジュアル要素をキャプチャします。

そして、意図した UI 変更のみがプロダクションに確実にプッシュされるように、視覚的な変更を検出してチームに通知します。

VisualTest の主な機能

  • 自動リグレッション テスト
    ベースラインと比較して視覚的なリグレッションを自動検出するため、本番環境にロードする前に UI の変更を簡単かつ迅速に評価できます。

  • カスタマイズ可能な機能
    チームの作業内容や UI に合わせて、ビューの変更、コメントの追加、色の変更が可能です。

  • 手動テストの自動化
    TestComplete と統合して、手動テスト、機能テスト、およびビジュアル テストの自動化を、より大きなスケールとカバレッジで実現できます。

  • 実機でのモニタリング
    BitBar と統合して、何千もの実際のデバイスとブラウザーを使ってビジュアル テストを実行できます。

ビジュアル テストが重要な理由

視覚的なバグはよくあることですが、UI の機能テストで発見することは非効率的です。理論的には、各ページやコンポーネントの幅、高さ、内側のテキストなどを詳細に記述した一連のアサーションを作成できますが、複雑なアサーションは不適切なテストにつながりやすく、良い結果が得られません。

このようなバグの特定を専用のツールで自動化することで、時間の節約と効率の向上を図ることができます。以下の画像は、VisualTest によって特定されたバグの例です。


左側のスクリーンショットの下部にある 3 つのアイコンと説明が右側のスクリーンショットにはありません。


フォントの違いも検出します。

VisualTest でテストするメリット

VisualTest には、手動テストやその他のアプローチと比較して、いくつかの利点があります。

  • コンピューター ビジョン技術: 人間の目では見逃してしまうような、わずかな、しかし重要な変化を検出します。
  • スクリーンショット: 複数の複雑な機能テスト アサーションを単一の視覚的アサーションに置き換えます。
  • 幅広いブラウザー/デバイス構成: VisualTest は、自動化によって複数のブラウザー/デバイス構成を並行して処理するため、より多くのユーザーが、見るべきものを確実に見ることができます。

VisualTest の比較基準

VisualTest は、最初のスクリーンショットに基づき、テストのベースラインを作成します。そして、後続のテスト実行において、以下の基準に基づいて同種の画像を検出し、比較します。

  • 画像名
  • 画像の種類 (フルページ、ビューポート、または要素)
  • オペレーティング システム
  • ブラウザーの種類
  • 画面解像度

VisualTest と TestComplete の統合

TestComplete ユーザーは、VisualTest との統合を利用して、UI テストに重要な新しいレイヤーを追加し、機能テストでは検出されない視覚的なバグを検出できるようになります。さらに、AI を使用してこれらの変更を特定すると同時に、レビュー プロセスから偽陽性をフィルタリングできることです。つまり、作業を増やすことなく、より多くの結果が得られます。

次のようなメリットがあります。

  • 誰でもテスト可能 – テスターは、コードを書くことなく、キーワード テストやスクリプト テストにビジュアル テストを追加できます。
  • コスト削減 – リグレッション テストを自動化することで、本番環境に到達する前に不具合を排除し、リリース後のバグ修正にかかるコストを削減できます。
  • テスト期間の短縮 – AI が偽陽性をフィルタリングし、ほとんどのビジュアル テストの 1 番の問題点を解消します。
  • チームでテスト – TestComplete はオンプレミスですが、無制限のユーザーを VisutalTest に追加し、クラウド経由でスクリーンショットの結果を共有できます。

VisualTest 製品に関するお問い合わせは、こちら


この資料は、SmartBear の Web サイトで公開されている以下の記事を参考に作成したものです。
VisualTest Documentation – About
VisualTest Documentation – Advantages
VisualTest Features

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