phantomjs mac版

PhantomJS 使用了 WebKit內(nèi)核，是一個(gè)真正的布局和渲染引擎，它可以像屏幕截圖一樣捕獲一個(gè)web界面。因?yàn)樗�可以渲染網(wǎng)頁中的人和元素，所以它不僅用到HTML，CSS的內(nèi)容轉(zhuǎn)化，還用在SVG，Canvas。可見其功能是相當(dāng)強(qiáng)大的。PhantomJS 可以用于 頁面自動(dòng)化 ， 網(wǎng)絡(luò)監(jiān)測(cè) ， 網(wǎng)頁截屏 ，以及 無界面測(cè)試 等。PhantomJS 支持web而不需瀏覽器支持，其快速，原生支持各種Web標(biāo)準(zhǔn)： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。

MAC OS X安裝：

下載phantomjs-1.9.8-macosx.zip并解壓，bin/phantomjs直接可用。

或者通過Homebrew安裝

brew update && brew install phantomjs

或者通過MacPorts安裝

sudo port selfupdate && sudo port install phantomjs

快速開始

安裝完phantomjs 之后，將其可執(zhí)行路徑加入到PATH中。

hello world

新建hello.js，添加如下代碼：

console.log('Hello, world!');
phantom.exit();

在命令行里執(zhí)行：

phantomjs hello.js

會(huì)輸出：

Hello, world!

第一行代碼，console.log會(huì)打印字符串到命令行。第二行代碼，phantom.exit會(huì)終止執(zhí)行過程。

注意：一定不要忘了在代碼里調(diào)用phantom.exit，否則PhantomJS將不會(huì)被終止

頁面加載

通過page 對(duì)象，我們可以加載，分析，渲染頁面。

下面的代碼展示了page 對(duì)象最簡(jiǎn)單的用法。它加載example.com然后將其保存為一個(gè)圖片example.png。

var page = require('webpage').create();
page.open('http://example.com', function() {
  page.render('example.png');
  phantom.exit();});

PhantomJS基于Webkit引擎，可以布局和渲染頁面，我們可以利用這一點(diǎn)給網(wǎng)頁拍照。

代碼運(yùn)算 – Code Evaluation

要想在網(wǎng)頁的上下文中對(duì)JavaScript 或 CoffeeScript 進(jìn)行運(yùn)算，使用 evaluate() 方法。代碼是在“沙箱”中運(yùn)行的，它沒有辦法讀取在其所屬頁面上下文之外的任何JavaScript對(duì)象和變量。 evaluate() 會(huì)返回一個(gè)對(duì)象，然而它僅限制于簡(jiǎn)單的對(duì)象并且不能包含方法或閉包。

這有一個(gè)示例來顯示網(wǎng)頁標(biāo)題：

var page = require('webpage').create();

page.open(url, function (status) {

    var title = page.evaluate(function () {

        return document.title;

    });

    console.log('Page title is ' + title);

});

任何來自于網(wǎng)頁并且包括來自 evaluate() 內(nèi)部代碼的控制臺(tái)信息，默認(rèn)不會(huì)顯示的。要重寫這個(gè)行為，使用 onConsoleMessage 回調(diào)函數(shù)，前一個(gè)示例可以被改寫成：

var page = require('webpage').create();

page.onConsoleMessage = function (msg) {

    console.log('Page title is ' + msg);

};

page.open(url, function (status) {

    page.evaluate(function () {

        console.log(document.title);

    });

});

DOM操作 – DOM Manipulation

由于腳本好像是一個(gè)Web瀏覽器上運(yùn)行的一樣，標(biāo)準(zhǔn)的DOM腳本和CSS選擇器可以很好的工作。這使得PhantomJS適合支持各種 頁面自動(dòng)化任務(wù) 。

下面的  useragent.js  將讀取 id  為myagent的元素的  textContent  屬性：

var page = require('webpage').create();

console.log('The default user agent is ' + page.settings.userAgent);

page.settings.userAgent = 'SpecialAgent';

page.open('http://www.httpuseragent.org', function (status) {

    if (status !== 'success') {

        console.log('Unable to access network');

    } else {

        var ua = page.evaluate(function () {

            return document.getElementById('myagent').textContent;

        });

        console.log(ua);

    }

    phantom.exit();

});

上面示例同樣提供了一種自定義 user agent 的方法。

使用JQuery及其他類庫：

var page = require('webpage').create();

page.open('http://www.sample.com', function() {

    page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {

        page.evaluate(function() {

            $("button").click();

        });

        phantom.exit()

    });

});

下面的loadspeed.js,加載一個(gè)指定的URL，然后測(cè)量加載頁面所需時(shí)間。

var page = require('webpage').create(),
  system = require('system'),
  t, address;if (system.args.length === 1) {
  console.log('Usage: loadspeed.js <some URL>');
  phantom.exit();}

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('Loading ' + system.args[1]);
    console.log('Loading time ' + t + ' msec');  }
  phantom.exit();});

從命令行執(zhí)行(注意有http)：

phantomjs loadspeed.js http://www.google.com

輸出結(jié)果類似下面這樣：

Loading http://www.google.com Loading time 719 msec

執(zhí)行腳本

想要在頁面的上下文里執(zhí)行javascript或者coffeescript代碼，要使用evaluate()函數(shù)。evaluate()可以返回一個(gè)對(duì)象，但必須是一個(gè)簡(jiǎn)單的對(duì)象，不能包含函數(shù)或者閉包。

下面的代碼展示了如何顯示一個(gè)網(wǎng)頁的title:

var page = require('webpage').create();
page.open(url, function(status) {  var title = page.evaluate(function() {    return document.title;  });
  console.log('Page title is ' + title);
  phantom.exit();});

默認(rèn)情況下，頁面代碼里的console輸出的消息，以及evaluate()里的console輸出的消息都不會(huì)顯示出來。不過，通過使用onConsoleMessage回調(diào)函數(shù),你可以改寫這一行為，上面的實(shí)例可以改為：

var page = require('webpage').create();
page.onConsoleMessage = function(msg) {
  console.log('Page title is ' + msg);};
page.open(url, function(status) {
  page.evaluate(function() {
    console.log(document.title);  });
  phantom.exit();});

evaluate()里的代碼就像在瀏覽器里執(zhí)行一樣，所以像標(biāo)準(zhǔn)的DOM操作、CSS選擇等都可以正常進(jìn)行。我們可以利用這一點(diǎn)將一些頁面工作自動(dòng)化。

網(wǎng)絡(luò)請(qǐng)求與返回

當(dāng)頁面向服務(wù)器請(qǐng)求資源時(shí)，通過onResourceRequested 和 onResourceReceived 回調(diào)函數(shù)可以 記錄request和response。例如：

var page = require('webpage').create();
page.onResourceRequested = function(request) {
  console.log('Request ' + JSON.stringify(request, undefined, 4));};
page.onResourceReceived = function(response) {
  console.log('Receive ' + JSON.stringify(response, undefined, 4));};
page.open(url);

基于此我們可以進(jìn)行一些頁面性能的分析。

簡(jiǎn)簡(jiǎn)單單，pfan！出來混的，一切都是要還的。