Windowsでブラウザ自動キャプチャ - Nightmare / CasperJS (PhantomJS)
2016年2月追記
こちらの記事も参考にどうぞ。
モチベーション
NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった - Qiita
with:
Nightmare
A high level wrapper for Phantomjs.CasperJS, a navigation scripting and testing utility for PhantomJS and SlimerJS
CasperJS is an open source navigation scripting & testing utility written in Javascript for the PhantomJS WebKit headless browser and SlimerJS (Gecko).casperjs
コマンドを使って利用する。何をするかを JS で記述できる。
どう違うんや
コード比較があってよい。スッキリ書ける Nightmare でいこう。
PhantomJS
PhantomJS | PhantomJS
- v2.0 がダウンロードできる(それがよいとは言っていない)
PhantomJS 2.0 was released on January 23, 2015.
Install Nightmare
> npm install nightmare
はいエラー
On Windows:
Python ならまだしも Visual Studio はちょっと。。
チーム開発でメンバに要求するにはナンセンスかな。
ということで Nightmare 断念。
Install CasperJS
CasperJS v1.0.4 (Stable) + PhantomJS v2.0.0
> set path=%path%;C:\util\casperjs-1.0.4\batchbin > set path=%path%;C:\util\phantomjs-2.0.0-windows\bin > casperjs Couldn't find nor compute phantom.casperPath, exiting. C:\util\casperjs-1.0.4\batchbin\..\bin\bootstrap.js:241 in loadCasper
CasperJS はまだ PhantomJS v.2.0 に対応できていない。
CasperJS v1.1-beta3 + PhantomJS v2.0.0
> set path=%path%;C:\util\casperjs-1.1-b3\batchbin > set path=%path%;C:\util\phantomjs-2.0.0-windows\bin > casperjs CasperJS needs PhantomJS v1.x C:\util\casperjs-1.1-b3\batchbin\..\bin\bootstrap.js:91 in __die
同上。
CasperJS v1.1-beta3 + PhantomJS v1.9.2
過去のリリース版のダウンロードはここ
- https://code.google.com/p/phantomjs/downloads/list
phantomjs-1.9.2-windows.zip
を選択した
> set path=%path%;C:\util\casperjs-1.1-b3\batchbin > set path=%path%;C:\util\phantomjs-1.9.2-windows > casperjs CasperJS version 1.1.0-beta3 at C:/util/casperjs-1.1-b3, using phantomjs version 1.9.2 Usage: casperjs [options] script.[js|coffee] [script argument [script argument ...]] casperjs [options] test [test path [test path ...]] casperjs [options] selftest casperjs [options] __selfcommandtest Options: --verbose 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 and slimerjs Read the docs http://docs.casperjs.org/
やっと成功。
似たようにハマってた人いた
キャプチャしてみる
google.js
var casper = require('casper').create(); casper.start('http://google.com/', function() { this.capture('google.png'); }); casper.run();
> casperjs google.js
エッフェル塔 完成 126 周年。おめでとうございます。