しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載
前回の「JavaScriptテストの基礎知識と使えるフレームワーク6選」では、JavaScriptのテストを取り巻く環境や、JavaScriptのテストに使用できるフレームワークの紹介を行いました。今回からは、前回の記事で紹介されたフレームワークを使用して実際にJavaScriptのテスト環境を構築し、テストを行うまでの流れを解説します。
今回は「PhantomJS」と「Jasmine」を取り上げます。なお、今回使用した環境は以下の通りです。
PhantomJSはWebブラウザなしでJavaScriptの実行が可能なツールです。内部ではQtWebKitを使用しているため、単にJavaScriptを実行するだけではなく、DOMやCSSの取り扱いや、CanvasやSVGによる描画などにも対応しています。以前は「X Server」の機能を必要としていましたがバージョン1.5.0からはその必要もなくなり、名実ともにヘッドレスなツールとなっています。
2012年9月22日に最新バージョンの1.7.0が公開され、同時にWindows/Mac用のバイナリも提供されましたが、Linux向けバイナリは2日ほど遅れての提供となりました。
以下のインストール手順ではバイナリからのインストール方法と、ソースコードからのインストール方法を併記しておきますので、次回のバージョンアップ時や、Git上の最新版など、バイナリの公開より早く新バージョンを試してみたい方はソースコードからインストールしてください。
公式サイトのダウンロードページからバイナリパッケージをダウンロードし、解凍します。
$ 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は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がインストールできたので、動作確認をかねて、いくつかサンプルプログラムを動かしてみます。
最初は、この「hello.js」です。名前からも想像が付くように、このサンプルはconsole.logを使ってログを出力するだけのJavaScriptです。console.logの出力結果はターミナル上に表示されます。
console.log('Hello, world!'); phantom.exit();
$ phantomjs ~/phantomjs/examples/hello.js Hello, world!
続いて、サンプル「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 ・ ・ ・
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のインストール、動作確認が終わり、コンソール上でJavaScriptの実行結果を取得できるようになりました。続いてはPhantomJSの上で動作させるJavaScriptフレームワーク「Jasmine」のインストールを行います。
Copyright © ITmedia, Inc. All Rights Reserved.