読者です 読者をやめる 読者になる 読者になる

ボクココ

サービス開発を成功させるまでの歩み

CasperJS と Jenkins によるブラウザ自動化とテスト

Selenium を使った例があったけど、それよりもCasperJS 使った方が楽だと思うので、自分のやっているやり方を紹介。

「Selenium2」テスト徹底活用! Jenkinsによる自動実行とSelenium Grid2による複数環境でのテスト 上記サイトのやり方だと、少なくとも以下の環境が必要。

CasperJS を使えば以下でOK

  • PhantomJS
  • CasperJS
  • Jenkins
  • Git

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' を使い、ファイルに値を保存しておいておくこともできる。

まとめ

CasperJSは 速い、軽い、自由度が高い