node.jsのいろいろなモジュール45 – node-huxleyでブラウザ動作の記録＆スクショ撮影

ブラウザ動作を記録

Huxleyとは、Facebookが開発したPython製のソフトウェアです。 HuxleyはSeleniumと連携してテスト実行時ログとスクリーンショットを作成します。 そして、ブラウザ動作の再現ができるようになっています。

そして、今回紹介するnode-huxleyとは、このHuxleyのnode版です。 Githubによると、次の機能を持っているみたいです。

• ブラウザのアクションを記録/再生
• スクリーンショットを取る
• スクリーンショットの比較を行う

では、node-huxleyをセットアップして動作を確認してみましょう。

環境構築方法

今回使用した動作環境は以下のとおりです。

• OS : MacOS X 10.7.5
• Node.js : v0.10.8
• npm : 1.2.23

npmを使用して必要なモジュールをインストールしましょう。 node-huxley本体と、Seleniumサーバをグローバルオプションつきでインストールします。

% npm install -g huxley
% npm install -g selenium-server

Githubにはスクリーンショット比較用にGraphicsMagickというソフトを使用するようなので、インストールしておきましょう。

% brew install graphicsmagick

Huxleyを使ってみる

サンプルアプリ作成

まずはテスト対象となるnodeで動く簡単なWebアプリを作成します。 指定したhtmlを表示するだけのシンプルなWebサーバを作成しましょう。 ※connectモジュールのインストールを忘れずに

% mkdir huxley 
% cd huxley
% mkdir app
% cd app
% npm install connect

huxley/app/app.jsを次のような内容で作成します。

var connect = require('connect');
connect.createServer(
    connect.static(__dirname)
).listen(7777);

表示するsample.htmlを作成しましょう。 ここにテスト用のHTMLがあるので、そのまま使用しましょう。

ファイルが作成できたら、アプリを起動します。

% node app.js

アプリが起動したら、ブラウザでhttp://localhost:7777/sample.htmlにアクセスしてみてください。 下記のような画面が表示されます。

node-huxleyでアクションの記録＆再生&スクリーンショット取得

次は、node-huxleyを使って先ほどの画面の動作を記録してみましょう。 exampleディレクトリを作成し、Hexleyの設定ファイルを作成します。

% cd /path/your/huxley
% mkdir example
% cd example
% vi Hexleyfile.json

Hexleyfile.jsonは、テストケース毎にnameとurl(screenSuzeはオプション)を指定します。 ここでは「1 type and toggle」と「2 modal」というテストケースを用意します。

[
  {
    "name": "1 type and toggle",
    "screenSize": [1000, 600],
    "url": "http://localhost:7777/sample.html"
  },
  {
    "name": "2 modal",
    "url": "http://localhost:7777/sample.html"
  }
]

Seleniumサーバをバックグラウンドで起動し、Hexleyの記録を開始しましょう。 -rオプションをつけると、記録モードで実行されます。

% selenium &
% hux -r

上記コマンドを実行すると、ブラウザ(デフォルトではファイアフォックス)が起動してsample.htmlが表示されます。

ここからはブラウザとコンソールを交互に操作します。コンソールでエンターキーを押すと、 その時点でのスクリーンショットが取得されます。

Running test: 1 type and toggle
Begin record
Type q to quit, l for taking a screenshot and marking a live playback point, and anything else to take a normal screenshot.
q/l/*:
1 screenshot recorded.

次にテキストフィールドに「taro」と入力します。その後またコンソールでエンターキーを押します。

そして、チェックボックスにチェックをつけ、再度コンソールでスクリーンショットを取得しましょう。 最後にコンソールでqを押せば、記録が終了します。 その後、２つめのテストケース実行のために再度ブラウザが起動します。 次はLaunch modalボタンを押し、画面動作を確認したらコンソールでエンターキーを押してスクリーンショットを取得したら、 qを入力して記録を終了します。

以上でHuxleyによる記録が完了しました。 exampleディレクトリを見てみると、それぞれスクリーンショットが取得され、record.jsonには操作履歴が記述されています。 また、テストの再生を行いたい場合には、huxコマンドを実行すれば、ブラウザが起動して記録した内容が再生されます。 なお、そのときに-uオプションを使用すれば、スクリーンショットも取得し直します。

% hux -u //テストを再生し、スクリーンショットも取得し直す

まとめ

さて、今回はSeleniumと連携してブラウザの自動実行&自動スクリーンショット取得を行うモジュール、 node-huxleyを紹介しました。 一度テスト内容を記録しておけば、面倒なエビデンス取得作業やレグレッションテストの実行が楽にできそうですね。

参考サイトなど

• Github: https://github.com/chenglou/node-huxley