こんにちは、エンジニアのjunです。以前このブログで、PhantomJSを紹介しました。今回は、そのPhantomJSを拡張したユーティリティCasperJSを紹介したいと思います。

CasperJSとは

CaperJSとは、ヘッドレスブラウザーであるPhantomJSを拡張したユーティリティです。簡単なWebサイトのスクレイピングから、JavaScriptのエミュレーション、手順を指定したWebサイトの挙動テストといったことを可能にしています。今回は、このCapserJSを用いて、フォームの動作確認を自動化したいと思います。

CasperJSを使用する理由

クリックイベントなどのGUI操作がエミュレートできる

フォームへの入力やクリック、クリックによるJSのエミュレートなどが簡単に実装できるため、実際にブラウザでの挙動に近い挙動が得られます。

CoffeeScriptで記述できる

わりと趣味の範疇かもしれないのですが、CoffeeScriptを使用するとコード量が減り可読性が増すと個人的には思っています。(慣れていないと戸惑うことがあると思いますが)

テストケースが使える

テストケースでユニットテストが行えるので、ウェブサイトが正しい挙動をしているのかテストすることができます。

Jenkinsと連携できる

テストケースを使用すると、その結果をxUnit形式のxmlファイルを出力することができるので、JenkinsなどのCIと連携することができます。

インストール

Macで使用するのでHomebrewでインストールします。

npmでインストールすることもできます。ただし、後述しますが、npmでインストールした場合、PhantomJSが読み込まれないバグもあるようなので注意が必要です。

ウェブスクレイピングしてみた

まずは、弊社のサービス Applivを使用して、簡単にウェブスクレイピングをしてみました。

このコードをsample.coffeeとして保存し実行します。

すると、Applivのタイトル「Appliv[アプリヴ] – iPhone・iPadアプリが探せる、見つかる」が出力され、画面のスクリーンショットが保存されます。出力されたファイルがこちらです。

Appliv

解説

簡単に解説します。sample.coffeeの1行目で、CasperJSオブジェクトを作成し、以後このオブジェクトを使用します。まずは、2行目CasperJSのstartメソッドでURLを開きます。ほとんどの場合このstartから始めます。3行目では、getTitleメソッドでページのタイトルを取得、echoで表示します。6行目では、captureというメソッドでスクリーンショットを保存します。最後にrunメソッドで処理を実行します。

ちなみに、CoffeeScriptに慣れてない方もいらっしゃると思うのでsample.coffeeを通常のJavaScriptで書きなおしました。

フォームの動作確認をする

ウェブサイトを持っていると、お問い合わせフォーム等、何らかのフォームがあると思います。これらのフォームの動作確認を、手動でやるのは相当めんどくさいです。そこで、フォームの動作確認を自動化したいと思います。

以下のようなメールフォームを用意しました。フォームに投稿すると送信者と管理者にメールが飛びます。※簡略化のため、確認画面はないものとします。

casper_form

このフォームは以下の様なDOM(HTML構造)になっており、送信するとthanks.phpというURLに遷移します。

このフォームに、CasperJSを使用して投稿してみます。以下の様なコードを用意しました。

基本的には、sample.coffeeと同じように書きます。フォームに値を入力するのには、fillというメソッドを使用します。fillの第1引数には、[フォームのname属性]:[入力する値]という形式のオブジェクトを、また第2引数には、入力後そのフォームをsubmitする(true)かしないか(false)を与えます。

では実行します。

フォームに送信したため、フォームが正しく動作しているのであれば、メールが届くはずです。これで自分で、自分でフォームに入力する手間はなくなりました。

テストケースを使用する

フォームが動作したかどうかを、メールが届いたかどうかで確認するのも割とめんどくさいです。そこで、CasperJSのテストケースを使用して、フォームの挙動をテストしたいと思います。テストケースとはユニットテストと同じようなものです。

実際に、10行目と、17行目でテストケースを使用しています。10行目ではフォームに送信ボタンがあることをテスト、17行目ではフォームの送信した遷移先がthankyou.phpであることをテストしています。実際にテストを実行します。

テストケースを実行するときは、casperjsにtestというオプションを加えて実行します。以下が実行結果です。どのテストが通ったかまで確認することができます。
casper_test

Jenkinsと連携させる

エンジニアはめんどくさがりの生き物です。毎回スクリプトを実行するのも面倒です。定期的に勝手にテストしてほしい・・・ CIの出番です!弊社では、Jenkinsを使用しているのでJenkinsと連携させ、定期的に自動で実行されるようにします。ちなみにTravis CIと連携する方法もあるようです。

form_test.coffeeの最後の行に以下の1行を追加し、XUnit形式のxmlファイルを出力させます。

Jenkinsでの設定

ログが出力されるようになったので、Jenkinsの設定を行います。あらかじめ、npmとその設定、ソースコードをgitで管理しておきます。そしてビルド実行時に以下のシェルスクリプトを実行するようにします。

2行目と3行目の処理ですが、npmでcasperjsをインストールすると、「PhantomJSがないよ」といわれるバグがあるので、場所を指定してやります。

最後に、ビルド後の処理として、「JUnitテスト結果の集計」という項目を追加しlog.xmlを指定することで、テスト結果の推移をグラフで見ることができます。これで、Jenkinsのダッシュボードを見るだけで、フォームが動いているかどうかを確認できます。
casper_jenkins
確認するのもめんどくさい場合は、ビルドに失敗した時だけ、メールを飛ばすようにすればいいでしょう。(結局なにかしら確認をする必要はでてきます。)

まとめ

今回はCasperJSを使って簡単なフォームの動作確認を行いました。実際のフォームは、もっと項目が多かったり、複雑だったりしますが、CapserJSは簡単なので、実装に時間はかからないと思います。弊社のサービスサイトの動作確認もCasperJSを使用しています。フォームの確認以外にも、いろいろ活用できると思うので、ぜひCasperJSを使用してみてください。