核心要點(diǎn)

• PhantomJS，一個(gè)基於WebKit的無(wú)頭瀏覽器，允許更快地以編程方式自動(dòng)化和測(cè)試網(wǎng)頁(yè)，無(wú)需圖形用戶界面。
• PhantomJS 提供強(qiáng)大的功能，例如通過(guò) JavaScript 與頁(yè)面交互的能力，從而可以輕鬆地自動(dòng)化諸如單擊按鈕、提交表單，甚至使用標(biāo)準(zhǔn) DOM API 或 jQuery 等庫(kù)加載和操作網(wǎng)頁(yè)的任務(wù)。
• PhantomJS 提供廣泛的文件系統(tǒng) API，使應(yīng)用程序能夠?qū)⒃创a存儲(chǔ)到文件系統(tǒng)、拍攝網(wǎng)頁(yè)屏幕截圖，甚至將外部腳本文件包含到頁(yè)面中。
• 儘管 PhantomJS 功能強(qiáng)大，但它與 Node.js 的集成度並不高，現(xiàn)有項(xiàng)目通常使用子進(jìn)程模塊來(lái)生成 PhantomJS 實(shí)例，並通過(guò) WebSockets 與 Node.js 通信。

如果您正在閱讀本文，您很可能知道什麼是瀏覽器?，F(xiàn)在去掉 GUI，您就得到了所謂的 無(wú)頭瀏覽器。無(wú)頭瀏覽器可以執(zhí)行與普通瀏覽器相同的所有操作，但速度更快。它們非常適合以編程方式自動(dòng)化和測(cè)試網(wǎng)頁(yè)。目前存在許多無(wú)頭瀏覽器，而 PhantomJS 是其中最好的。 PhantomJS 基於 Chrome 和 Safari 背後的引擎 WebKit 構(gòu)建，它為您提供了強(qiáng)大的瀏覽器功能，而無(wú)需笨重的 GUI。開始使用 PhantomJS 很容易——只需下載可執(zhí)行文件即可。接下來(lái)，創(chuàng)建一個(gè)名為 hello.js 的文件並添加以下幾行代碼：

console.log("Hello World!");
phantom.exit();

要執(zhí)行腳本，請(qǐng)運(yùn)行以下命令。請(qǐng)注意，phantomjs 可執(zhí)行文件必須位於當(dāng)前目錄中，或者位於環(huán)境的 PATH 中的某個(gè)位置。如果一切配置正確，PhantomJS 將把“Hello World！”打印到控制臺(tái)，然後在調(diào)用 phantom.exit() 時(shí)終止。

phantomjs hello.js

使用網(wǎng)頁(yè)

PhantomJS 運(yùn)行後，您可以開始自動(dòng)化 Web。以下示例加載 Google 首頁(yè)，然後將屏幕截圖保存到文件中。第 1 行創(chuàng)建網(wǎng)頁(yè)的新實(shí)例。第 4 行加載 google.com。頁(yè)面加載完成後，將執(zhí)行 onLoadFinished() 回調(diào)函數(shù)?；卣{(diào)函數(shù)接收單個(gè)參數(shù) status，該參數(shù)指示頁(yè)面是否成功加載。加載頁(yè)面的 URL 在 page.url 中可用。當(dāng)頁(yè)麵包含重定向時(shí)，此屬性特別有用，並且您希望確切知道您到達(dá)的位置。第 8 行使用頁(yè)面的 render() 方法拍攝屏幕截圖。 render() 可以創(chuàng)建 PNG、GIF、JPEG 和 PDF 文件。

console.log("Hello World!");
phantom.exit();

頁(yè)面設(shè)置

可以根據(jù)應(yīng)用程序的需求自定義頁(yè)面對(duì)象的許多設(shè)置。例如，如果您只對(duì)下載源代碼感興趣，則可以通過(guò)忽略圖像文件並關(guān)閉 JavaScript 來(lái)加快應(yīng)用程序的速度。下面的重寫示例反映了這些更改。更改的設(shè)置顯示在第 3 行和第 4 行。請(qǐng)注意，任何設(shè)置更改都必須在調(diào)用 open() 之前進(jìn)行。如果您查看此示例的屏幕截圖，您會(huì)注意到 Google 徽標(biāo)圖像丟失了，但頁(yè)面的其餘部分保持不變。

phantomjs hello.js

訪問(wèn)文件系統(tǒng)

到目前為止，我們的示例已加載頁(yè)面並將屏幕截圖保存為圖像文件。雖然這無(wú)疑很酷，但許多應(yīng)用程序更願(yuàn)意將源代碼存儲(chǔ)到文件系統(tǒng)中。 PhantomJS 通過(guò)提供廣泛的文件系統(tǒng) API 來(lái)實(shí)現(xiàn)這一點(diǎn)。以下示例使用 FileSystem 模塊將 google.com 源代碼寫入文件。首先，在第 2 行導(dǎo)入 FileSystem 模塊。在第 6 行，打開輸出文件以進(jìn)行寫入。在第 7 行，使用 write() 方法將數(shù)據(jù)寫入文件。實(shí)際源代碼可通過(guò)頁(yè)面的 content 屬性獲得。最後，關(guān)閉文件並終止 PhantomJS。

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};

