CasperJSで画面キャプチャをとる

システムの画面キャプチャを大量にとる必要があり、とり直しが発生しうることを考慮すると、プログラマブルにキャプチャを取りたいなーとツールを探していると 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

casperjs-google

カレントディレクトリに 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

casperjs-youtube-ipad

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

casperjs-wikipedia_GitHub

id=bodyContent の本文部分だけが保存されました。

まとめ

うまく使えば画面キャプチャの大量生成やシナリオテストの自動化に役立ってくれそうです。

Advertisements
Tagged with: , , , , ,
Posted in web

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Archives
%d bloggers like this: