核心要點

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

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

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

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

phantomjs hello.js

使用網(wǎng)頁

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

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

頁面設(shè)置

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

phantomjs hello.js

訪問文件系統(tǒng)

到目前為止，我們的示例已加載頁面並將屏幕截圖保存為圖像文件。雖然這無疑很酷，但許多應(yīng)用程序更願意將源代碼存儲到文件系統(tǒng)中。 PhantomJS 通過提供廣泛的文件系統(tǒng) API 來實現(xiàn)這一點。以下示例使用 FileSystem 模塊將 google.com 源代碼寫入文件。首先，在第 2 行導(dǎo)入 FileSystem 模塊。在第 6 行，打開輸出文件以進(jìn)行寫入。在第 7 行，使用 write() 方法將數(shù)據(jù)寫入文件。實際源代碼可通過頁面的 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)大的功能之一是能夠通過 JavaScript 與頁面交互。這使得自動化諸如單擊按鈕和提交表單之類的任務(wù)變得極其容易。我們的下一個示例通過加載 Google 首頁、輸入查詢?nèi)会崽峤凰阉鞅韱蝸韴?zhí)行 Web 搜索。示例的開頭應(yīng)該看起來很熟悉。新的內(nèi)容從第 8 行開始，我們確定已加載哪個頁面。如果這是首頁，則調(diào)用頁面的 evaluate() 方法。 evaluate() 在頁面的上下文中執(zhí)行您提供的代碼。這實際上為您提供了與頁面原始開發(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)致頁面的 onLoadFinished() 方法再次被觸發(fā)。但是，這次會拍攝搜索結(jié)果的屏幕截圖，然後 PhantomJS 退出。 PhantomJS 還提供兩種方法 includeJs() 和 injectJs()，它們允許您將外部腳本文件添加到頁面中。 includeJs() 用於包含頁面可訪問的任何腳本文件。例如，您可以使用以下代碼在之前的示例中包含 jQuery。請注意第 9 行對 includeJs() 的調(diào)用，以及 evaluate() 內(nèi)部的 jQuery 語法。

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()。不同之處在於，注入的腳本文件不需要從頁面對象訪問。例如，這允許您從本地文件系統(tǒng)注入腳本。

PhantomJS 和 Node.js

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

結(jié)論

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

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

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

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

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

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

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

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

PhantomJS 如何工作？

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

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

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

如何安裝 PhantomJS？

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

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

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

我可以使用無頭 WebKit 進(jìn)行自動化測試嗎？

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

如何安裝無頭 WebKit？

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

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

無頭 WebKit 在自動化方面比傳統(tǒng)瀏覽器具有多個優(yōu)勢。它更快，因為它不需要花費時間渲染視覺效果。它還允許進(jìn)行自動化、可腳本化的瀏覽，這對於測試和 Web 抓取非常有用。

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