Phantomjs-quick-guide
PhantomJS-概要
*PhantomJS* は、 *headless browser* と呼ばれます。これは、JavaScriptコードの実行中にブラウザーが関与しないためです。 実行はブラウザの表示ではなく、コマンドラインプロンプトに表示されます。 *CSS処理、DOM操作、JSON、Ajax、Canvas、SVGなどの機能はすべて、コマンドプロンプトで処理されます。 PhantomJSにはGUIがないため、すべての実行はコマンドラインで行われます。PhantomJSを使用して、ファイルへの書き込み、ファイルの内容の読み取り、ファイルのアップロード、画面キャプチャの取得、WebページのPDFへの変換などを行うことができます。 ヘッドレスブラウザーを使用すると、ブラウザーのすべての動作、つまり* Cookie、HTTPリクエストメソッド* * GET/POST、Cookieのクリア、Cookieの削除*など、ページのリロード、別のページへの移動。
PhantomJSは、Google Chrome、Mozilla Firefox、Safariなどの有名なブラウザーと同様のブラウジング環境を持つWebKitを使用します。 また、スクリーンショットの取得、ファイルのアップロード、ファイルへの書き込み、ファイルの読み取り、Webページとの対話などに役立つ多くのJavaScript APIも提供します。
PhantomJSはプラグインを必要とし、コマンドラインで同じものをサポートするのが難しいため、FlashまたはVideoをサポートしません。
PhantomJSの機能
PhantomJSが提供する機能を理解しましょう。
ページ自動化
PhantomJSでは、APIの助けを借りてページのコンテンツを読むことができます。 DOMを操作し、外部ライブラリを使用して必要なタスクを実行するのに役立ちます。
画面キャプチャ
PhantomJSは、指定されたページのスクリーンキャプチャを取得し、PNG、JPEG、PDF、GIFなどのさまざまな形式で画像と同じものを保存するのに役立ちます。 スクリーンキャプチャを使用すると、Webコンテンツが正常であることを簡単に確認できます。
PhantomJSは、開発者がスクリーンショットのサイズを調整し、キャプチャしたい領域を指定できるようにするプロパティとメソッドを提供します。
ヘッドレステスト
PhantomJSは、コマンドラインでのUIのテストに役立ちます。 一方、スクリーンショットを使用すると、UIのエラーを簡単に見つけることができます。 PhantomJSは、単独でのテストでは役に立たない場合があります。 ただし、Mocha、Yoemanなどの他のテストライブラリと一緒にラップできます。 PhantomJSの助けを借りて、ファイルをアップロードしてフォームを送信できます。
PhantomJSを使用して、サイト全体のログインをテストし、セキュリティが侵害されていないことを確認できます。 PhantomJSは、 CasperJS、Mocha、Qunit などの他のツールと一緒に使用して、テストをより強力にすることができます。
ネットワーク監視
PhantomJSの重要な機能の1つは、使用可能なAPIを使用してネットワーク接続を監視する使用法です。 PhantomJSはネットワークトラフィックの検査を許可します。ネットワークの動作とパフォーマンスに関するさまざまな分析を構築するのに適しています。
PhantomJSを使用して、ライブ環境でのWebページのパフォーマンスに関するデータを収集できます。 PhantomJSは、 Yslow などのツールで使用して、任意のWebサイトのパフォーマンスメトリックを収集できます。
PhantomJS-環境設定
PhantomJSはフリーソフトウェアであり、* BSDライセンス*で配布されています。 インストールは簡単で、スクリプトを実行するための複数の機能を提供します。 PhantomJSは、Windows、Linux、Macなどの複数のプラットフォームで簡単に実行できます。
PhantomJSをダウンロードするには、http：//phantomjs.org/にアクセスして、ダウンロードオプションをクリックします。
Windowsの場合
ダウンロードページには、さまざまなOSのダウンロードオプションが表示されます。 zipファイルをダウンロードして解凍すると、実行可能ファイル phantom.exe が得られます。 PATH環境変数をphantom.exeファイルのパスに設定します。 新しいコマンドプロンプトを開き、 phantomjs –v と入力します。 実行中のPhantomJSの現在のバージョンが表示されます。
MAC OS Xの場合
MAC OS用のPhantomJS zipファイルをダウンロードし、コンテンツを抽出します。 コンテンツがダウンロードされたら、PhantomJSを- /usr/local/bin/ に移動します。 PhantomJSコマンド、つまり ターミナルでphantomjs –vを実行すると、PhantomJSのバージョンの説明が表示されます。
Linux 64ビット
Linux 64ビット向けのPhantomJS zipファイルをダウンロードし、コンテンツを抽出します。 コンテンツがダウンロードされたら、PhantomJSフォルダーを /usr/local/share/ に移動し、シンボリックリンクを作成
sudo mv $PHANTOM_JS/usr/local/share
sudo ln -sf/usr/local/share/$PHANTOM_JS/bin/phantomjs/usr/local/bin.ターミナルでphantomjs –vを実行すると、PhantomJSのバージョンが表示されます。
Linux 32ビット
Linux 32ビット向けのPhantomJS zipファイルをダウンロードし、コンテンツを抽出します。 コンテンツがダウンロードされたら、PhantomJSフォルダーを /usr/local/share/ に移動し、シンボリックリンクを作成します-
sudo mv $PHANTOM_JS/usr/local/share
sudo ln -sf/usr/local/share/$PHANTOM_JS/bin/phantomjs/usr/local/bin.ターミナルでphantomjs –vを実行すると、PhantomJSのバージョンが表示されます。
PhantomJSのソースコードは、次のリンク（https://github.com/ariya/phantomjs/）をクリックしてgitリポジトリから取得することもできます。
PhantomJSでスクリプトを実行するには、コマンドは次のとおりです-
phantomjs jsfile arg1 arg2…PhantomJS-オブジェクト
この章では、PhantomJSの4つの重要なオブジェクトを見ていきます。 彼らは次のとおりです-
- CookiesEnabled
- クッキー
- LibraryPath
- バージョン
次に、これらのそれぞれについて詳しく説明します。
cookiesEnabled
Cookieが有効かどうかを示します。 はいの場合、 true を返します。それ以外の場合は false 。
構文
その構文は次のとおりです-
phantom.cookiesEnabled例
*cookieenabled.js*phantom.addCookie ({
//adding cookie with addcookie property
name: 'c1',
value: '1',
domain: 'localhost'
});
console.log("Cookie Enabled value is : "+phantom.cookiesEnabled);
phantom.exit();出力
コマンド-phantomjs cookieenabled.js
Cookie Enabled value is : trueクッキー
Cookieをドメインに追加して設定するのに役立ちます。 ドメインで使用可能なすべてのCookieを含むオブジェクトを返します。
構文
その構文は次のとおりです-
phantom.cookies;例
- ファイル名：phantomcookie.js *
phantom.addCookie ({
name: 'c1',
value: '1',
domain: 'localhost'
});
phantom.addCookie ({
name: 'c2',
value: '2',
domain: 'localhost'
});
phantom.addCookie ({
name: 'c3',
value: '3',
domain: 'localhost'
});
console.log(JSON.stringify(phantom.cookies));
phantom.exit();出力
コマンド-phantomjs phantomcookie.js
[{"domain":".localhost","httponly":false,"name":"c3","path":"/","secure":false, "
value":"3"},{"domain":".localhost","httponly":false,"name":"c2","path":"/","sec u
re":false,"value":"2"},{"domain":".localhost","httponly":false,"name":"c1","pat h
":"/","secure":false,"value":"1"}]上記の例では、localhostドメインにいくつかのCookieを追加しました。 その後、 phantom.cookies を使用して取得しました。 JSON stringify メソッドを使用してJavaScriptオブジェクトを文字列に変換することにより、すべてのCookieを含むオブジェクトを返します。 foreach を使用して、Cookieの名前/値にアクセスすることもできます。
LibraryPath
PhantomJS libraryPathは、 injectJS メソッドで使用されるスクリプトパスを格納します。
構文
その構文は次のとおりです-
phantom.libraryPath例
バージョンを確認する例を次に示します。
var webPage = require('webpage');
var page = webPage.create();
page.open('http://www.finddevguides.com/jquery', function(status) {
if (status === "success") {
page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ', function() {
if (page.injectJs('do.js')) {
//returnTitle is a function loaded from our do.js file - see below
return returnTitle();
});
console.log(title);
phantom.exit();
}
}
});
window.returnTitle = function() {
return document.title;
};上記のプログラムは、次の output を生成します。
Jquery Tutorialバージョン
実行中のPhantomJSのバージョンを提供し、オブジェクトの詳細を返します。 例：\ {"major"：2、 "minor"：1、 "patch"：1}
構文
その構文は次のとおりです-
phantom.version例
バージョンを確認する例を次に示します。
var a = phantom.version;
console.log(JSON.stringify(a));
console.log(a.major);
console.log(a.minor);
console.log(a.patch);
phantom.exit();上記のプログラムは、次の output を生成します。
{"major":2,"minor":1,"patch":1}
2
1
1上記の例では、 console.log を使用してバージョンを出力しています。 現在、バージョン2で実行しています。 上記のコードブロックに示されている詳細でオブジェクトを返します。
PhantomJS-メソッド
PhantomJSは、ブラウザーなしでJavaScriptを実行するためのプラットフォームです。 そのために、次のメソッドが使用されます。これらのメソッドは、Cookieの追加、削除、クリア、スクリプトの終了、JSの挿入などに役立ちます。
この章では、これらのPhantomJSメソッドとその構文について詳しく説明します。 同様の方法、すなわち addcookie、injectjs はWebページモジュールに存在します。これについては、以降の章で説明します。
PhantomJSは、ブラウザなしでJavaScriptを実行するのに役立つ次のメソッドを公開します-
- addCookie
- clearCookie
- deleteCookie
- Exit
- InjectJS
次に、これらの方法を例とともに詳しく説明します。
addCookie
addcookieメソッドは、Cookieを追加してデータに保存するために使用されます。 これは、ブラウザが保存する方法に似ています。 それは、Cookieのすべてのプロパティを持つオブジェクトである単一の引数を取り、その構文は以下のようになります-
構文
その構文は次のとおりです-
phantom.addCookie ({
"name" : "cookie_name",
"value" : "cookie_value",
"domain" : "localhost"
});名前、値、ドメインは、addcookie関数に追加される必須プロパティです。 このプロパティのいずれかがCookieオブジェクトにない場合、このメソッドは失敗します。
- name -Cookieの名前を指定します。
- 値-使用するCookieの値を指定します。
- domain -Cookieが適用されるドメイン。
例
*addcookie* メソッドの例を次に示します。var page = require('webpage').create(),url = 'http://localhost/tasks/al';
page.open(url, function(status) {
if (status === 'success') {
phantom.addCookie({ //add name cookie1 with value = 1
name: 'cookie1',
value: '1',
domain: 'localhost'
});
phantom.addCookie({ //add cookie2 with value 2
name: 'cookie2',
value: '2',
domain: 'localhost'
});
phantom.addCookie({ //add cookie3 with value 3
name: 'cookie3',
value: '3',
domain: 'localhost'
});
console.log('Added 3 cookies');
console.log('Total cookies :'+phantom.cookies.length);
//will output the total cookies added to the url.
} else {
console.error('Cannot open file');
phantom.exit(1);
}
});例
al
<html>
<head>
<title>Welcome to phantomjs test page</title>
</head>
<body>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
</body>
</html>上記のプログラムは、次の output を生成します。
Added 3 cookies
Total cookies :3コードのコメントは一目瞭然です。
クッキーを消す
この方法では、すべてのCookieを削除できます。
構文
その構文は次のとおりです-
phantom.clearCookies();この概念は、ブラウザーメニューで選択してブラウザーCookieを削除するのと同じように機能します。
例
*clearCookies* メソッドの例を次に示します。var page = require('webpage').create(),url = 'http://localhost/tasks/al';
page.open(url, function(status) {
if (status === 'success') {
phantom.addCookie({ //add name cookie1 with value = 1
name: 'cookie1',
value: '1',
domain: 'localhost'
});
phantom.addCookie({ //add cookie2 with value 2
name: 'cookie2',
value: '2',
domain: 'localhost'
});
phantom.addCookie({ //add cookie3 with value 3
name: 'cookie3',
value: '3',
domain: 'localhost'
});
console.log('Added 3 cookies');
console.log('Total cookies :'+phantom.cookies.length);
phantom.clearCookies();
console.log(
'After clearcookies method total cookies :' +phantom.cookies.length);
phantom.exit();
} else {
console.error('Cannot open file');
phantom.exit(1);
}
});al
<html>
<head>
<title>Welcome to phantomjs test page</title>
</head>
<body>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
<h1>This is a test page</h1>
</body>
</html>上記のプログラムは、次の output を生成します。
Added 3 cookies
Total cookies :3
After clearcookies method total cookies :0deleteCookie
cookieNameに一致する「name」プロパティを持つ CookieJar のCookieを削除します。 正常に削除された場合、 true を返します。それ以外の場合は false 。
構文
その構文は次のとおりです-
phantom.deleteCookie(cookiename);例の助けを借りて addcookie、clearcookies および deletecookie を理解しましょう。
例
deleteCookieメソッドの使用方法を示す例があります-
- ファイル：cookie.js *
var page = require('webpage').create(),url = 'http://localhost/tasks/al';
page.open(url, function(status) {
if (status === 'success') {
phantom.addCookie({ //add name cookie1 with value = 1
name: 'cookie1',
value: '1',
domain: 'localhost'
});
phantom.addCookie({ //add cookie2 with value 2
name: 'cookie2',
value: '2',
domain: 'localhost'
});
phantom.addCookie({ //add cookie3 with value 3
name: 'cookie3',
value: '3',
domain: 'localhost'
});
console.log('Added 3 cookies');
console.log('Total cookies :'+phantom.cookies.length);
//will output the total cookies added to the url.
console.log("Deleting cookie2");
phantom.deleteCookie('cookie2');
console.log('Total cookies :'+phantom.cookies.length);
phantom.clearCookies();
console.log(
'After clearcookies method total cookies :' +phantom.cookies.length);
phantom.exit();
} else {
console.error('Cannot open file');
phantom.exit(1);
}
});上記のプログラムは、次の output を生成します。
phantomjs cookie.js
Added 3 cookies
Total cookies :3
Deleting cookie2
Total cookies :2
After clearcookies method total cookies :0Exit
phantom.exitメソッドは、開始したスクリプトを終了します。 上記の戻り値でプログラムを終了します。 値が渡されない場合、 ’0’ を返します。
構文
その構文は次のとおりです-
phantom.exit(value);*phantom.exit* を追加しない場合、コマンドラインは実行がまだ継続しており、完了しないと想定します。例
*exit* メソッドの使用を理解するための例を見てみましょう。console.log('Welcome to phantomJs'); //outputs Welcome to phantomJS
var a = 1;
if (a === 1) {
console.log('Exit 1');//outputs Exit 1
phantom.exit();//Code exits.
} else {
console.log('Exit 2');
phantom.exit(1);
}上記のプログラムは、次の output を生成します。
*phantomjs exit.js*Welcome to phantomJs
Exit 1phantom.exitはスクリプトを終了するメソッドであるため、phantom.exitの後のコードは実行されません。
injectJs
InjectJsは、 addtionaljs ファイルをファントムに追加するために使用されます。 ファイルが現在の directory librarypath で見つからない場合、phantomプロパティ（phantom.libraryPath）がパスを追跡するための追加の場所として使用されます。 ファイルの追加が成功した場合は true を返し、それ以外の場合は false を返します。ファイルが見つからない場合は失敗します。
構文
その構文は次のとおりです-
phantom.injectJs(filename);例
*injectJs* の使用を理解するために、次の例を見てみましょう。- ファイル名：inject.js *
console.log(“Added file”);- ファイル名：addfile.js *
var addfile = injectJs(inject.js);
console.log(addfile);
phantom.exit();出力
コマンド-C：\ phantomjs \ bin> phantomjs addfile.js
Added file//coming from inject.js
true上記の例では、 addfile.js はinjectJsを使用してファイル inject.js を呼び出します。 addfile.jsを実行すると、inject.jsにあるconsole.logが出力に表示されます。 また、ファイルinject.jsが正常に追加されたため、addfile変数についてもtrueを示しています。
PhantomJS-Webページモジュールプロパティ
PhantomJSには、Webページ内のコンテンツとやり取りするための非常に多くのプロパティとメソッドが用意されています。
require（ "webpage"）。create（）コマンドはWebページオブジェクトを作成します。 このオブジェクトを使用して、以下にリストされているプロパティとメソッドを使用してWebページを操作します。
var wpage = require("webpage").create();次の表に、これから説明するすべてのWebページプロパティのリストを示します。
| S.No | Properties & Description |
|---|---|
| 1 |
ナビゲーション履歴に前のページがある場合、このプロパティは true を返します。そうでない場合は、 false 。 |
| 2 |
ナビゲーション履歴に次のページがある場合、このプロパティはtrueを返します。そうでない場合は、 false 。 |
| 3 |
clipRectは、値がtop、left、width、heightのオブジェクトであり、render（）メソッドで使用されるときにWebページの画像キャプチャを取得するために使用されます。 |
| 4 |
このプロパティには、Webページのコンテンツが含まれます。 |
| 5 |
Cookieを使用すると、URLで使用可能なCookieを設定/取得できます。 また、URLで利用可能なCookieとページに設定された新しいCookieも提供します。 |
| 6 |
customHeadersは、ページによって発行されるすべてのリクエストに対してサーバーに送信される追加のHTTPリクエストヘッダーを指定します。 |
| 7 |
イベントの長いリスト、つまり 修飾子、キーの詳細。 |
| 8 |
現在フォーカスされているフレームの名前を返します。 |
| 9 |
このプロパティは、アクティブなフレームのコンテンツを提供します。 |
| 10 |
現在フォーカスされているフレームの名前を返します。 |
| 11 |
このプロパティは、現在アクティブなフレームのコンテンツも提供しますが、htmlタグのないコンテンツのみを提供します。 |
| 12 |
アクティブなフレームのタイトルを提供します。 |
| 13 |
このプロパティは、現在フォーカスされているフレームのURLを提供します。 |
| 14 |
ページに存在するフレームの数を示します。 |
| 15 |
フレーム名の配列を提供します。 |
| 16 |
このプロパティには、page.inectJsメソッドによって使用されるパスがあります。 |
| 17 |
このプロパティは、ページのナビゲーションを許可するかどうかを定義します。 trueの場合、現在のページのURLに表示され、ページをクリックして次のページに移動することは許可されません。 |
| 18 |
このプロパティは、window.localStorageを使用してデータが保存されるパスを提供します。パスは、コマンドラインから—local-storage-pathを使用して変更できます。 |
| 19 |
このプロパティは、window.localStorageに保存できるデータの最大量を定義します。値は5242880バイト、つまり5MBです。この値は、次のコマンド—localstorage-quota = size over hereを使用してコマンドラインで上書きできます。 |
| 20 |
ownsPagesは、Webページによって開かれたページがWebページの子である場合、trueまたはfalseを返します。 |
| 21 |
PagesWindowNameは、window.openを使用して開いているウィンドウの名前を示します。 |
| 22 |
pagesプロパティは、window.openを使用してページで開かれたページの配列を提供します。 ページがURLで閉じられている場合、ページの参照は考慮されません。 |
| 23 |
このプロパティは、WebページをPDF形式に変換するために使用する必要がある場合、Webページのサイズ、つまりサイズを提供します。paperSizeには、オブジェクトに必要なサイズが含まれます。 |
| 24 |
このプロパティは、現在アクティブなフレームのコンテンツも提供しますが、htmlタグのないコンテンツのみを提供します。 |
| 25 |
これには、スクロール位置を示すオブジェクトが含まれます。 左と上を与えます。 |
| 26 |
このプロパティは、page.openメソッドが使用されるときのWebページの設定を提供します。 ページがロードされると、設定プロパティの変更による影響はありません。 |
| 27 |
このプロパティは、あなたが読んでいるページのタイトルを提供します。 |
| 28 |
このプロパティはページのURLを提供します。 |
| 29 |
このプロパティにより、ウィンドウ表示のサイズを変更できます。 幅と高さが含まれており、必要に応じて読み取りまたは変更できます。 |
| 30 |
ウィンドウの名前を指定します。 |
| 31 |
このプロパティは、renderおよびrenderBase64メソッドのズーム係数を指定します。 必要に応じて、ページをズームし、画面キャプチャを取得するのに役立ちます。 |
PhantomJS-Webページモジュールメソッド
Webページモジュールには、 Cookies、Frames、Page Navigation、Reload、Rendering 、および Uploading of Files のメソッドがあります。
Webページで使用できるメソッドは次のとおりです。
| S.No | Methods & Description |
|---|---|
| 1 |
addCookieメソッドは、指定されたページにCookieを追加します。 |
| 2 |
childFramesCount() このメソッドはhttp://phantomjs.org [[[1]]]に従って非推奨です。 |
| 3 |
childFramesName() このメソッドはhttp://phantomjs.org [[[2]]]に従って非推奨です。 |
| 4 |
指定されたページのすべてのCookieを削除します。 |
| 5 |
このメソッドは、ページを閉じて使用済みのメモリを解放するために使用されます。 閉じるが呼び出されると、Webページのメソッドまたはプロパティは機能しません。 |
| 6 |
currentFrameName() このメソッドはhttp://phantomjs.org [[[3]]]に従って非推奨です。 |
| 7 |
これにより、特定のページURLに存在する既存のCookieリストと一致する名前のCookieが削除されます。 |
| 8 |
現在の実行をブロックすることなく、ページ内で特定の関数を非同期的に評価します。 この関数は、特定のスクリプトを非同期で実行するのに役立ちます。 |
| 9 |
EvaluateJavaScriptは、渡された関数を文字列として実行するのに役立ちます。 渡される文字列は関数のみである必要があることに注意してください。 |
| 10 |
Evaluateは、渡された関数を実行します。 関数にコンソールメッセージが含まれる場合、端末には直接表示されません。 コンソールメッセージを表示するには、onConsoleMessageファントムコールバックを使用する必要があります。 |
| 11 |
これにより、getpageで渡されたウィンドウ名に一致する子ページが提供されます。 |
| 12 |
ナビゲーションのみがロックされていない場合、ナビゲーション履歴の前のページが表示されます。 |
| 13 |
ナビゲーションのみがロックされていない場合、ナビゲーション履歴の次のページが表示されます。 |
| 14 |
このメソッドを使用すると、ページをナビゲートできます。 |
| 15 |
Includejsは、ページで外部JSファイルを実行し、完了時にコールバック関数を実行します。 |
| 16 |
InjectJsには、指定されたファイルの外部スクリプトがページに含まれます。 ファイルが現在のディレクトリで使用できない場合、libraryPathを使用してファイルをさらに検索します。 ファイルが挿入される場合はtrueを返し、そうでない場合はfalseを返します。 |
| 17 |
OpenUrlはWebページを開きます。 PhantomJSのopenメソッドに似ています。 OpenUrlには、httpConf、設定、コールバック関数などの追加パラメーターがあります。 |
| 18 |
Openは、Webページを開くために使用されます。 |
| 19 |
Releaseは、ページのメモリヒープ使用量を解放します。 リリースが呼び出された後は、ページインスタンスメソッドを使用しないでください。 このメソッドはcloseメソッドに似ており、その使用は非推奨です。 代わりにwpage.close（）を使用してください。 |
| 20 |
リロードは、使用中の現在のページをリロードするために使用されます。 |
| 21 |
このメソッドはスクリーンキャプチャを取得し、base46の文字列として画像を提供します。 Renderbase64は、PNG、JPEG、JPGなどの形式をサポートしています。 現時点ではgifをサポートしていません。 clipRectプロパティを使用して、画像キャプチャの部分を定義できます。 |
| 22 |
RenderBufferは、ウェブページのキャプチャを画像バッファに取り込み、サーバーに直接送信できます。 サポートされている形式は、PNG、GIF、およびJPEGです。 |
| 23 |
レンダリングは、画像バッファを取得し、指定された形式に従って保存するのに役立ちます。 |
| 24 |
イベントをWebページに送信するために使用されます。 それらはdomイベントではありません。 これらの各イベントは、ユーザーの操作に基づいてWebページに送信されます。 |
| 25 |
setcontentは、指定されたURLのページコンテンツを、指定されたコンテンツで変更します。 |
| 26 |
ページの読み込みを停止するのに役立ちます。 |
| 27 |
switchToChildFrame() switchToFrame（）を使用することは非推奨です。 |
| 28 |
フォーカスされているフレームを選択します。 |
| 29 |
指定された名前で現在のフレームの子であるフレームを選択します。 |
| 30 |
メインフレーム、つまり ルートウィンドウ。 |
| 31 |
現在の子フレームの親フレームを取ります。 |
| 32 |
このメソッドは、htmlのフォームを使用して行われたファイルのアップロードを処理するために使用されます。 PhantomJSには、uploadFileメソッドを使用して同じことを実現できるフォームを使用する直接的な方法がありません。 ファイルの場所とコピー先のHTMLタグセレクターが必要です。 |
Webページモジュールイベント/コールバック
Webページモジュールで使用できるコールバックについては、次の表で説明します。
| S.No | Callbacks & Description |
|---|---|
| 1 |
このコールバックは、ページにアラートがあるときに呼び出されます。コールバックは文字列を受け取り、何も返しません。 |
| 2 |
OnCallbackは、WebページからWebページオブジェクトに値を渡すために使用され、onCallback関数を内部的に呼び出すwindow.callPhantom（）メソッドを使用して行われます。 |
| 3 |
これは、page.close（）メソッドまたはwindow.close（）メソッドを使用してウィンドウが閉じられたときに呼び出されます。 |
| 4 |
このコールバックは、ページからok/cancelで呼び出された確認済みメッセージがあるときに呼び出されます。 |
| 5 |
このコールバックは、Webページでコンソールメッセージが使用されている場合に使用されます。 onConsoleMessageメソッドは3つの引数を取ります。 |
| 6 |
JavaScriptエラーが発生したときに呼び出されます。 onErrorの引数はmsgおよびスタックトレースであり、これは配列です。 |
| 7 |
これはファイルのアップロードに使用され、ユーザーがファイルをアップロードするときにコールバックが呼び出されます。 |
| 8 |
このコールバックは、ロードする前にページが呼び出されたときに呼び出されます。 |
| 9 |
この関数は、開いているページが完全にロードされると呼び出されます。 ロードが成功したか失敗したかを伝える引数が1つあります。 |
| 10 |
このコールバックは、ページの読み込みが開始されるときに呼び出されます。 |
| 11 |
このコールバックは、ナビゲーションイベントがいつ発生するかを通知します。 |
| 12 |
このコールバックは、ページによって新しい子ウィンドウが開かれたときに呼び出されます。 |
| 13 |
このコールバックは、Webページによってプロンプトが呼び出されたときに呼び出されます。 メッセージと回答という2つの引数を取ります。 戻り値は文字列です。 |
| 14 |
このコールバックは、Webページがファイルをアップロードできないときに呼び出されます。 |
| 15 |
このコールバックは、ページによって要求されたリソースが受信されたときに呼び出されます。 |
| 16 |
この関数は、ページがリソースを要求したときに呼び出されます。 |
| 17 |
このコールバックは、settings.resourceTimeoutが使用されているときに、要求されたリソースがタイムアウトしたときに呼び出されます。 |
| 18 |
これは、ナビゲーションを使用してURLが現在のURLから変更されたときに呼び出されます。 コールバックへの引数が1つあり、これは新しいURL targetUrl文字列です。 |
Webページの子プロセスモジュール
Phantomjs子プロセスモジュールは、サブプロセスと対話し、 stdin/stdout/stderr を使用してサブプロセスと対話するのに役立ちます。 子プロセスは、印刷、メール送信、または*別の言語で書かれた*プログラムの呼び出し*などのタスクに使用できます。 子プロセスモジュールを作成するには、参照が必要です。
たとえば-
var process = require("child_process");スポーン方法
子プロセスを生成すると、その stdout および stderr ストリームにサブスクライブして、リアルタイムでデータを取得できます。
構文
その構文は次のとおりです-
var spawn = require('child_process').spawn;例
spawnメソッドの例を見てみましょう。
var process = require("child_process")
var spawn = process.spawn
var child = spawn("cmd", ['/c', 'dir']);
child.stdout.on("data", function (data) {
console.log("spawnSTDOUT---VALUE:", JSON.stringify(data))
})
child.stderr.on("data", function (data) {
console.log("spawnSTDERR:", JSON.stringify(data))
})
child.on("exit", function (code) {
console.log("spawnEXIT:", code)
})出力
上記のプログラムは、次の出力を生成します。
spawnSTDOUT---VALUE: " Volume in drive C is OS\r\n"
spawnSTDOUT---VALUE: " Volume Serial Number is 7682-9C1B\r\n\r\n Directory of C:
\\phantomjs\\bin\r\n\r\n"
spawnSTDOUT---VALUE: "20-05-2017 10:01
<DIR> .\r\n20-05-2017 10:01
<DIR> ..\r\n13-05-2017 20:48 12 a,txt.txt\r\n07-05-2017 08:51
63 a.js\r\n06-05-2017 16:32 120,232 a.pdf\r\n13-05-2017 20:49
spawnEXIT: 0PhantomJS-ファイルシステムモジュールプロパティ
ファイルシステムモジュールには、ファイルとディレクトリを処理するための多くのAPIがあります。 ファイル/ディレクトリを作成/書き込みおよび削除できます。 ファイルシステムモジュールの使用を開始するには、* fsモジュール*への参照が必要です。
var fs = require('fs');ファイルシステムモジュールでは、 Separator と Working Directory の2つのプロパティを使用できます。 それらを詳細に理解しましょう。
セパレータ
ファイルパスに使用されるセパレータを示します。
- Windowsの場合： \
- Linuxの場合： /
構文
その構文は次のとおりです-
fs.seperator例
var fs = require('fs');
console.log(fs.seperator);
phantom.exit();上記のプログラムは、次の output を生成します。
undefinedworkingDirectory
作業ディレクトリは、PhantomJSが実行されるディレクトリです。
構文
その構文は次のとおりです-
var fs = require('fs');
fs.workingDirectory;例
var fs = require('fs');
console.log(fs.workingDirectory);
phantom.exit();上記のプログラムは、次の output を生成します。
C:/phantomjs/binPhantomJS-ファイルシステムモジュールメソッド
次の表には、すべてのメソッドとその説明があり、ファイルシステムモジュールで使用できます。
| S.No | Methods & Description |
|---|---|
| 1 |
このメソッドは、PhantomJSが実行される絶対パスを提供します。 |
| 2 |
これにより、作業ディレクトリを変更し、成功した場合はtrueを返し、それ以外の場合はfalseを返します。 |
| 3 |
copyTreeは、あるパスから別のパスにディレクトリをコピーします。 最初のパラメーターはソースフォルダーで、2番目のパラメーターは宛先フォルダーです。 |
| 4 |
この方法は、ある場所から別の場所にファイルをコピーするのに役立ちます。 2つのパラメーターが必要です。 最初のパラメーターはソースファイルで、2番目のパラメーターはファイルパスであり、コピーする必要があります。 ソースまたは宛先ファイルが存在しない場合、エラーがスローされます。 |
| 5 |
指定されたファイルパスがシステムに存在するかどうかを確認します。 存在する場合はtrueを返し、存在しない場合はfalseを返します。 |
| 6 |
このメソッドは、ファイルパスが絶対パスの場合はtrueを返し、相対パスの場合はfalseを返します。 |
| 7 |
isDirectoryは、指定されたファイルがディレクトリかどうかを示します。 ディレクトリがfalseの場合、trueを返します。 指定されたパスが存在しない場合はfalseになります。 |
| 8 |
このメソッドは、指定されたファイルが実行可能かどうかを判断します。 実行可能であればtrueを、そうでなければfalseを返します。 |
| 9 |
これは、指定されたファイルパスがファイルであるかどうかの詳細を示します。 ファイルであればtrueを返し、そうでなければfalseを返します。 |
| 10 |
これは、ファイルパスがシンボリックリンクの場合はtrue、それ以外の場合はfalseになります。 |
| 11 |
指定されたファイルが読み取り可能かどうかをチェックします。 はいの場合はtrue、そうでない場合はfalseを返します。 |
| 12 |
特定のファイルが書き込み可能かどうかを示します。 はいの場合はtrue、それ以外の場合はfalseを返します。 |
| 13 |
ファイルに行われた最後の変更の詳細を示します。 ファイルが最後に変更された日時を示します。 |
| 14 |
ディレクトリに存在するすべてのファイルを提供します。 |
| 15 |
新しいディレクトリを作成します。 |
| 16 |
makeTreeは、最終ディレクトリを形成するために必要なすべてのフォルダーを作成します。 作成が成功した場合はtrue、それ以外の場合はfalseを返します。 ディレクトリが既に存在する場合、trueを返します。 |
| 17 |
ファイルをあるパスから別のパスに移動します。 |
| 18 |
ファイルを開くために使用されます。 |
| 19 |
これは、シンボリックリンク（またはWindowsのショートカット）が指すファイルまたはフォルダーの絶対パスを返します。 パスがシンボリックリンクまたはショートカットではない場合、空の文字列が返されます。 |
| 20 |
これは、指定されたファイルを読み取ります。 |
| 21 |
これにより、指定されたディレクトリが削除されます。 |
| 22 |
指定されたフォルダーからすべてのファイルとフォルダーを削除し、最終的にフォルダー自体を削除します。 このプロセスの実行中にエラーが発生した場合、「ディレクトリツリーPATHを削除できません」というエラーが発生し、実行がハングします。 |
| 23 |
指定されたファイルを削除します。 |
| 24 |
ファイルのサイズを示します。 |
| 25 |
指定されたファイルを作成します。 |
| 26 |
指定されたファイルに書き込みます。 |
PhantomJS-システムモジュールプロパティ
この章では、PhantomJSのさまざまなシステムモジュールプロパティについて説明します。
args
PhantomJSのシステムモジュールにはさまざまなプロパティがあります。これらのプロパティは、引数の受け渡し、実行されるファイルの把握などに役立ちます。
argsプロパティは、基本的にコマンドラインで渡された引数を返します。 読みたいページURLを渡すこともできます。 スクリーンキャプチャpdfファイルを保存するか、ファイルをアップロードする場合は、詳細をコマンドラインに渡し、 args プロパティを使用して読み取ることができます。
コマンドラインに渡された各引数を取得する長さと方法を見つけましょう。
構文
その構文は次のとおりです-
var system = require('system');
system.args;例
次の例を見て、このプロパティがどのように機能するかを理解してください。
var system = require('system');
console.log(system.args.length);
if (system.args.length>0) {
console.log(JSON.stringify(system.args));
}
phantom.exit();上記のプログラムは、次の output を生成します。
コマンド-phantomsjs args.js http：//localhost/tasks/requestl
2
["args.js","http://localhost/tasks/requestl"]最初の値はファイルの名前で、次の値は渡されたURLです。 コマンドラインでさらに引数を渡し、 system.args を使用して同じ引数を取得できます。
env
*env* プロパティは、システムの詳細を返します。構文
その構文は次のとおりです-
var system = require('system');
system.env;例
var system = require('system');
console.log(JSON.stringify(system.env));
phantom.exit();上記のプログラムは、次の出力を生成します。
{"=::":"::\\","=C:":"C:\\phantomjs\\bin","=ExitCode":"00000000","ALLUSERSPROFILE":
"C:\\ProgramData","APPDATA":"C:\\Users\\UserName\\AppData\\Roaming","COMPUTERNAME":
"X","ComSpec":"C:\\Windows\\system32\\cmd.exe","CommonProgramFiles":
"C:\\Program Files (x86)\\Common Files","CommonProgramFiles(x86)":
"C:\\Program Files (x86)\\Common Files","CommonProgramW6432":
"C:\\Program Files\\Common Files","FP_NO_HOST_CHECK":"NO","HOMEDRIVE":"C:",
"HOMEPATH":"\\Users\\UserName","LOCALAPPDATA":
"C:\\Users\\UserName\\AppData\\Local","LOGONSERVER":"\\\\MicrosoftAccount",
"NUMBER_OF_PROCESSORS":"2","OS":"Windows_NT","PATHEXT":".COM;.EXE;.BAT;.CMD;.VBS ;
.VBE;.JS;.JSE;.WSF;.WSH;.MSC","PROCESSOR_ARCHITECTURE":"x86","PROCESSOR_ARCHITEW64 32":
"AMD64","PROCESSOR_IDENTIFIER":"Intel64 Family 6 Model 58Stepping9,GenuineIntel",
"PROCESSOR_LEVEL":"6","PROCESSOR_REVISION":"3a09","PROMPT":
"$P$G","PSModulePath":"C:\\Windows\\system32\\WindowsPowerShell\\v1.0\\
Modules\\" ,"PUBLIC":"C:\\Users\\Public","Path":
"C:\\Program Files\\Dell\\DW WLAN Card;
c:\\Program Files (x86)\\Intel\\iCLS Client\\;c:\\Program Files\\Intel\\iCLSClient\\;
C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\ \Wbem;
C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;
C:\\Program Files\\Intel\\Intel(R) Management Engine Components\\DAL;
C:\\Program Files\\Intel\\Intel(R) Management Engine Components\\IPT;
C:\\Program Files (x86)\\Intel\\Intel(R) Management Engine Components\\DAL;
C:\\Program Files (x86)\\Intel\\Intel(R)
ManagementEngineComponents\\IPT;c:\\ProgramFiles\\WIDCOMM\\BluetoothSoftware\\;
c:\\ProgramFiles\\WIDCOMM\\BluetoothSoftware\\syswow64;
C:\\ProgramFiles(x86)\\WindowsLive\\Shared;C:\\ProgramFiles\\nodejs\\;
C:\\ProgramFiles\\Git\\cmd;C:\\ProgramFiles\\ OpenVPN\\bin;
C:\\ProgramFiles(x86)\\Skype\\Phone\\;C:\\Users\\UserName\\AppData\\Roaming
\\npm","ProgramData":
"C:\\ProgramData","ProgramFiles":"C:\\ProgramFiles(x86)",
"ProgramFiles(x86)":"C:\\ProgramFiles(x86)","ProgramW6432":
"C:\\ProgramFiles","SESSIONNAME":"Console","SystemDrive":
"C:","SystemRoot":"C:\\Windows","TEMP":"C:\\Users\ \Username~1\\AppData\\Local\\Temp",
"TMP":"C:\\Users\\Username~1\\AppData\\Local\\Temp",
"USERDOMAIN":"USER","USERDOMAIN_ROAMINGPROFILE":"USER","USERNAME":"X Y","USERPROFILE":
"C:\\Users\\X Y","windir":"C:\\Windows"}OS
使用されているオペレーティングシステムの詳細を返します。 アーキテクチャ、OSの名前、およびバージョンを含むオブジェクトを返します。
構文
その構文は次のとおりです-
var system = require('system');
system.os;例
var system = require('system');
console.log(JSON.stringify(system.os));
phantom.exit();上記のプログラムは、次の出力を生成します。
{"architecture":"32bit","name":"windows","version":"8.1"}pid
このプロパティはプロセスIDを返します。
構文
その構文は次のとおりです-
var system = require('system');
system.pid;例
*pid* プロパティの例を見てみましょう。var system = require('system');
console.log(system.pid);
phantom.exit();上記のプログラムは、次の出力を生成します。
2160プラットフォーム
このプロパティは、作業中のプラットフォームを返します。
構文
その構文は次のとおりです-
var system = require('system');
system.platform;例
var system = require('system');
console.log(system.platform);
phantom.exit();上記のプログラムは、次の出力を生成します。
PhantomjsPhantomJS-Webサーバーモジュールプロパティ
PhantomJSは、 mongoose と呼ばれる組み込みWebサーバーを使用します。 現在、PhantomJSは他の本番Webサーバーと接続できません。 接続に関しては、一度に10個の接続を処理でき、10個を超える要求がキューで待機します。
Webサーバーを起動するには、次の構文を使用する必要があります-
var webserver = require (‘webserver’);Webサーバーに送信されるリクエストをリッスンするために使用される Port プロパティを理解しましょう。
port
WebサーバーのPortプロパティは、送信された要求をリッスンするために使用されます。
構文
その構文は次のとおりです-
var server = require('webserver').create();
var listening = server.listen(port, function (request, response) {});例
*port* プロパティがどのように機能するかを理解するために例を見てみましょう。var webserver = require('webserver');
var server = webserver.create();
var service = server.listen(8080,function(request,response){
});
if(service) console.log("server started - http://localhost:" + server.port);上記のプログラムは、次の出力を生成します。
server started - http://localhost:8080PhantomJS-Webサーバーモジュールメソッド
この章では、PhantomJSのWebサーバーモジュールのさまざまなメソッドについて説明します。
閉じる
*close* メソッドは、Webサーバーを閉じるために使用されます。構文
その構文は次のとおりです-
var server = require('webserver').create();
server.close();例
次の例は、 close メソッドの使用方法を示しています。
var webserver = require('webserver');
var server = webserver.create();
var service = server.listen(8080,function(request,response){
});
if(service) console.log("server started - http://localhost:" + server.port);
console.log(server.port);
server.close();
console.log(server.port);上記のプログラムは、次の output を生成します。
server started - http://localhost:8080
8080ここでは、サーバーを閉じた後、 server.port をコンソール化しました。 したがって、ウェブサーバーは既に閉じられているため、応答しません。
聴く
*server.listen* メソッドは、2つの引数を持つポートおよびコールバック関数を受け取ります。これは、 *Request Object* および *Response Object* です。- リクエストオブジェクト*には、次のプロパティが含まれています-
- メソッド-これはメソッドGET/POSTを定義します。
- URL -要求されたURLを表示します。
- httpVersion -これは実際のhttpバージョンを表示します。
- ヘッダー-これは、キーと値のペアを持つすべてのヘッダーを表示します。
- Post -postメソッドにのみ適用可能なリクエストボディ。
- postRaw -Content-Typeヘッダーが 'application/x-www-formurlencoded’に設定されている場合、投稿の元のコンテンツはこの追加プロパティ（postRaw）に保存され、その投稿はURLで自動的に更新されますデータのデコードされたバージョン。
- レスポンスオブジェクト*には、次のプロパティが含まれています-
- Headers -キーと値のペアとしてすべてのHTTPヘッダーがあります。 初めてwriteを呼び出す前に設定する必要があります。
- SetHeader -これは特定のヘッダーを設定します。
- * Header（name）*-指定されたヘッダーの値を返します。
- StatusCode -返されたHTTPステータスコードを設定します。
- * SetEncoding（エンコード）*-これは、write（）に渡されたデータを変換するために使用されます。 デフォルトでは、データはUTF-8に変換されます。 データがバイナリ文字列の場合、「バイナリ」を示します。 データがバッファの場合は不要です（例： page.renderBufferから）。
- * Write（data）*-応答本文のデータを送信します。 複数回呼び出すことができます。
- * WriteHead（statusCode、headers）*-応答ヘッダーを要求に送信します。 ステータスコードは3桁のHTTPステータスコードです（例： 404）。 最後の引数とヘッダーは応答ヘッダーです。
- Close -HTTP接続を閉じます。
- CloseGracefully -close（）に似ていますが、応答ヘッダーが最初に送信されていることを確認します。
構文
その構文は次のとおりです-
var server = require('webserver').create();
var listening = server.listen(8080, function (request, response) {}例
*listen* メソッドの仕組みを理解するために例を見てみましょう。var page = require('webpage').create();
var server = require('webserver').create();
var port = 8080;
var listening = server.listen(8080, function (request, response) {
console.log("GOT HTTP REQUEST");
console.log(JSON.stringify(request, null, 4));
//we set the headers here
response.statusCode = 200;
response.headers = {"Cache": "no-cache", "Content-Type": "text/html"};
//the headers above will now be sent implictly
//now we write the body
response.write("<html><head><title>Welcone to Phantomjs</title></head>");
response.write("<body><p>Hello World</p></body></html>");
response.close();
});
if (!listening) {
console.log("could not create web server listening on port " + port);
phantom.exit();
}
var url = "http://localhost:" + port + "/foo/response.php";
console.log("sending request to :" +url);
page.open(url, function (status) {
if (status !== 'success') {
console.log('page not opening');
} else {
console.log("Getting response from the server:");
console.log(page.content);
}
phantom.exit();
});上記のプログラムは、次の output を生成します。
sending request to :http://localhost:8080/foo/response.php
GOT HTTP REQUEST {
"headers": {
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
"Accept-Encoding": "gzip, deflate",
"Accept-Language": "en-IN,*",
"Connection": "Keep-Alive",
"Host": "localhost:8080",
"User-Agent": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1
(KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1"
},
"httpVersion": "1.1",
"method": "GET",
"url": "/foo/response.php"
}
Getting response from the server:
<html><head><title>Welcone to Phantomjs</title></head><body><p>Hello World</p></body>
</html>PhantomJS-コマンドラインインターフェイス
PhantomJSは、キーワード「phantomjs」とファイル名を使用して実行できます。 たとえば、「phantomjs file.js」。
次のように「file.js」に引数を渡すこともできます-
phantomjs [options] file.js arg1 arg2 ...コマンドラインで利用可能なオプションをいくつか見てみましょう。
| S.No | Option & Description |
|---|---|
| 1 |
--help or –h すべてのコマンドラインオプションを表示します。 すぐに停止し、渡されたスクリプトは実行されません。 |
| 2 |
--version or –v 実行中のPhantomJSのバージョンを出力します。 これにより、実行するスクリプトの実行が停止します。 |
| 3 | *--debug[true |
|
false]* 警告とデバッグメッセージを出力します。 デフォルトでは、falseに設定されています。 [yes |
no]も使用できます。 |
| 4 |
--cookies-file =/path/to/cookies.txt 永続的なCookieを保存するファイル名。 |
| 5 | *--diskcache=[true |
|
false]* ディスクキャッシュを有効にします。 値も取ります[yes |
no] |
| 6 |
--disk-cahe-path ディスクキャッシュのパス。 |
| 7 | *--ignore-sslerrors=[true |
|
false]* SSLエラーを無視します。 たとえば、期限切れまたは自己署名証明書エラー。 デフォルトはfalseです。 また、値[yes |
no]を取ります。 |
| 8 | *--loadimages=[true |
|
false]* すべてのインライン画像をロードします。 デフォルト値はtrueです。 [yes |
no]も必要です。 |
| 9 |
--local-storagepath=/some/path LocalStorageコンテンツとWebSQLコンテンツを保存するパス。 |
| 10 |
--local-storagequota=number データを許可する最大サイズ。 |
| 11 |
--local-url-access 「file：///」URLの使用を許可します（デフォルトはtrueです）。 |
| 12 | *--local-to-remote-urlaccess=[true |
|
false]* ローカルコンテンツがリモートURLにアクセスできるようにします。 デフォルトはfalseです。 また、値[yes |
no]を取ります。 |
| 13 |
--max-disk-cachesize=size ディスクキャッシュのサイズを制限します（KB単位） |
| 14 |
--offline-storage-path オフラインストレージの場所を指定します。 |
| 15 |
--offline-storage-quota オフラインストレージの最大サイズをKB単位で設定します。 |
| 16 |
--outputencoding=encoding 端末出力に使用されるエンコーディングを設定します。 デフォルトはutf-8です。 |
| 17 |
--proxy=address:port 使用するプロキシサーバーを指定します（たとえば、proxy = 192.168.1.1：8080） |
| 18 | *--proxytype=[http |
| socks5 |
none]* プロキシサーバーのタイプを指定します（デフォルトはhttpです） |
| 19 |
--proxy-auth プロキシの認証情報。 例えば - --proxy-auth = username：password |
| 20 |
--scriptencoding=encoding スクリプトに使用されるエンコードを設定します。 デフォルトはutf8です。 |
| 21 |
--script-language スクリプト言語を設定します。 |
PhantomJS-画面キャプチャ
PhantomJSは、Webページのスクリーンショットを撮り、WebページをPDFに変換するのに非常に役立ちます。 ここで、それがどのように機能するかを示す簡単な例を示しました。
例
var page = require('webpage').create();
page.open('http://phantom.org/',function(status){
page.render('phantom.png');
phantom.exit();
});上記のプログラムを実行すると、出力は phantom.png として保存されます。
WebページをPDFに変換する
PhantomJSは、Webページをヘッダーとフッターが追加されたPDFに変換するのにも役立ちます。 次の例を見て、その仕組みを理解してください。
var wpage = require('webpage').create();
var url = "https://en.wikipedia.org/wiki/Main_Page";
var output = "test.pdf";
wpage.paperSize = {
width: screen.width+'px',
height: '1500px',
margin: {
'top':'50px',
'left':'50px',
'rigtht':'50px'
},
orientation:'portrait',
header: {
height: "1cm",
contents: phantom.callback(function(pageNumber, nPages) {
return "<h5>Header <b>" + pageNumber + "/" + nPages + "</b></h5>";
})
},
footer: {
height: "1cm",
contents: phantom.callback(function(pageNumber, nPages) {
return "<h5>Footer <b>" + pageNumber + "/" + nPages + "</b></h5>";
})
}
}
wpage.open(url, function (status) {
if (status !== 'success') {
console.log('Page is not opening');
phantom.exit();
} else {
wpage.render(output);
phantom.exit();
}
});上記のプログラムは、次の output を生成します。
The above will convert the page into pdf and will be saved in test.pdfキャンバスを画像に変換する
PhantomjsはCanvasをImageに簡単に変換できます。 次の例を見て、その仕組みを理解してください。
var page = require('webpage').create();
page.content = '<html><body><canvas id="surface" width="400" height="400"></canvas></body></html>';
page.evaluate(function() {
var context,e1;
el = document.getElementById('surface');
context = el.getContext('2d');
context.font = "30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText("Welcome to PhantomJS ", 200, 200);
document.body.style.backgroundColor = 'white';
document.body.style.margin = '0px';
});
page.render('canvas.png');
phantom.exit();上記のプログラムは、次の output を生成します。
PhantomJS-ページ自動化
PhantomJSは、そのWebページモジュールAPIを使用して、Webページを操作し、DOM操作、ボタンのクリックなどの操作を実行できます。
ページから画像を取得する
次のプログラムは、PhantomJSを使用してページから画像を取得する方法を示しています。
var wpage = require('webpage').create();
wpage.onConsoleMessage = function(str) {
console.log(str.length);
}
wpage.open("http://phantomjs.org", function(status) {
console.log(status);
var element = wpage.evaluate(function() {
var imgdata = document.querySelectorAll('img');
var imgsrc = [];
if (imgdata) {
for (var i in imgdata) {
imgsrc.push(imgdata[0].src);
}
}
return imgsrc;
});
console.log(JSON.stringify(element));
});上記のプログラムは、次の output を生成します。
Success
["http://phantomjs.org/img/phantomjslogo.png","http://phantomjs.org/img/phantom
js-logo.png","http://phantomjs.org/img/phantomjslogo.png","http://phantomjs.org
/img/phantomjs-logo.png"]*injectJS webpage method* を使用して、外部JavaScriptをページに含めることができます。 多くのプロパティとメソッドがあり、ページの自動化に役立ち、他の多くのことを実行できます。 プロパティとメソッドが詳細に説明されているWebページモジュールを参照できます。PhantomJS-ネットワーク監視
PhantomJSを使用して、ネットワークを監視し、特定のWebページの動作とパフォーマンスを検証できます。 PhantomJSには、 onResourceRequested および onResourceReceived などのコールバックがあり、特定のページのトラフィックの監視に役立ちます。
例
次の例は、PhantomJSを使用して特定のページのトラフィックを監視する方法を示しています。
function createHAR(address, title, startTime, resources) {
//this function formats the data which is coming from
onresourcerequest and onresourcereceived
var entries = [];
resources.forEach(function (resource) {
var request = resource.request, startReply = resource.startReply,
endReply = resource.endReply;
if (!request || !startReply || !endReply) {
return;
}
//Exclude Data URI from HAR file because
//they aren't included in specification
if (request.url.match(/(^data:image\/.*)/i)) {
return;
}
entries.push ({
startedDateTime: request.time.toISOString(),
time: endReply.time - request.time,
request: {
method: request.method,
url: request.url,
httpVersion: "HTTP/1.1",
cookies: [], headers: request.headers,
queryString: [],
headersSize: -1,
bodySize: -1
},
response: {
status: endReply.status,
statusText: endReply.statusText,
httpVersion: "HTTP/1.1",
cookies: [],
headers: endReply.headers,
redirectURL: "",
headersSize: -1,
bodySize: startReply.bodySize,
content: {
size: startReply.bodySize,
mimeType: endReply.contentType
}
},
cache: {},
timings: {
blocked: 0,
dns: -1,
connect: -1,
send: 0,
wait: startReply.time - request.time,
receive: endReply.time - startReply.time,
ssl: -1
},
pageref: address
});
});
return {
log: {
version: '1.2', creator: {
name: "PhantomJS",
version: phantom.version.major + '.' + phantom.version.minor +
'.' + phantom.version.patch
},
pages: [{
startedDateTime: startTime.toISOString(),
id: address,
title: title,
pageTimings: {
onLoad: page.endTime - page.startTime
}
}],
entries: entries
}
};
}
var page = require('webpage').create(), system = require('system');
var fs = require('fs');
if (system.args.length === 1) {
console.log('Usage: netsniff.js <some URL>');
phantom.exit(1);
} else {
page.address = system.args[1];
page.resources = [];
page.onLoadStarted = function () { //called when page is loaded
page.startTime = new Date();
};
page.onResourceRequested = function (req) {
//called when any files are requested from given page url
page.resources[req.id] = {
request: req,
startReply: null,
endReply: null
};
};
page.onResourceReceived = function (res) {
//called when any files are received.
if (res.stage === 'start') {
page.resources[res.id].startReply = res;
}
if (res.stage === 'end') {
page.resources[res.id].endReply = res;
}
};
page.open(page.address, function (status) { //open given page url
var har;
if (status !== 'success') {
console.log('FAIL to load the address');
phantom.exit(1);
} else {
page.endTime = new Date();
page.title = page.evaluate(function () {//gets the page title
return document.title;
});
har = createHAR(page.address, page.title, page.startTime, page.resources);
//calls the function createHAR with page url, starttime, and page resources.
//console.log(JSON.stringify(har, undefined, 4));
fs.write('log.txt', JSON.stringify(har, undefined, 4), 'w');
//logs are collected in log.txt file.
phantom.exit();
}
});
}HARプレビューに指定されたlog.txtの例
{
"log": {
"version": "1.2",
"creator": {
"name": "PhantomJS",
"version": "2.1.1"
},
"pages": [
{
"startedDateTime": "2017-05-21T13:41:21.824Z",
"id": "http://www.sample.com",
"title": "Free Sample Products – Sample.com ≫ Free Samples,
Free Product Samples, Product Test Marketing",
"pageTimings": {
"onLoad": 11081
}
}
],
"entries": [
{
"startedDateTime": "2017-05-21T13:41:21.815Z",
"time": 1999,
"request": {
"method": "GET",
"url": "http://www.sample.com/",
"httpVersion": "HTTP/1.1",
"cookies": [],
"headers": [
{
"name": "Accept",
"value": "text/html,application/xhtml+xml,
application/xml;q = 0.9,*/*;q = 0.8"
},
{
"name": "User-Agent",
"value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1
(KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1"
}
],
"queryString": [],
"headersSize": -1,
"bodySize": -1
},
"response": {
"status": 301,
"statusText": "Moved Permanently",
"httpVersion": "HTTP/1.1",
"cookies": [],
"headers": [
{
"name": "Date",
"value": "Sun, 21 May 2017 13:41:25 GMT"
},
{
"name": "Server",
"value": "Apache/2.2.14 (Ubuntu)"
},
{
"name": "Location",
"value": "http://sample.com//"
},
{
"name": "Vary",
"value": "Accept-Encoding"
},
{
"name": "Content-Encoding",
"value": "gzip"
},
{
"name": "Keep-Alive",
"value": "timeout = 15, max = 100"
},
{
"name": "Connection",
"value": "Keep-Alive"
},
{
"name": "Content-Type",
"value": "text/html; charset = iso-8859-1"
}
],
"redirectURL": "",
"headersSize": -1,
"bodySize": 307,
"content": {
"size": 307,
"mimeType": "text/html; charset = iso-8859-1"
}
},
"cache": {},
"timings": {
"blocked": 0,
"dns": -1,
"connect": -1,
"send": 0,
"wait": 1999,
"receive": 0,
"ssl": -1
},
"pageref": "http://www.sample.com"
},
]
{
"startedDateTime": "2017-05-21T13:41:24.898Z",
"time": 885,
"request": {
"method": "GET",
"url": "http://sample.com/",
"httpVersion": "HTTP/1.1",
"cookies": [],
"headers": [
{
"name": "Accept",
"value": "text/html,application/xhtml+xml,
application/xml;q = 0.9,*/*;q = 0.8"
},
{
"name": "User-Agent",
"value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1
(KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1"
}
],
"queryString": [],
"headersSize": -1,
"bodySize": -1
},
"response": {
"status": 200,
"statusText": "OK",
"httpVersion": "HTTP/1.1",
"cookies": [],
"headers": [
{
"name": "Date",
"value": "Sun, 21 May 2017 13:41:27 GMT"
},
{
"name": "Server",
"value": "Apache/2.2.14 (Ubuntu)"
},
{
"name": "X-Powered-By",
"value": "PHP/5.3.2-1ubuntu4.29"
},
{
"name": "X-Pingback",
"value": "http://sample.com/xmlrpc.php"
},
{
"name": "Link",
"value": "<http://sample.com/wp-json/>;
rel = \"https://api.w.org/\", <http://wp.me/P6Jj5H-4>;
rel = shortlink"
},
{
"name": "Vary",
"value": "Accept-Encoding"
},
{
"name": "Content-Encoding",
"value": "gzip"
},
{
"name": "Keep-Alive",
"value": "timeout = 15, max = 99"
},
{
"name": "Connection",
"value": "Keep-Alive"
},
{
"name": "Content-Type",
"value": "text/html; charset = UTF-8"
}
],
"redirectURL": "",
"headersSize": -1,
"bodySize": 1969,
"content": {
"size": 1969,
"mimeType": "text/html; charset = UTF-8"
}
},
"cache": {},
"timings": {
"blocked": 0,
"dns": -1,
"connect": -1,
"send": 0,
"wait": 869,
"receive": 16,
"ssl": -1
},
"pageref": http://www.sample.com
},
{
"startedDateTime": "2017-05-21T13:41:25.767Z",
"time": 388,
"request": {
"method": "GET",
"url": "http://sample.com/wpcontent/themes/samplecom/style.css",
"httpVersion": "HTTP/1.1",
"cookies": [],
"headers": [
{
"name": "Accept",
"value": "text/css,*/*;q = 0.1"
},
{
"name": "Referer",
"value": "http://sample.com/"
},
{
"name": "User-Agent",
"value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1
(KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1"
}
],
"queryString": [],
"headersSize": -1,
"bodySize": -1
},
"response": {
"status": 200,
"statusText": "OK",
"httpVersion": "HTTP/1.1",
"cookies": [],
"headers": [
{
"name": "Date",
"value": "Sun, 21 May 2017 13:41:27 GMT"
},
{
"name": "Server",
"value": "Apache/2.2.14 (Ubuntu)"
},
{
"name": "Last-Modified",
"value": "Fri, 22 Apr 2011 00:32:22 GMT"
},
{
"name": "ETag",
"value": "\"e1d7-1836-4a176fdbbd180\""
},
{
"name": "Accept-Ranges",
"value": "bytes"
},
{
"name": "Vary",
"value": "Accept-Encoding"
},
{
"name": "Content-Encoding",
"value": "gzip"
},
{
"name": "Keep-Alive",
"value": "timeout = 15, max = 98"
},
{
"name": "Connection",
"value": "Keep-Alive"
},
{
"name": "Content-Type",
"value": "text/css"
}
],
"redirectURL": "",
"headersSize": -1,
"bodySize": 3174,
"content": {
"size": 3174,
"mimeType": "text/css"
}
},
"cache": {},
"timings": {
"blocked": 0,
"dns": -1,
"connect": -1,
"send": 0,
"wait": 388,
"receive": 0,
"ssl": -1
},
"pageref": "http://www.sample.com"
}
}
}出力
上記のプログラムは、次の出力を生成します。
すべてのログは* .txtファイル*以降に収集されます。たとえば、（http://www.softwareishard.com/har/viewer/[http：//www .softwareishard.com/har/viewer/）]
PhantomJS-テスト
*PhantomJS* には、すべての詳細を提供するWebページ用のAPIがたくさんあります。 PhantomJSは、ページのコンテンツの取得、画面共有の取得、ページのPDFへの変換などのテストに使用できます。 市場には多くの一般的なテストライブラリがあり、PhantomJSと一緒に使用してテストに使用できます。PhantomJSで動作することができる人気のあるフレームワークのいくつかは次のとおりです-
- モカ
- ジャスミン
- Qunit
- Hiro
- ライカ
- Buster.JS *WebDriver
例– Qunitを使用したPhantomJS
(function () {
var url, timeout,args = require('system').args, page = require('webpage').create();
url = args[1];
timeout = parseInt(10, 10);
page.onConsoleMessage = function (msg) {
//prints all the console messages
console.log(msg);
};
page.onInitialized = function () { //called when page is initialized
page.evaluate(callqunit);
};
page.onCallback = function (message) {//called from
var result, failed;
if (message) {
if (message.name === 'QUnit.done') {
result = message.data;
failed = !result || !result.total || result.failed;
if (!result.total) {
console.error('No tests were executed');
}
pageexit(failed ? 1 : 0);
}
}
};
page.open(url, function (status) {//opening page
if (status !== 'success') {
console.error('Unable to access network: ' + status);
pageexit(1);
} else {
var checkqunit = page.evaluate(function () {
//evaluating page and chcking if qunit object
is present on the given page url
return (typeof QUnit === 'undefined' || !QUnit);
});
if (checkqunit) {
console.error('Qunit scripts are not present on the page');
pageexit(1);
}
//timeout of 10seconds is used otherwise message from console will get printed.
setTimeout(function () {
console.error('The specified timeout of ' + timeout + ' seconds has expired.
Aborting...');
pageexit(1);
}, timeout* 1000);
}
});
function callqunit() {qunitl
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width">
<title>QUnit Example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-2.3.2.css">
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script src = "https://code.jquery.com/qunit/qunit-2.3.2.js"></script>
</body>
</html>出力
コマンド-phantomjs qunit.js http：//localhost/tasks/qunitl
上記のプログラムは、次の出力を生成します。
{"passed":3,"failed":2,"total":5,"runtime":23}
Time taken is 23ms to run 5 tests.
3 passed, 2 failed.PhantomJS-REPL
*REPL* は *Read Eval Print Loop* の略です。 PhantomJSでは、REPLはJavaScriptコードをテストするためのインタラクティブモードです。 Google Chrome InspectorまたはFirebugで行われる同じことを実行して、コンソール上でコードの一部を直接実行することもできます。 REPLは、スクリプトを実行するための同じプラットフォームを返します。入力されたコマンドは、即時解釈（EVAL）およびフィードバックの提供（PRINT）のためにインタープリターに送信されます。 コマンドラインに PhantomJS と入力すると、対話モードになり、コードを直接実行できます。
構文
その構文は次のとおりです-
Phantomjs例
次の例は、PhantomJSでREPLがどのように機能するかを示しています。
phantomjs> console.log("Welcome to phantomjs");
Welcome to phantomjs
Undefined
phantomjs> window.navigator {
"appCodeName": "Mozilla",
"appName": "Netscape",
"appVersion": "5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, like Gecko)
PhantomJS/2.1.1 Safari/538.1",
"cookieEnabled": true,
"language": "en-IN",
"mimeTypes": {
"length": 0
},
"onLine": false,
"platform": "Win32",
"plugins": {
"length": 0
},
"product": "Gecko
"productSub": "20030107",
"userAgent": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, like Gecko)
PhantomJS/2.1.1 Safari/538.1",
"vendor": "Apple Computer, Inc.",
"vendorSub": ""
}
phantomjs>
To find the version
phantomjs> phantom.version {
"major": 2,
"minor": 1,
"patch": 1
}
phantomjs>各コマンドが実行され、結果が表示されます。 対話モードを終了するには、CTRL + C、CTRL + D、または* phantom.exit（）*を使用します。
*up/down* 矢印キーを使用して、以前に入力したコマンドを聞きます。*autocompletion* と呼ばれる別の機能があります。これは、コマンドを思い出すのに役立ちます。 「ファントム」と入力して「タブ」ボタンを押すだけで、実行可能なコマンドのリストが表示されます。出力
上記のプログラムは、次の出力を生成します。
phantomjs> phantom.→|
phantomjs> phantom.cookies→|
phantomjs> phantom.exit→|
phantomjs> phantom.version→|PhantomJS-例
この章では、PhantomJSのいくつかの重要な機能を理解するために、いくつかの実用的な例を提供します。
例1-ページ速度を見つける
この例では、PhantomJSを使用して、特定のページURLの*ページ速度*を検索します。
var page = require('webpage').create(),
system = require('system'),
t, address;
if (system.args.length === 1) {
console.log('Usage: loadspeed.js <some URL>');
phantom.exit(1);
} else {
t = Date.now();
address = system.args[1];
page.open(address, function (status) {
if (status !== 'success') {
console.log('FAIL to load the address');
} else {
t = Date.now() - t;
console.log('Page title is ' + page.evaluate(function () {
return document.title;
}));
console.log('Loading time ' + t + ' msec');
}
phantom.exit();
});
}上記のプログラムは、次の output を生成します。
コマンド-phantomjs pagespeed.js http://www.google.com
Page title is Google
Loading time 1396 msec例2-クリックイベントをページに送信する
次の例では、PhantomJSを使用して*クリックイベント*をページに送信します。
var page = require('webpage').create();
page.onConsoleMessage = function(str) {
console.log(str);
}
page.open('http://phantomjs.org/api/phantom/', function(status) {
page.render('beforeclick.png');
console.log(page.url);
var element = page.evaluate(function() {
return document.querySelector('img[src = "http://phantomjs.org/img/phantomjslogo.png"]');
});
page.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');
window.setTimeout(function () {
console.log(page.url);
page.render('afterclick.png');
phantom.exit();
}, 5000);
console.log('element is ' + element);
});上記のプログラムは、次の output を生成します。
http://phantomjs.org/api/phantom/
element is [object Object]
http://phantomjs.org/このプログラムは、 bin フォルダーに次の2つの png 画像を作成します。 これらの2つの画像は、上記のプログラムの実行前後の違いを示しています。
例3-フォームを送信する
次の例は、PhantomJSを使用してフォームを送信する方法を示しています。
var wpage = require('webpage').create();
wpage.open("http://localhost/tasks/submitforml", function(status) {
console.log(status);
wpage.uploadFile('input[name = fileToUpload]', 'output.png');
wpage.render("sform.png");
var element = wpage.evaluate(function() {
return document.querySelector('input[type = "submit"]');
//getting details of submit button using queryselector.
});
wpage.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');
//sendevent is used to send click event and also giving the left and top
position of the submit button.
window.setTimeout(function () {
console.log(wpage.url);
wpage.render("submit.png"); //screenshot is saved in submit.png
phantom.exit();
}, 5000);
console.log('element is ' + element);
});submitforml
次のコードは、 submitforml ファイルの使用方法を示しています。
<html>
<head>
<title>Window 2</title>
</head>
<body>
<form action = "submitform.php" method = "post" enctype = "multipart/form-data"
id = "form1">
<input type = "file" name = "fileToUpload" id = "fileToUpload">
<input type = "submit" value = "Upload Image" name = "submit">
</form>
</body>
</html>フォームが送信されると、 submitform.php に移動します。
submitform.php
submitform.phpはファイルの詳細を印刷するだけです。
<?php
print_r($_FILES);
?>上記のプログラムは、次の output を生成します。
Success
element is [object Object]
http://localhost/tasks/submitform.php画像
以下は、 file upload および form submit の画像です。
