Pitaliumを使ってスクリーンショットベースのユニットテストを書こう（デモ編）

Seleniumを使ったWebブラウザを自動操作するタイプのテストでは、画面遷移が正しく行われた結果、必要なテキストやDOMが存在することは確認できます。しかしデザインを変更した結果、DOM構造が崩れてしまっているかどうかについては分かりません。

プロジェクトの最初ではちゃんと多数のブラウザでテストを行うと思いますが、更新の度に確認するのは大きなコストです。そうしたデザインの状態においても確認できるのがPitaliumになります。前回の準備編に引き続き、今回は実際にPitaliumを動かすところを紹介したいと思います。

サンプルプロジェクトをダウンロード

まずGitHubにあるサンプルプロジェクトをチェックアウト、またはZipファイルをダウンロードします。

$ git clone git@github.com:hifive/hifive-pitalium.git
$ cd hifive-pitalium

そしてさらに pitalium-sample フォルダに入り、antを実行します。Eclipseからも実行できますが、今回はコマンドプロンプトで実行しています。

$ cd pitalium-sample
$ ant -buildfile ivy_build.xml

しばらく待つと必要なファイルのダウンロード、ビルドが完了します。

Selenium Hubサーバの起動

前回の記事にあった手順でSelelnium Hubサーバを起動しておきます。

$ java -jar selenium-server-standalone-2.46.0.jar -role hub

Eclipseを起動

Eclipseを起動して pitalium-sample プロジェクトを開きます。そして pitalium-sample/src/main/resources/capabilities.json を編集します。デフォルトは次のようになっていますので、必要なものだけを残して後は削除します。WindowsのFirefox/Google Chrome/IE11/IE10/IE9/IE8/IE7に加えてMac OSXのSafari、Android 4.4/5.1/2.3.6/4.0.4、iOS 8.1/8.3などが定義されています。

[
    {
        "platform": "WINDOWS",
        "os": "WINDOWS",
        "browserName": "firefox"
    },
    {
        "platform": "WINDOWS",
        "os": "WINDOWS",
        "browserName": "chrome"
    },
    {
        "platform": "WINDOWS",
        "os": "WINDOWS",
        "browserName": "internet explorer",
        "version": "11"
    },
    {
        "platform": "WINDOWS",
        "os": "WINDOWS",
        "browserName": "internet explorer",
        "version": "10"
    },
    {
        "platform": "WINDOWS",
        "os": "WINDOWS",
        "browserName": "internet explorer",
        "version": "9"
    },
    {
        "platform": "WINDOWS",
        "os": "WINDOWS",
        "browserName": "internet explorer",
        "version": "8"
    },
    {
        "platform": "WINDOWS",
        "os": "WINDOWS",
        "browserName": "internet explorer",
        "version": "7"
    },
    {
        "platform": "MAC",
        "os": "OS X",
        "browserName": "safari"
    },
    {
        "platform": "ANDROID",
        "platformName": "Android",
        "platformVersion": "4.4.4",
        "version": "4.4.4 Xperia Z3",
        "deviceName": "Xperia Z3",
        "os": "Android",
        "browserName": "chrome"
    },
    {
        "platform": "ANDROID",
        "platformName": "Android",
        "platformVersion": "5.1",
        "version": "5.1 Nexus5",
        "deviceName": "Nexus 5",
        "os": "Android",
        "browserName": "chrome"
    },
    {
        "platform": "ANDROID",
        "platformName": "Android",
        "platformVersion": "4.4.4",
        "version": "4.4 Nexus7",
        "deviceName": "Nexus 7",
        "os": "Android",
        "browserName": "chrome"
    },
    {
        "platform": "ANDROID",
        "browserName": "android",
        "version": "2.3.6 Galaxy S2",
        "platformName": "Android",
        "platformVersion": "2.3.6",
        "deviceName": "Galaxy S2",
        "automationName": "selendroid",
        "autoWebview": true
    },
    {
        "platform": "ANDROID",
        "browserName": "android",
        "version": "4.0.4 ASUS Pad",
        "platformName": "Android",
        "platformVersion": "4.0.4",
        "deviceName": "ASUS Pad",
        "automationName": "selendroid",
        "autoWebview": true
    },
    {
        "platformName": "iOS",
        "os": "iOS",
        "platformVersion": "8.1",
        "deviceName": "iPad Air",
        "browserName": "safari"
    },
    {
        "browserName": "safari",
        "deviceName": "iPhone6",
        "os": "iOS",
        "platformName": "iOS",
        "platformVersion": "8.3",
        "version": "8.3"
    }
]

テストの実行

テストファイルは pitalium-sample/src/main/java/com/htmlhifive/pitalium/sample/PtlSampleTest.java  になります。実際に画面キャプチャを行うのは次の処理になります。

assertionView.assertView("sampleCapture", targets, HIDE_ELEMENTS);

UnitTestとして実行すれば、しばらく待つとブラウザが立ち上がり、テストが実行されます。

テストが終わるとresultsフォルダ内にテスト実行日時とその時に撮影したスクリーンショットが保存されます。これで画面が変わっている場合は差分画像も保存されます。

Pitaliumを使えばテストの実行と同時にそのスクリーンショットを残してくれるようになります。デザインの崩れをすべてのブラウザに対して常に確認するというのはとても大変です。Pitaliumを使えば大幅に工数が減るはずです。

次回はさらに踏み込んだ使い方を紹介します。

Pitalium（hifiveリグレッションテストライブラリ） – hifive