システムの画面キャプチャを大量にとる必要があり、とり直しが発生しうることを考慮すると、プログラマブルにキャプチャを取りたいなーとツールを探していると CasperJS というのが見つかったので簡易的な使い方をメモ。
CasperJS とは
CaperJS は UI テスト向け高レベルの JavaScript フレームワークで、
という2種類のレンダリングエンジンに対応している。
以下のような用途に使える。
- defining & ordering browsing navigation steps
- filling & submitting forms
- clicking & following links
- capturing screenshots of a page (or part of it)
- testing remote DOM
- logging events
- downloading resources, including binary ones
- writing functional test suites, saving results as JUnit XML
- scraping Web contents
CasperJS は低レイヤーの PhantomJS/SlimerJS に対する高レベルな API でしかないため、これらライブラリの機能制限を受ける。
また、後発の SlimerJS は “SlimerJS will implement all the API of Phantomjs” とうたっているが、一部差異もある。差異については下記ドキュメントを参照。
https://github.com/laurentj/slimerjs/blob/master/API_COMPAT.md
PhantomJS を使ったプロジェクトは CasperJS 以外にもたくさんある。下記ドキュメント(の特に Screenshot Utilities)を参照。
https://github.com/ariya/phantomjs/wiki/Related-Projects
CasperJS のインストール
Gecko 向け SlimerJS は使わず、PhantomJS(WebKit) だけを利用する前提で Linux(Ubuntu 12.04 64-bit) にインストールする。
オフィシャルドキュメントは以下
http://docs.casperjs.org/en/latest/installation.html
Prerequisites は以下
- PhantomJS 1.8.1 or greater. Installation instructions can be found here
- Python 2.6 or greater
PhantomJSのインストール
まずは PhantomJS のインストール
オフィシャルドキュメントは以下
http://phantomjs.org/download.html
$ wget https://phantomjs.googlecode.com/files/phantomjs-1.9.1-linux-x86_64.tar.bz2 $ tar jxfv phantomjs-1.9.1-linux-x86_64.tar.bz2 $ sudo cp phantomjs-1.9.1-linux-x86_64/bin/phantomjs /usr/local/bin/
apt-get だとバージョンが 1.4.0 と随分古い
Python のインストール
Makefile をみると Python を一部のテストで利用しているみたいだけど、他に何で使っているのかは不明。
Python はインストール済みのため、特になにもやらず。
CasperJS のインストール
$ wget https://github.com/n1k0/casperjs/archive/1.1-beta1.tar.gz $ tar zxfv 1.1-beta1.tar.gz $ cd casperjs-1.1-beta1/ $ sudo ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs
最新の安定版である 1.0.3 をインストールしようとするも、リリースノートを読むと PhantomJS 1.9 以降とは互換性がないという残念なことが書いてあったので、仕方なしに開発版を利用した。PhantomJS のバージョンを下げたほうが人柱度は低い。
This release is not compatible with PhantomJS >= 1.9. If you want to use later version of PhantomJS, please switch to the master branch.
https://github.com/n1k0/casperjs/releases/tag/1.0.3
インストールされたことを確認。
$ casperjs CasperJS version 1.1.0-DEV at /home/jsmith/tmp/casperjs-1.1-beta1, using phantomjs version 1.9.1 Usage: casperjs [options] script.[js|coffee] [script argument [script argument ...]] casperjs [options] test [test path [test path ...]] casperjs [options] selftest casperjs [options] __selfcommandtest Options: --direct Prints log messages to the console --log-level Sets logging level --help Prints this help --version Prints out CasperJS version --engine=name Use the given engine. Current supported engine: phantomjs Read the docs http://docs.casperjs.org/
phantomjs 1.9.1 をちゃんと認識出来ている。
キャプチャをとる
API ドキュメントを参考にしながらキャプチャ方法を確認。
http://docs.casperjs.org/en/latest/modules/index.html
以下のメソッドを利用してキャプチャします。
- capture : Proxy method for PhantomJS’ WebPage#render.
- captureBase64 : Computes the Base64 representation of a binary image capture of the current page, or an area within the page, in a given format.
- captureSelector : Captures the page area containing the provided selector and saves it to targetFile:
CasperJS の超基本
クイックスタートを読むこと。
http://docs.casperjs.org/en/latest/quickstart.html
PhantomJS のキャプチャ機能
クイックスタートを読むこと。
https://github.com/ariya/phantomjs/wiki/Screen-Capture
レンダリング結果は PNG 以外にも JPEG, GIF, PDF で出力可能。形式は拡張子で切り替える。
最もシンプルなキャプチャ
まずは hello world! 的な例から
Google のトップにアクセスして保存する。
var casper = require('casper').create();
casper.start('http://google.com/', function() {
this.capture('google.png');
});
casper.run();
$ casperjs google.js
カレントディレクトリに google.png という PNG ファイルが作成されます。
付加情報を渡す
iPad のユーザーエージェントを渡します。
また、viewport を viewport メソッドでデフォルトから変更します。
PhantomJS comes with a default viewport size of 400×300, and CasperJS doesn’t override it by default.
var casper = require('casper').create();
casper.start();
casper.userAgent("Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26" +
" (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25");
casper.open('http://www.youtube.com/').viewport(1024, 690).then(function() {
this.capture('youtube-ipad.png');
});
casper.run();
$ casperjs youtube.js
iPad 向けの画面が少し大きめの解像度で保存されました。
画面遷移する
シナリオテストっぽく画面遷移してキャプチャします。
wikipedia のトップに移動し、検索欄に文字列入力して、検索後の画面に遷移します。
echo で遷移後の画面のタイトルを標準出力します。
また captureSelector を利用してキャプチャ範囲をセレクターで指定します。
var casper = require('casper').create();
casper.start('https://en.wikipedia.org/wiki/Main_Page', function() {
this.fill('form#searchform', {
'search' : 'GitHub',
}, true);
});
casper.then(function() {
this.echo(this.getTitle());
});
casper.viewport(1024, 768).then(function() {
this.captureSelector('wikipedia_GitHub.png', '#bodyContent');
});
casper.run();
$ casperjs wiki.js GitHub - Wikipedia, the free encyclopedia
id=bodyContent の本文部分だけが保存されました。
まとめ
うまく使えば画面キャプチャの大量生成やシナリオテストの自動化に役立ってくれそうです。
Siguniang's Blog 