Webサイトの新旧比較
Webサイトの足回りの移行をしたが、サイトコンテンツ自体の変更はないため、新旧で見栄えが変わっていないことを比較したいという時の話。
いろいろあるが、ここでは、イビデンス取得もかねて画面キャプチャを保存しつつ問題があれば個別対応するというやり方が取れると嬉しい。
もちろんこんな話になるぐらいだから、確認しなければならない件数はそれなりにある状況。
まず、Selenium。
思ったよりめんどくさい（注：上記の記事をdisっているのではない。Selenium自体の話。）
つまるところヘッドレスブラウザ
当時のヘッドレスブラウザと言えば、ということで、phantomjs。
超シンプルである。
var page = require('webpage').create(); page.open('https://www.example.com/', function(status) { console.log("Status: " + status); if(status === "success") { page.render('example.png'); } phantom.exit(); });
上記をhoge.jsなどと保存して、コマンドラインからphantomjsを起動。
コマンド起動すると、あっさりexample.pngにスクロール済みの一枚物の画像が取得。
が、2018年現在、開発が正式に終了しているみたい。 主要ブラウザのヘッドレスモードに移行していくのかな。
例. chrome 最新版のヘッドレスモード
Google\ Chrome --headless --screenshot --window-size=1280,6000
取得した新旧画面キャプチャを比較してみる
imagemagicのcompareコマンドには画像のdiff機能がある。 今なら画像認識を使う手もあるかもしれないが、冒頭に述べた用途からいうと、ゼロイチの動作の方がとりまわししやすいだろう。
↓異なるピクセル数が出力
8673
あえて同じものを比較
↓
0
新旧画像を比較して0が望ましいとして試験確認。
ただ、ちょっとは変わってても良いとか、あらかじめ少しだけ変わる場所があることが分かっている場合、 数値を決めて、100までは許容する、それを超えたら個別確認する...というやり方もあるかもしれない。
シェルスクリプトでループさせて、返却値が0でないものは個別確認する。
なお、diff.jpgをオープンしてみると、不一致部分が赤く表示される。
diff.jpgに通番をつけて保存しておき、これらをまたまたビューアーなどで1秒周期スライドショー表示して、目grepするのも、見て安心できるという意味ではありかもしれない。
(ただし個人的には5分が限界)
