Web ページ全体の画像の比較方法について

TestComplete では、Region Checkpoint の機能を用いることで、以下のようにテスト内でスクリーンショットを取得し、期待値の画像と比較を行うことが可能です。
※ 左が期待値、右が結果値で、赤い部分が差分を表しています。

ただし、この機能は表示されている領域のみを比較するため、Web ページ全体の画像を取得して比較を行いたい場合は、PagePicture メソッドを用いてシナリオを作成する必要があります。※ この機能はスクリプトからのみ利用できますが、キーワードテスト内でスクリプトを呼び出して利用できます。

■ コード例
JavaScript ———————————————-

function Test()
{
Browsers.Item(btIexplorer).Run(” 対象のサイトの URL “);
var page = Sys.Browser(“iexplore“).Page(“*”);
var pict1 = page.PagePicture();

var pict2 = Utils.Picture;
pict2.LoadFromFile(” 期待値の画像ファイルのパス “);

if (! pict1.Compare(pict2))
{
Log.Picture(pict1);
Log.Picture(pict2);
var pictd = pict1.Difference(pict2);
Log.Picture(pictd);
Log.Error(“画像が一致しません。”);
}

}

VB Script ———————————————–

Sub Test

Browsers.Item(btIexplorer).Run(” 対象のサイトの URL “)
Set page = Sys.Browser(“iexplore“).Page(“*”)
Set pict1 = page.PagePicture

Set pict2 = Utils.Picture
pict2.LoadFromFile(” 期待値の画像ファイルのパス “)

If Not pict1.Compare(pict2) Then
Log.Picture(pict1)
Log.Picture(pict2)
Set pictd = pict1.Difference(pict2)
Log.Picture(pictd)
Log.Error(“画像が一致しません。”)
End If

End Sub

※ サンプルコードでは、Internet Explorer を使用していますが、Google Chrome、Mozilla Firefox、Microsoft Edge でも利用できます。

期待値となる比較元の画像は予め用意してください。

実行結果は以下のようになります。

ログの画像の一つ目は期待値が表示され、二つ目は結果値、三つ目の画像は差分を表示します。

なお、キーワードテストから利用する場合は、以下のように “Run Script Routine” オペレーションを追加して、対象のルーチンを選択してください。

PagePicture メソッドの詳細は以下のサイトをご参照ください。
https://support.smartbear.com/testcomplete/docs/reference/test-objects/members/page/pagepicture-action-page-object.html

※ Google Chrome で開き、右クリックのコンテキストメニューの「日本語に翻訳(T)」 機能をご使用いただくと、機械翻訳された内容でご覧いただけます。

再生時の動作は以下の動画でご確認いただけます。

その他機能の設定方法:https://www.xlsoft.com/jp/products/smartbear/tc_howto.html
評価版:https://www.xlsoft.com/jp/products/smartbear/download.html