問題
ビジュアルテストを正しく行うのが難しい理由
画面の比較は簡単そうに聞こえます。実際には、比較は厳しすぎるか、緩すぎるかのどちらかです。
厳しすぎると何もないのに失敗する
ピクセル単位の比較は、フォントのスムージング、動画の圧縮、誰にも見えない色合いの違いで失敗します。
緩すぎると欠陥を見逃す
許容値を上げると、消えたアイコン、変わった価格、間違った色が見逃されます。
差分は読みにくい
変化したピクセルの画像は、どこが変わったかは示しますが、何が変わったか、それが重要かは決して示しません。
仕組み
すでに手作業でしているとおりに作るビジュアルテスト
- 1
記録するか、説明するか
ユーザーと同じようにアプリケーションを使うか、ワークフローをプロンプトで説明して AI アシスタントに任せます。すべてのクリック、キー、ジェスチャーが実際の画面で記録され、表示されたものを確かめるアサーションも添えられます。
- 2
検証
ビジュアル、テキスト、レイアウト、グループの各アサーションが、ユーザーが見るもの (正しい要素、正しい文字、正しい位置) を確認します。
- 3
動画のように編集
タイムライン上でテストを調整します: ステップを移動、トリミング、名前の変更、グループ化し、すべて元に戻せます。あるいは変更をプロンプトで AI に頼むだけです。
- 4
すべてのビルドで実行
アプリから実行するか、コマンドライン実行ツールで CI/CD パイプラインから実行します。
- 5
レポートを読む
信頼度レポートは、何が合格し、何が不合格で、なぜなのかを、わかりやすい言葉と証拠となる画像で伝えます。
仕組み
ノイズを無視し、本当のリグレッションを捉えるコンピュータービジョン
まず要素を見つける
各アサーションは比較する前に画面上で要素を探すので、移動したウィンドウは失敗になりません。
重要な場所の変化を判断する
比較は 1 か所でどれだけ変わったかを測ります。散らばったノイズは合格し、変わった文字やアイコンは不合格になります。
AI スマート分析
比較が不合格になると、AI が何が変わったか、本当の問題かどうかをわかりやすい言葉で伝えます。独自のキーでクラウドで実行するか、ローカル AI モデル (提供するもの、または独自のもの) で実行します。
テキストと変化する値
テキストアサーションは画面上の文字を読み取り、日付や合計のように毎回変わる値は形式で確かめられます。
環境ごとのバージョン
ライトモードとダークモード、別の言語、別の画面ごとにアサーションのバージョンを保持し、各実行は適切なものを使います。
変更をワンクリックで採用
画面が意図的に変わったときは、レポートから新しい見た目を採用すれば、テストは以後それを期待します。
質問
ビジュアルテストの疑問に答えます
自分の画面で GTS Engine + AI をご覧ください。チームとの 30 分の無料相談を予約できます。
または自分で始めましょう。ガイドが数分で最初のテストまで案内します。
詳しく見る