無頭Webkit和Phantomjs

核心要點

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

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

<code class="language-javascript">console.log("Hello World!");
phantom.exit();</code>

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

<code class="language-bash">phantomjs hello.js</code>

使用網頁

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

<code class="language-javascript">console.log("Hello World!");
phantom.exit();</code>

頁面設置

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

<code class="language-bash">phantomjs hello.js</code>

訪問文件系統

到目前為止，我們的示例已加載頁面並將屏幕截圖保存為圖像文件。雖然這無疑很酷，但許多應用程序更願意將源代碼存儲到文件系統中。 PhantomJS 通過提供廣泛的文件系統 API 來實現這一點。以下示例使用 FileSystem 模塊將 google.com 源代碼寫入文件。首先，在第 2 行導入 FileSystem 模塊。在第 6 行，打開輸出文件以進行寫入。在第 7 行，使用 write() 方法將數據寫入文件。實際源代碼可通過頁面的 content 屬性獲得。最後，關閉文件並終止 PhantomJS。

<code class="language-javascript">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();
};</code>

執行 JavaScript

PhantomJS 最強大的功能之一是能夠通過 JavaScript 與頁面交互。這使得自動化諸如單擊按鈕和提交表單之類的任務變得極其容易。我們的下一個示例通過加載 Google 首頁、輸入查詢然後提交搜索表單來執行 Web 搜索。示例的開頭應該看起來很熟悉。新的內容從第 8 行開始，我們確定已加載哪個頁面。如果這是首頁，則調用頁面的 evaluate() 方法。 evaluate() 在頁面的上下文中執行您提供的代碼。這實際上為您提供了與頁面原始開發人員相同的權限。這有多酷？

<code class="language-javascript">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();
};</code>

在 evaluate() 內部，我們找到搜索框和表單。我們將搜索框的值設置為“JSPro”，然後提交表單。這將導致頁面的 onLoadFinished() 方法再次被觸發。但是，這次會拍攝搜索結果的屏幕截圖，然後 PhantomJS 退出。 PhantomJS 還提供兩種方法 includeJs() 和 injectJs()，它們允許您將外部腳本文件添加到頁面中。 includeJs() 用於包含頁面可訪問的任何腳本文件。例如，您可以使用以下代碼在之前的示例中包含 jQuery。請注意第 9 行對 includeJs() 的調用，以及 evaluate() 內部的 jQuery 語法。

<code class="language-javascript">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();
};</code>

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

PhantomJS 和 Node.js

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

結論

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

關於無頭 WebKit 和 PhantomJS 的常見問題

無頭 WebKit 和 PhantomJS 的主要區別是什麼？

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

PhantomJS 是否仍在維護？

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

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

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

PhantomJS 如何工作？

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

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

是的，PhantomJS 可用於 Web 抓取。它允許您使用標準 DOM API 或 jQuery 等常用庫來加載和操作網頁。

如何安裝 PhantomJS？

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

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

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

我可以使用無頭 WebKit 進行自動化測試嗎？

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

如何安裝無頭 WebKit？

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

與傳統的自動化瀏覽器相比，使用無頭 WebKit 的優勢是什麼？

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

以上是無頭Webkit和Phantomjs的詳細內容。更多資訊請關注PHP中文網其他相關文章！