執(zhí)行 JavaScript

PhantomJS 最強(qiáng)大的功能之一是能夠通過(guò) JavaScript 與頁(yè)面交互。這使得自動(dòng)化諸如單擊按鈕和提交表單之類的任務(wù)變得極其容易。我們的下一個(gè)示例通過(guò)加載 Google 首頁(yè)、輸入查詢?nèi)会崽峤凰阉鞅韱蝸?lái)執(zhí)行 Web 搜索。示例的開頭應(yīng)該看起來(lái)很熟悉。新的內(nèi)容從第 8 行開始，我們確定已加載哪個(gè)頁(yè)面。如果這是首頁(yè)，則調(diào)用頁(yè)面的 evaluate() 方法。 evaluate() 在頁(yè)面的上下文中執(zhí)行您提供的代碼。這實(shí)際上為您提供了與頁(yè)面原始開發(fā)人員相同的權(quán)限。這有多酷？

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.settings.javascriptEnabled = false;
page.settings.loadImages = false;
page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};

在 evaluate() 內(nèi)部，我們找到搜索框和表單。我們將搜索框的值設(shè)置為“JSPro”，然後提交表單。這將導(dǎo)致頁(yè)面的 onLoadFinished() 方法再次被觸發(fā)。但是，這次會(huì)拍攝搜索結(jié)果的屏幕截圖，然後 PhantomJS 退出。 PhantomJS 還提供兩種方法 includeJs() 和 injectJs()，它們?cè)试S您將外部腳本文件添加到頁(yè)面中。 includeJs() 用於包含頁(yè)面可訪問(wèn)的任何腳本文件。例如，您可以使用以下代碼在之前的示例中包含 jQuery。請(qǐng)注意第 9 行對(duì) includeJs() 的調(diào)用，以及 evaluate() 內(nèi)部的 jQuery 語(yǔ)法。

var page = require("webpage").create();
var fs = require("fs");
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var file = fs.open("output.htm", "w");

  file.write(page.content);
  file.close();
  phantom.exit();
};

injectJs() 方法類似於 includeJs()。不同之處在於，注入的腳本文件不需要從頁(yè)面對(duì)象訪問(wèn)。例如，這允許您從本地文件系統(tǒng)注入腳本。

PhantomJS 和 Node.js

遺憾的是，PhantomJS 與 Node.js 的集成度並不高。已經(jīng)創(chuàng)建了一些項(xiàng)目試圖從 Node.js 控制 PhantomJS，但它們都有些笨拙?，F(xiàn)有項(xiàng)目使用子進(jìn)程模塊來(lái)生成 PhantomJS 實(shí)例。接下來(lái)，PhantomJS 加載一個(gè)特殊的網(wǎng)頁(yè)，該網(wǎng)頁(yè)使用 WebSockets 與 Node.js 通信。它可能並不理想，但它有效。兩個(gè)更流行的 PhantomJS Node 模塊是 node-phantom 和 phantomjs-node。我最近開始開發(fā)我自己的 PhantomJS Node 模塊，名為 ghostbuster。 Ghostbuster 類似於 node-phantom，但試圖通過(guò)提供更強(qiáng)大的命令來(lái)減少回調(diào)嵌套。對(duì) PhantomJS 的調(diào)用越少，浪費(fèi)在 WebSockets 上通信的時(shí)間就越少。另一種選擇是 zombie.js，這是一個(gè)基於 jsdom 構(gòu)建的輕量級(jí)無(wú)頭瀏覽器。 Zombie 不像 PhantomJS 那樣強(qiáng)大，但它是真正的 Node.js 模塊。

結(jié)論

閱讀本文後，您應(yīng)該對(duì) PhantomJS 有了基本的了解。 PhantomJS 最好的功能之一是它易於使用。如果您已經(jīng)熟悉 JavaScript，那麼學(xué)習(xí)曲線很小。 PhantomJS 還支持本文未介紹的各種其他功能。與往常一樣，我鼓勵(lì)您查看文檔。還有一些示例展示了 PhantomJS 的全部功能！

