コンテンツへスキップ
Tags

,

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

by : 2015/07/28

Webブラウザを操作する系統のユニットテストは作るのがとても大変で、その後のメンテナンスコストも大きいのが問題です。SeleniumIDEを使ってブラウザの操作をスクリプト化し、テストに組み込むのが一般的に行われていますが、画面やシステムの変更が発生するとテストはすべて破棄しなければならないくらい再利用性が低いです。

そこでhifive開発チームがリリースしたのがPitalium（ピタリウム）になります。Pitaliumは、マルチデバイスを対象としたWebアプリ開発におけるリグレッションテストを自動化・省力化するためのライブラリです。hifiveのテスト支援ツールの一つとして、Apache2.0ライセンスにて無償で利用できます。

PitaliumはSeleniumの中で使うことが出来ます。DOMや画面上の文字を比較するのではなく、スクリーンショットを使って見た目上の比較を行うのがポイントになっています。

今回はまずPitaliumを使うための環境作りについて紹介します。

必要なソフトウェアのダウンロード

PitaliumはSeleniumと組み合わせて使います。そのため、以下のソフトウェアが必須になります。

  • Java
    Javaソフトウェアをダウンロードよりダウンロードしてください。
  • Selenium Server
    Selenium Downloads より selenium-server-standalone–2.xx.x.jar をダウンロードしてください。
  • InternetExplorerDriver（IE Driver）
    スクリーンショット時に幅と高さが変わる問題を修正したバージョンを用意しています。これらはPitaliumに同梱されていますので、Pitaliumダウンロードページからpitalium-x.x.x.zipをダウンロードし、zipを展開したフォルダの下記の場所から取得して下さい。
    32bit版：pitalium_x.x.x/IE/x86/IEDriverServer_h5mod_2.xx.x.exe
    64bit版：pitalium_x.x.x/IE/x64/IEDriverServer_h5mod_2.xx.x.exe
  • Chrome driver
    Downloads – ChromeDriver – WebDriver for Chromeより ChromeDriver をダウンロードしてください。

その他、今回は下記ソフトウェアも利用します。

  • Eclipse
    テストを実行する際に使っています。Eclipse DownloadsよりEclipse IDE for Java Developersをダウンロードしてください。

ファイルの配置について

今回は、

  • Selenium Server
  • InternetExplorerDriver（IE Driver）
  • Chrome driver

が Cドライブ直下のtestlibディレクトリの中に配置されていることとします。下の画像のようになります。

（ただし、修正版IE Driverのファイル名はIEDriverServer_h5mod_x.xx.x.exeのようになります。）

Selenium Gridの起動

PitaliumはSeleniumの平行実行版であるSelenium Grid上で実行するようになっています。そこでまずはSelenium Serverを起動します。

java -jar C:/testlib/selenium-server-standalone-2.46.0.jar -role hub

設定ファイルの記述

次にSelenium Serverに接続するノードに関する設定ファイルを記述します。ファイルは C:\testlib\NodeConfigBrowser.json にあるものとし、内容は以下のように記述します。

{
  "capabilities": [
    {
      "browserName": "firefox",
      "maxInstances": 3,
      "seleniumProtocol": "WebDriver"
    },
    {
      "browserName": "chrome",
      "maxInstances": 3,
      "seleniumProtocol": "WebDriver"
    },
    {
      "browserName": "internet explorer",
      "maxInstances": 1,
      "seleniumProtocol": "WebDriver"
    }
  ],
  "configuration": {
    "hub": "http://localhost:4444/grid/register"
  }
}

ローカルのSelenium Serverに接続するノードおよびそのブラウザについて記述します。そしてファイルを記述したらノードを起動します。

java -jar C:/testlib/selenium-server-standalone-2.46.0.jar ^
    -role node ^
    -nodeConfig C:/testlib/NodeConfigBrowser.json ^
    -Dwebdriver.ie.driver=C:/testlib/IEDriverServer_h5mod_2.46.0.exe ^
    -Dwebdriver.chrome.driver=C:/testlib/chromedriver.exe

IEに対応するドライバ、Chromeに対するドライバをそれぞれ指定しているのが分かるかと思います。IEを使う場合は初期設定として、IE上の設定変更が必要になります。こちらの内容を参考して、設定を変更してください。

Eclipseでの作業

続いてEcpliseでテストを実行してみます。まず新規でJavaプロジェクトを作成します。今回はWebDriverTestとしています。作成したらsrc/testというフォルダを作成します。そしてさらにその中に com.htmlhifive.sample という名前のパッケージを作成します。

さらにlibsディレクトリを作成し、その中にSeleniumのjarファイルおよびlibsフォルダの内容をコピーします。

次にプロジェクトのプロパティを開いて、Javaのビルドパス > ライブラリと開きます。そして jar追加ボタンを押し、先ほどコピーしたlibsフォルダ以下のjarファイルをすべて選択し、OKボタンを押します。

テストの記述

では com.htmlhifive.sample パッケージの中に SeleniumGridTestSample.java というファイルを作成し、以下のように記述してみましょう。

package com.htmlhifive.sample;
 
import org.junit.Test;
import org.openqa.selenium.remote.*;
import org.openqa.selenium.Platform;
import java.net.*;

public class SeleniumGridTestSample {
    @Test
    public void test() throws Exception {
        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setPlatform(Platform.WINDOWS);
        capabilities.setBrowserName("internet explorer");

        RemoteWebDriver driver =
                new RemoteWebDriver(new URL("http://localhost:4444/wd/hub"), capabilities);
        driver.get("https://www.htmlhifive.com/");
    }
}

このファイルを実行すると、 IEが立ち上がってhifiveのWebサイトが表示されるはずです。これはSeleniumのノードからGridを経由してIEが立ち上がっている状態ということです。

今回は以上になります。これでSelenium Gridが使えるようになりましたので、次回から実際にPitaliumを使ってみましょう。

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

From → HTML5, Pitalium

«
»
%d人のブロガーが「いいね」をつけました。