PhantomJS

PhantomJS は画面を持たないブラウザのようなもので、これを使えば画面キャプチャも実装できる。わざわざブラウザを入れなくてもいいので軽いしCUI環境でも容易にインストールできる。

PhantomJS だけでもブラウザ自動化はできるのだが、後述するCasperJS を使うとより強力な機能を楽に実装することが可能だ。

CasperJS

CasperJS により、以下のことができるようになる。本家の翻訳

ブラウザナビゲーションの定義
フォームを埋めてsubmit
click してリンク移動
スクリーンショット
リモートDOMのテスト
event のロギング
バイナリを含むリソースのダウンロード
機能テスト。 junit xml で結果を保存
Web コンテンツのスクレイピング

Jenkins と連携させれば、各自がCasperJS の環境を用意しなくても、Jenkins 上でビルドを実行すれば自動テストやWebスクレイピングを自動化できるようになる。 Jenkins なら毎晩特定のサイトに何かして、その結果をメールで送ったりどこかに保存したりできる。日頃のテストやその他ブラウザで行う雑務を自動化し、チームメンバーに共有しよう。

環境構築

詳細は省くが、Jenkins を立てたサーバに PhantomJS と CasperJS を入れて、フリースタイルジョブを作成し、シェルの実行で

casperjs **.js.coffee

するだけでOK. casperjs コマンドは JavaScript or CoffeeScript のcasperスクリプトファイルを実行する。またcasperjs コマンドはphantom コマンドを継承しているので、phantomjs で使うオプションを指定することも可能。例えば ignore ssl errors, debug mode, cookieの保存場所, コマンドライン引数, proxy など。結果はどこかのファイルにリダイレクトして保存しておいて、成果物の保存でそこのパスを指定してあげればJenkins上で誰もが簡単にダウンロードできる仕組みができる。

例

スクリプトは以下のようになる。

var casper = require('casper').create();

casper.start('http://casperjs.org/', function() {
    this.click('#submit');
});

casper.then(function() {
    this.echo(this.getTitle());
});

casper.run();

ドキュメントが非常によくまとまっているので、まずは使い方とAPIドキュメントをざっと見ればだいたい使い方は理解できる。上記では特定URL に移り、対象IDのリンクをクリックしてその遷移先のtitleを出力している。要素をとってきたり、値を入れたりするときは casper.fill や casper.evaluate を使ったり。

利用例

例えば以下のようなケースで有用。

毎日ブラウザテストを走らせて、もし失敗した場合はすぐにメールが来るような仕組みにしたい

割とUIが頻繁に変わるサイトはおすすめしないが、自分のサイトか何かで問題が起きていないか毎日監視するのを自動化する。自分の場合はAPI を自動化している。 POST で値を送って特定のJSONが正しくかえってきているかのテスト。

同じフォームに値を入力して楽にテストユーザを作りたい

これも自分がやっていること。自社サービスを作っているとテストユーザが欲しいことがよくある。そのときに毎回新規入会ページに行ってユーザを作って・・というのはとても面倒なので、ワンクリックでユーザを作れるようにする。 CasperJSなら require 'fs' を使い、ファイルに値を保存しておいておくこともできる。