關(guān)於無(wú)頭 WebKit 和 PhantomJS 的常見問(wèn)題

無(wú)頭 WebKit 和 PhantomJS 的主要區(qū)別是什麼？

無(wú)頭 WebKit 和 PhantomJS 都是用於自動(dòng)化 Web 瀏覽器的工具。但是，主要區(qū)別在於它們的功能。無(wú)頭 WebKit 是一個(gè)沒(méi)有圖形用戶界面的瀏覽器，可以以編程方式控制它進(jìn)行自動(dòng)化、測(cè)試和服務(wù)器端渲染。另一方面，PhantomJS 是一個(gè)可腳本化的無(wú)頭瀏覽器，用於自動(dòng)化網(wǎng)頁(yè)交互，提供 JavaScript API，支持自動(dòng)化導(dǎo)航、屏幕截圖、用戶行為和斷言。

PhantomJS 是否仍在維護(hù)？

截至 2018 年 3 月，PhantomJS 已不再積極維護(hù)。其主要原因是出現(xiàn)了 Chrome 無(wú)頭瀏覽器和 Firefox 無(wú)頭瀏覽器等現(xiàn)代無(wú)頭瀏覽器，它們提供了更多功能和更好的支持。

PhantomJS 的一些替代方案是什麼？

由於 PhantomJS 已不再維護(hù)，因此出現(xiàn)了一些替代方案。這些包括 Puppeteer，一個(gè) Node 庫(kù)，它提供了一個(gè)高級(jí) API 來(lái)通過(guò) DevTools 協(xié)議控制 Chrome 或 Chromium，以及 Selenium WebDriver，一個(gè)用於自動(dòng)化 Web 應(yīng)用程序測(cè)試的開源 API 集合。

PhantomJS 如何工作？

PhantomJS 通過(guò)提供一個(gè) JavaScript API 來(lái)工作，該 API 支持自動(dòng)化導(dǎo)航、屏幕截圖、用戶行為和斷言。它是一個(gè)使用 JavaScript API 的可腳本化的無(wú)頭 WebKit。它對(duì)各種 Web 標(biāo)準(zhǔn)具有快速且本機(jī)支持：DOM 處理、CSS 選擇器、JSON、Canvas 和 SVG。

我可以使用 PhantomJS 進(jìn)行 Web 抓取嗎？

是的，PhantomJS 可用於 Web 抓取。它允許您使用標(biāo)準(zhǔn) DOM API 或 jQuery 等常用庫(kù)來(lái)加載和操作網(wǎng)頁(yè)。

如何安裝 PhantomJS？

PhantomJS 可以通過(guò) npm（Node 包管理器）安裝。您可以在終端或命令提示符中使用命令“npm install phantomjs”。

無(wú)頭 WebKit 在服務(wù)器端渲染中的作用是什麼？

無(wú)頭 WebKit 在服務(wù)器端渲染中起著至關(guān)重要的作用，因?yàn)樗试S服務(wù)器預(yù)渲染 JavaScript 渲染的頁(yè)面，將其轉(zhuǎn)換為 HTML，然後將其發(fā)送給客戶端。這提高了 Web 應(yīng)用程序的性能和 SEO。

我可以使用無(wú)頭 WebKit 進(jìn)行自動(dòng)化測(cè)試嗎？

是的，無(wú)頭 WebKit 是進(jìn)行自動(dòng)化測(cè)試的絕佳工具。它允許您在真實(shí)的瀏覽器環(huán)境中運(yùn)行測(cè)試，而無(wú)需可見的 UI。

如何安裝無(wú)頭 WebKit？

無(wú)頭 WebKit 的安裝過(guò)程取決於您使用的特定工具。例如，如果您使用的是 Puppeteer，則可以使用命令“npm install puppeteer”通過(guò) npm 安裝它。

與傳統(tǒng)的自動(dòng)化瀏覽器相比，使用無(wú)頭 WebKit 的優(yōu)勢(shì)是什麼？

無(wú)頭 WebKit 在自動(dòng)化方面比傳統(tǒng)瀏覽器具有多個(gè)優(yōu)勢(shì)。它更快，因?yàn)樗恍枰ㄙM(fèi)時(shí)間渲染視覺(jué)效果。它還允許進(jìn)行自動(dòng)化、可腳本化的瀏覽，這對(duì)於測(cè)試和 Web 抓取非常有用。

以上是無(wú)頭Webkit和Phantomjs的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！