LoginSignup
89

More than 5 years have passed since last update.

PhantomJSとは

Last updated at Posted at 2017-07-01

※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を動かす方法

1. 適当に作業フォルダ作る

$ mkdir selenium-test

2. Selenium install

$ npm -g install selenium-webdriver
$ npm install selenium-webdriver

※動かない場合はlocalにもselenium-webdriverを入れる。

3. Chrome WebDriver install
https://sites.google.com/a/chromium.org/chromedriver/downloads
※最新バージョンを入れる

4. 展開したファイルを作業フォルダに配置、jsファイルを作る

selenium-test/
 chromedriver
 chromeTest.js

こんな感じになれば良い。

5. jsテストコード記述

chromeTest.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('ロゴをクリックしました');
  });
});

6. 起動

$ node chromeTest.js

ブラウザが起動し、ターミナルで「ロゴをクリックしました」が出力されれば成功。



これがGUIブラウザを使った方法。


PhantomJSはGUIブラウザを使わない。

PhantomJS環境

install

$ brew update
$ brew install phantomjs

もしくは

$ npm install phantom phantomjs -g

テストコード

適当な作業フォルダにて、test.jsを作成

test.js
console.log('Hello, World');
phantom.exit();

実行

$ phantomjs hello.js

「Hellow, World」と表示されれば成功。
次にcap.jsを作成し、以下のように記述する。

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(アサーションライブラリ)

テストフレームワークの使い方については別途投稿予定。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
89