Webページの画面キャプチャ比較
概要
Seleniumなどのツールを使ってWebページの自動試験が行われることが多くなってきました。試験のエビデンスとして画面キャプチャをとることがあると思います。文字列ベースで行うことができるHTMLソースの比較は自動化できますが、ブラウザの表示差異をチェックすることができません。画面キャプチャの比較を人が行うと試験結果の確認に時間がかかったり、確認漏れが発生する可能性があります。
ImageMagickに含まれているcompareというツールを使うと画像の比較が簡単にできます。これを使ってブラウザによる表示差異や修正後の確認などを自動化することができるようになります。
Webページのキャプチャ
Yahoo! JAPANのページは右サイドに広告が表示されます。表示される広告が内容が変わるように時間を変えてキャプチャを取得しました。
Webページのキャプチャには、nightmareというPhantomJSのラッパを使いました。PhantomJSは、Webkitを使うJavascript APIを提供します。
数行のJavascriptでWebページの画面キャプチャをすることができます。
$ node yahoo.js
$ cat yahoo.js
var Nightmare = require('nightmare');
var size = { width: 1200, height: 600, 'use-content-size': true };
new Nightmare(size).goto('http://www.yahoo.co.jp')
.screenshot('./yahoo.png')
.run();
画像1(yahoo.png)
画像2(yahoo2.png)
キャプチャ画像比較
二つの画像をImageMagickのcompareコマンドで比較します。変化があった場所が赤く表示されます。
比較画像は、広告表示領域が赤く表示されている（変わっている）ことを示しています。
$ compare yahoo.png yahoo2.png diff.png
