核心要點

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

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

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

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

phantomjs hello.js

使用網(wǎng)頁

PhantomJS 運行后，您可以開始自動化 Web。以下示例加載 Google 首頁，然后將屏幕截圖保存到文件中。第 1 行創(chuàng)建網(wǎng)頁的新實例。第 4 行加載 google.com。頁面加載完成后，將執(zhí)行 onLoadFinished() 回調(diào)函數(shù)。回調(diào)函數(shù)接收單個參數(shù) status，該參數(shù)指示頁面是否成功加載。加載頁面的 URL 在 page.url 中可用。當頁面包含重定向時，此屬性特別有用，并且您希望確切知道您到達的位置。第 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() 之前進行。如果您查看此示例的屏幕截圖，您會注意到 Google 徽標圖像丟失了，但頁面的其余部分保持不變。

phantomjs hello.js

訪問文件系統(tǒng)

到目前為止，我們的示例已加載頁面并將屏幕截圖保存為圖像文件。雖然這無疑很酷，但許多應(yīng)用程序更愿意將源代碼存儲到文件系統(tǒng)中。PhantomJS 通過提供廣泛的文件系統(tǒng) API 來實現(xiàn)這一點。以下示例使用 FileSystem 模塊將 google.com 源代碼寫入文件。首先，在第 2 行導(dǎo)入 FileSystem 模塊。在第 6 行，打開輸出文件以進行寫入。在第 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 最強大的功能之一是能夠通過 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，但它們都有些笨拙?，F(xiàn)有項目使用子進程模塊來生成 PhantomJS 實例。接下來，PhantomJS 加載一個特殊的網(wǎng)頁，該網(wǎng)頁使用 WebSockets 與 Node.js 通信。它可能并不理想，但它有效。兩個更流行的 PhantomJS Node 模塊是 node-phantom 和 phantomjs-node。我最近開始開發(fā)我自己的 PhantomJS Node 模塊，名為 ghostbuster。Ghostbuster 類似于 node-phantom，但試圖通過提供更強大的命令來減少回調(diào)嵌套。對 PhantomJS 的調(diào)用越少，浪費在 WebSockets 上通信的時間就越少。另一種選擇是 zombie.js，這是一個基于 jsdom 構(gòu)建的輕量級無頭瀏覽器。Zombie 不像 PhantomJS 那樣強大，但它是真正的 Node.js 模塊。

結(jié)論

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

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

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

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

PhantomJS 是否仍在維護？

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

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

由于 PhantomJS 已不再維護，因此出現(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 標準具有快速且本機支持：DOM 處理、CSS 選擇器、JSON、Canvas 和 SVG。

我可以使用 PhantomJS 進行 Web 抓取嗎？

是的，PhantomJS 可用于 Web 抓取。它允許您使用標準 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 進行自動化測試嗎？

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

如何安裝無頭 WebKit？

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

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

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

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