Robot Framework + Selenium2Library + ImageMagickで、スクリーンショットの差分を確認する

Robot Frameworkを使ってWebサイトの検証をする中で、Webサイトの修正による差異はどこなのかを知りたいことがありました。

何か方法がないかを調べると、ImageMagickを使うのが良さそうでした。

　
そこで、Robot FrameworkからImageMagickを呼び出して、Robot Frameworkで撮影したスクリーンショットの差分を確認して見ることにしました。

　
2017/9/2追記

Selenium2Libraryですが、バージョン3からは SeleniumLibrary へと名称が変更されています。詳しくはこちらに書きました。
RobotFrameworkのSelenium2Libraryの名前が、SeleniumLibraryへと変更されてた - メモ的な思考的な

なお、本文はSelenium2Libraryのままにしてあります。

2017/9/2追記ここまで

環境
準備
実装
- 画像の差分比較
- 画像ファイルを開く
ソースコード全体
実行
ソースコード

環境

Mac OS X 10.11.6
Python 3.6.1
Google Chrome 60.0.3112.78 (stable)
ChromeDriver 2.31 (stable)
RobotFramework 3.0.2
Selenium2Library 1.8.1dev1
- GitHubから現在の最新版をインストール
- PyPIにある1.8.0では、Python3系だとエラーが出てインストールできない
ImageMagick 7.0.6-3

準備

Selenium2Library のインストール

PyPIにあるバージョン1.8.0のSelenium2LibraryではPython3系では動作しないため、GitHubよりインストールします。

$ pip install git+https://github.com/robotframework/Selenium2Library

ImageMagickのインストール

Homebrewでインストールします。

$ brew install imagemagick
...
🍺  /usr/local/Cellar/imagemagick/7.0.6-3: 1,522 files, 22.7MB

ChromeDriverのインストール

Chrome v60ではスクリーンショットまわりの不具合があるため、最新版のv60をインストールします。

Chromeに合わせ、ChromeDriverも最新の2.31をHomebrewでインストールします。

# インストールする場合
$ brew install chromedriver

# アップグレードする場合
$ brew upgrade chromedriver

実装

今回は以下の仕様で実装します。

ImageMagickサイトにアクセス
スクリーンショットを撮る
- 差分があれば、差分画像を表示
- 差分がなければ、コンソールに「差分はありません」と表示

画像の差分比較

Robot FrameworkからImageMagickを実行して差分の比較結果を取得するには、OperatingSystemライブラリのrun and return rc and outputキーワードを使います。
Run And Return Rc And Output | OperatingSystem

また、画像の差分を比較し、どれだけ差分があるかはImageMagickの compareとオプションの-metric AEを使います。
MiniMagick を使って 2 枚の画像が同一かどうか判定する - Qiita

# ${rc}と${output}の間には、スペース2つ
# run and return rc and outputキーワードの後はスペース2つ、compare以降の実行時オプション部分はスペース1つずつ
${rc}  ${output} =  run and return rc and output  compare -metric AE before1.png before2.png diff1.png

画像ファイルを開く

RobotFrameworkのRunキーワードと、Macターミナルのopenコマンドを組み合わせます。
Macターミナルのopenコマンドの使用例 - Qiita

# ${output}には、差分がある場合は0よりも大きい値がセットされている
run keyword if  ${output} != 0  run  open diff2.png

ソースコード全体

imagemagick.robot

*** Settings ***

Library  Selenium2Library
Library  OperatingSystem


*** Keywords ***
スクリーンショットを撮って差分を確認する
    # headlessなChromeで確認する
    ${options} =  evaluate  sys.modules['selenium.webdriver'].ChromeOptions()  sys
    call method  ${options}  add_argument  --headless
    create webdriver  Chrome  chrome_options=${options}

    # ImageMagickのトップページへ
    go to  https://www.imagemagick.org/script/index.php

    # リロード前にスクリーンショットを撮る
    capture page screenshot  filename=before1.png

    # もう一度、リロード前のスクリーンショットを撮る
    capture page screenshot  filename=before2.png

    # ページをリロードする：たぶん広告が変わるはず
    reload page

    # リロード後のスクリーンショットを撮る
    capture page screenshot  filename=after.png

    # ブラウザを閉じる
    close browser

    # ImageMagickを使って、差分があるかを確認する
    ${rc}  ${output} =  run and return rc and output  compare -metric AE before1.png before2.png diff1.png

    # リロードする前なので、差分はないはず
    run keyword if  ${output} == 0  log to console  差分はありません

    ${rc}  ${output} =  run and return rc and output  compare -metric AE before1.png after.png diff2.png

    # リロード後は差分があるはずなので、差分を表示する
    run keyword if  ${output} != 0  run  open diff2.png


*** TestCases ***

ImageMagickサイトでのテスト
    スクリーンショットを撮って差分を確認する

実行

robotコマンドで実行してみます。

$ robot imagemagick.robot 
==============================================================================
Imagemagick                                                                   
==============================================================================
ImageMagickサイトでのテスト                                           差分はありません
ImageMagickサイトでのテスト                                           | PASS |
...

成功したようです。

また、画面に以下のような画像が表示されました。

f:id:thinkAmi:20170727221723p:plain