※PhantomJSの開発は終了し、リポジトリはアーカイブ化されました。本記事は参考程度にご覧ください。
https://jser.info/2018/06/11/phantomjs-ended/
PhantomJSとは
WebKitベースのヘッドレスブラウザ。WebKitとは主にWebブラウザーで用いられているレンダリングエンジンのこと。PhantomJSはWebKitにbuilt-inされているJavaScriptCore (Safariとかもこれを使っている) というJavaScriptエンジンを採用している。スクレイピングやスクリーンキャプチャなどにも活用可能。
ヘッドレスブラウザ：ヘッドレス・ブラウザとは、Webコンテンツを画面上に描くグラフィック・ユーザ・インタフェース（GUI）を省略したブラウザ
要はコマンド（プログラム）でブラウザを実行できる環境のこと。
プログラムで動きを制御できるので、
「自動化テスト」
「スクレイピング」
などを得意としている。
自動化テストだとSelenium+PhantomJSがセットで出てくることが多い。
Node.js で Seleniumを動かす方法
１. 適当に作業フォルダ作る
$ mkdir selenium-test
２. Selenium install
$ npm -g install selenium-webdriver
$ npm install selenium-webdriver
※動かない場合はlocalにもselenium-webdriverを入れる。
３. Chrome WebDriver install
https://sites.google.com/a/chromium.org/chromedriver/downloads
※最新バージョンを入れる
４. 展開したファイルを作業フォルダに配置、jsファイルを作る
selenium-test/
chromedriver
chromeTest.js
こんな感じになれば良い。
５. jsテストコード記述
// webdriverの機能が使えるよう呼び出す
var webdriver = require('selenium-webdriver');
var driver;
var By = webdriver.By;
// webdriver起動 chromeを指定
driver = new webdriver.Builder()
.withCapabilities(webdriver.Capabilities.chrome())
.build();
// googleのホームを開いたらロゴをクリックする
// クリックに成功したらログを出す
driver.get('https://www.google.co.jp/').then(function(){
driver.findElement(By.id('hplogo')).click()
.then(function(){
console.log('ロゴをクリックしました');
});
});
６. 起動
$ node chromeTest.js
ブラウザが起動し、ターミナルで「ロゴをクリックしました」が出力されれば成功。
**これがGUIブラウザを使った方法。**
PhantomJSはGUIブラウザを使わない。
PhantomJS環境
install
$ brew update
$ brew install phantomjs
もしくは
$ npm install phantom phantomjs -g
テストコード
適当な作業フォルダにて、test.jsを作成
console.log('Hello, World');
phantom.exit();
実行
$ phantomjs hello.js
「Hellow, World」と表示されれば成功。
次にcap.jsを作成し、以下のように記述する。
// ページを表示するためのpageオブジェクトを作成(ブラウザのタブを作る感じ？）
var page = require('webpage').create();
// githubが開けたらキャプチャを取る
page.open('www.github.com/', function() {
page.render('github.png');
phantom.exit();
});
実行
$ phantomjs cap.js
作業フォルダ内にgithub.pngができていれば成功。
といったように、GUIブラウザを開かずにブラウザを実行できる。
これがヘッドレスブラウザの特徴。
ブラウザが立ち上がらないので、作業の邪魔にもならない。
page.onResourceRequested = function(request) {
console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function(response) {
console.log('Receive ' + JSON.stringify(response, undefined, 4));
こんな感じでrequestやresponceを取得することもできる。
PhantomJSの特徴
・ページ内での任意のJavaScriptコードの実行
・指定したボタンのイベントを動作（発火）させる
・Cookieの書き換え
・UserAgentの書き換え
・JavaScriptエラーの取得
・Ajaxや画像など様々なリクエストの監視
とブラウザ操作は一通りコマンドから実行できる。
あくまでブラウザなのでテストフレームワークと組み合わせて使うのが主流。
PhantomJS（ブラウザ）+Mocha（テストフレームワーク）+Chai（アサーションライブラリ）
テストフレームワークの使い方については別途投稿予定。