検索
連載

PhantomJSとJasmineで振る舞い駆動開発なJavaScriptテスト：フレームワークで実践！ JavaScriptテスト入門（2）（1/3 ページ）

しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載

[竹澤陽，TIS　コーポレート本部 戦略技術センター] PC用表示 関連情報
Share
Tweet
LINE
Hatena

前回は、JavaScriptテストの基本、今回からフレーワムークを紹介

　前回の「JavaScriptテストの基礎知識と使えるフレームワーク6選」では、JavaScriptのテストを取り巻く環境や、JavaScriptのテストに使用できるフレームワークの紹介を行いました。今回からは、前回の記事で紹介されたフレームワークを使用して実際にJavaScriptのテスト環境を構築し、テストを行うまでの流れを解説します。

　今回は「PhantomJS」と「Jasmine」を取り上げます。なお、今回使用した環境は以下の通りです。

  • Amazon Web Services EC2
  • Amazon Linux AMI 2012.03 64bit
  • PhantomJS 1.6.1および1.7.0
  • Jasmine 1.2.0

ブラウザなしでWebページを表示・実行できる「PhantomJS」

　PhantomJSはWebブラウザなしでJavaScriptの実行が可能なツールです。内部ではQtWebKitを使用しているため、単にJavaScriptを実行するだけではなく、DOMやCSSの取り扱いや、CanvasやSVGによる描画などにも対応しています。以前は「X Server」の機能を必要としていましたがバージョン1.5.0からはその必要もなくなり、名実ともにヘッドレスなツールとなっています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

PhantomJSのインストール

　2012年9月22日に最新バージョンの1.7.0が公開され、同時にWindows／Mac用のバイナリも提供されましたが、Linux向けバイナリは2日ほど遅れての提供となりました。

　以下のインストール手順ではバイナリからのインストール方法と、ソースコードからのインストール方法を併記しておきますので、次回のバージョンアップ時や、Git上の最新版など、バイナリの公開より早く新バージョンを試してみたい方はソースコードからインストールしてください。

PhantomJSをバイナリからインストールする

　公式サイトのダウンロードページからバイナリパッケージをダウンロードし、解凍します。

$ wget http://phantomjs.googlecode.com/files/phantomjs-1.7.0-linux-x86_64.tar.bz2
$ tar jxvf phantomjs-1.7.0-linux-x86_64.tar.bz2
$ mv phantomjs-1.7.0-linux-x86_64 phantomjs

　PATHの通ったディレクトリにphantomjsへのリンクを作成します。

$ sudo ln -s ~/phantomjs/bin/phantomjs /usr/local/bin/phantomjs

　1.7.0が表示されれば正常にインストールできています。

$ phantomjs --version
1.7.0

PhantomJSをソースコードからインストールする

　PhantomJSはQtWebKitを使用しているため、QtWebKitのコンパイルも行われます。QtWebKitのコンパイルには長時間かかるため、EC2インスタンスを使用している場合は一時的にハイCPUインスタンス（c1.mediumなど）に変えた方が良いでしょう。

　コンパイルを行うために必要な各種ライブラリのインストールを行います。

$ sudo yum install gcc gcc-c++ make git openssl-devel freetype-devel fontconfig-devel

　バイナリパッケージと同じく、公式サイトからソースコードをダウンロードし、ビルドします。

$ wget https://phantomjs.googlecode.com/files/phantomjs-1.7.0-source.zip
$ unzip phantomjs-1.7.0-source.zip
$ cd phantomjs-1.7.0
$ ./build.sh
$ mv phantomjs-1.7.0 phantomjs

　PATHの通ったディレクトリにphantomjsへのリンクを作成します。

$ sudo ln -s ~/phantomjs/bin/phantomjs /usr/local/bin/phantomjs

　1.7.0が表示されれば正常にインストールできています。

$ phantomjs --version
1.7.0

PhantomJSの動作確認

　無事PhantomJSがインストールできたので、動作確認をかねて、いくつかサンプルプログラムを動かしてみます。

phantomjs/examples/hello.js

　最初は、この「hello.js」です。名前からも想像が付くように、このサンプルはconsole.logを使ってログを出力するだけのJavaScriptです。console.logの出力結果はターミナル上に表示されます。

console.log('Hello, world!');
phantom.exit();

$ phantomjs ~/phantomjs/examples/hello.js
Hello, world!

phantomjs/examples/phantomwebintro.coffee

　続いて、サンプル「phantomwebintro.coffee」ですが、Web上のページを開き、jQueryを読み込んだうえで特定要素のテキストを表示しています。容易にほかのページが開けること、そのページに外部のJavaScriptを追加できること、DOMを扱ってページ内のテキストを取得できることなどが確認できます。

　また、このスクリプトはCoffeeScriptで記述されています。PhantomJSはJavaScriptとCoffeeScriptの両方に対応しているため、サンプルスクリプトに関してもJavaScriptで記述された版と、CoffeeScriptで記述された版が含まれています。注意点ですが、サンプルスクリプトはJavaScript版とCoffeeScript版が別々にメンテされているらしく、同一サンプルでも拡張子次第で動作が異なることがあります。

# Read the Phantom webpage '#intro' element text using jQuery and "includeJs"
page = require('webpage').create()
page.onConsoleMessage = (msg) -> console.log msg
page.open "http://www.phantomjs.org", (status) ->
  if status is "success"
    page.includeJs "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", ->
      page.evaluate ->
        console.log "$(\"#intro\").text() -> " + $("#intro").text()
      phantom.exit()

$ phantomjs ~/phantomjs/examples/phantomwebintro.coffee
$("#intro").text() ->
Source Code
Documentation
API
Examples
FAQ
・
・
・

render.js

　QtWebkitを内蔵していることによって、PhantomJSではブラウザで表示した際のスクリーンショットを取得することも可能です。付属のサンプルにもrender_multi_urlという似たサンプルがありますが、いくつかの制限があるため、新しくスクリプトを記述します。このスクリプト「render.js」は特定のURLを表示して、そのスクリーンショットを保存するスクリプトです。

　スクリプト次第でテスト中に自動的にエビデンスを取得したり、操作マニュアルの作成に利用するなどの使い方が考えられますが、日本語サイトでは文字化けするため、先に日本語フォントを導入する必要があります。

$ sudo yum install ipa-gothic-fonts.noarch
$ sudo yum install ipa-mincho-fonts.noarch

　また、dejavuフォントが入っている環境ではIPAフォントをインストールしてもdejavuフォントが優先して利用され、文字化けしたままになってしまいます。これは/etc/fonts/fonts.confの設定変更だけでは避けられなかったため、今回はdejavuフォント自体を移動することでIPAフォントが使用されるようにしています。

$ sudo mv /usr/share/fonts/dejavu /tmp

$ vi render.js
var page = require('webpage').create();
page.open("http://www.atmarkit.co.jp/ait/articles/1210/04/news113.html", function(status) {
  console.log(status);
  page.render("render.png");
  phantom.exit();
});
$ phantomjs render.js
PhantomJSで取得したスクリーンショット
PhantomJSで取得したスクリーンショット

　PhantomJSのインストール、動作確認が終わり、コンソール上でJavaScriptの実行結果を取得できるようになりました。続いてはPhantomJSの上で動作させるJavaScriptフレームワーク「Jasmine」のインストールを行います。

　　　　　　 | 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る