CasperJSをWindows7にインストールしてE2Eテストする

2015年 07月 28日

はてなブックマークはてブ
Google+1Google+
PocketPocket
CasperJSをWindows7にインストールしてE2Eテストする

    Protractor以外のE2Eテストフレームワーク

    先日のAngularJSナシでもできる!Protractor(selenium-webdriver+jasmine)でWebサイトのE2Eテスト入門でもご紹介したE2Eテストフレームワークですが、Protractor以外にも色々と試してみている途中です。

    今回は、その中でもメジャーなイメージのあるCasperJSについてご紹介します。

    CasperJSとは

    CasperJSはPhantomJS(WebKit)やSlimerJS(Gecko)といったヘッドレスブラウザを使用したE2Eテストフレームワークです。

    Protractorが実際にGoogleChromeやFirefoxで画面をレンダリングしてE2Eテストするのに対し、CasperJSなどヘッドレスブラウザを使用したE2Eテストフレームワークは実際の画面上のレンダリングを行いません。

    人間の目で見て分かるような画面上のレンダリングをしないので、高速なE2Eテストを実行することが可能です。

    CasperJSの注意点

    CasperJSを使用するにあたって、現在のところ少し注意が必要な部分があります。

    PhantomJSの最新版に対応していない

    本記事を執筆している時点で、CasperJSはPhantomJS2.0以降の最新版に対応していないようです。

    そのため、1.9系のPhantomJSをインストールしないと正常に動作してくれませんでした。

    今回はphantomjs-1.9.2を使用することにしました。

    Windows版は手動でPATHを設定する必要がある

    これについてはCasperJS公式サイトのドキュメント内、CasperJS on Windowsで説明されている通りです。

    環境変数PATHに慣れている方であればさっと設定できると思いますが、不慣れな人にはあれだけの説明ではチンプンカンプンかと思いますので、後に手順を説明したいと思います。

    CasperJSのインストール

    それでは、今回は環境変数PATHの兼ね合いもあるので、Windows7x64にCasperJSをインストールする方法について説明します。

    PhantomJSのインストール

    まずはPhantomJSをインストールします。

    前述の通り、CasperJSは現在のところPhantomJS2.0以降の最新版に対応していませんので、phantomjs-1.9.2の中の「phantomjs-1.9.2-windows.zip」をダウンロードします。

    zipファイルがダウンロードされますので、展開(解凍)するとphantomjs-1.9.2-windowsディレクトリ(フォルダ)ができます。
    phantomjs-1.9.2-windowsディレクトリが二重になって展開されている場合は、内側(子)のディレクトリのみ使用してください。

    次に、ディレクトリ名を「phantomjs-1.9.2-windows」から「phantomjs」に書き換え、Cドライブ直下へコピー&ペースト、または移動します。
    ディレクトリ名をphantomjsに変更するのは、環境変数PATHを設定する際に記述を短くするためなので、必要なければそのままでも構いません。

    Cドライブ直下へphantomjsディレクトリを移動できたら環境変数PATHを設定しますが、CasperJSも環境変数PATHを設定する必要があるので、後でまとめて設定します。

    CasperJSのインストール

    CasperJSのインストール方法には何種類か用意されていますが、今回はzipファイルをダウンロードしてくる方法でインストールします。

    CasperJSの公式サイト内、Installing from an archiveの中で「Latest development version (master branch):」という小見出しがついている方のzipファイルへのリンクをクリックしてください。

    zipファイルがダウンロードされたらPhantomJSのときと同様に展開し、ディレクトリ名を「casperjs」に書き換えてCドライブ直下へコピー&ペースト、または移動します。

    これもPhantomJSと同様ですが、ディレクトリが二重に展開されていたら、内側(子)のほうだけをcasperjsに書き換えて使用してください。


    もしnpmでインストールしたいのであれば、次のコマンドです。

    npm install -g casperjs
    

    gitからcloneしたいのであれば、次の通りです。

    git clone git://github.com/n1k0/casperjs.git
    

    環境変数PATHの設定

    まずはスタートメニュー内の「コンピューター」の項目を右クリックし、「プロパティ」をクリックしてください。

    次に左側のメニューに「システムの詳細設定」という項目があるので、クリック。

    「システムのプロパティ」が開くので、「詳細設定」タブ(もう開いていると思います)の最下部「環境変数」をクリックしてください。

    「○○のユーザー環境変数」と「システム環境変数」とがありますが、ユーザー環境変数の中から、変数が「Path」となっている行を探してダブルクリックします。

    「ユーザー変数の編集」が表示され、「変数値」のほうに何か内容が入っていると思います。既に入っている変数値の内容を変更してしまわないよう気をつけながら、末尾に次の内容を追加してください。

    (既に入力されている変数値の内容);C:casperjsbin;C:phantomjs
    

    PhantomJSとCasperJSの動作確認

    コマンドプロンプトを開き、次のコマンドを入力してみてください。

    それぞれバージョンが表示されれば大丈夫です。表示されない場合は、おそらくPATHの設定が適切でない可能性がありますので、そこを見直してみてください。

    PhantomJSの動作確認

    phantomjs --version
    

    CasperJSの動作確認

    casperjs --version
    

    Quickstartを参考に使ってみよう

    ここまできたら、あとはCasperJSの公式サイト内、QuickstartTestingのページを参考に使ってみてください。

    「casper.start(‘http~」のように書かれたソースコードはテキストエディタで「sample.js」など好きに命名した.jsファイルに記述し、「Run it:」の部分はコマンドプロンプトへ入力するコマンドです。

    CasperJSはヘッドレスブラウザを使用するため、Protractorを使ったE2Eテストのように画面上にWebサイトが描画されることはありません。
    もし画面の表示状態を確認したい場合などにはcapture()でスクリーンショット画像を出力して確認することになります。

    テスト実行中の挙動が目に見えないので、jQueryなどでclickイベントからアニメーションさせる場合の挙動確認を自動化したい場合などには適しているとは言いがたいと思います。

    しかし、たとえばogpの値がちゃんと入っているか、リンク切れがないか、フォームを入力して送信した際に正常に動作するかなど、画面の描画が必要ない部分の出力確認であれば軽量で高速なE2Eテストを実現できます。

    この記事をシェアする

    はてなブックマークはてブ
    Google+1Google+
    PocketPocket

    この記事へのコメント

    このサイトをシェア

    このサイトをシェアするボタンです。

    各記事ごとのシェアは各記事のタイトルの下のボタンから。

    SNSのアカウントのページへのリンクは画面最下部のフッター内にあります。