快速提示：從node.js開始使用無頭鉻

無頭Chrome：自動化Web測試和抓取的強大工具

核心要點

• 從Chrome 59版本（Windows用戶為60版本）開始，無頭Chrome允許您以編程方式模擬用戶與網站的交互，並捕獲結果用於測試。它使用Chromium和Blink引擎，模擬Chrome中的用戶體驗。
• 在Node.js中運行無頭Chrome需要chrome-remote-interface模塊（用於簡化命令和通知的抽象）和chrome-launcher模塊（用於跨多個平台從Node.js中啟動Chrome）。
• 初始化會話並定義測試域後，您可以導航網站、複製用戶旅程並捕獲結果。您還可以使用captureScreenshot函數在導航網站時捕獲頁面截圖。
• 雖然無頭Chrome並未完全集成到Selenium等工具中，但由於其渲染JavaScript的能力，它是以完全自動化方式重現用戶體驗的最佳方式，非常適合大規模的自動化Web抓取任務。

在我們的工作中，經常需要反复複製用戶旅程，以確保在更改網站時頁面提供一致的體驗。實現這一目標的關鍵是允許我們編寫這些測試腳本的庫，以便我們可以對它們運行斷言並維護結果文檔。這就是無頭瀏覽器的作用：命令行工具，使您可以以編程方式模擬用戶與網站的交互，並捕獲結果用於測試。

多年來，許多人一直在使用PhantomJS、CasperJS和其他工具來完成這項工作。但是，正如愛情一樣，我們的心可能會轉移到其他地方。從Chrome 59版本（Windows用戶為60版本）開始，Chrome自帶了它自己的無頭瀏覽器。雖然它目前不支持Selenium，但它使用Chromium和Blink引擎，也就是說，它模擬了在Chrome中的實際用戶體驗。

本文的代碼可以在我們的GitHub倉庫中找到。

從命令行運行無頭Chrome

從命令行運行無頭Chrome相對容易。在Mac上，您可以為Chrome設置別名，並使用--headless命令行參數運行：

<code class="language-bash">alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/</code>

在Linux上，它甚至更容易：

<code class="language-bash">google-chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/</code>

• --headless：無需UI或顯示服務器依賴項運行
• --disable-gpu：禁用GPU硬件加速。目前暫時需要此參數。
• --remote-debugging-port：在指定的端口上啟用通過HTTP進行的遠程調試。

您還可以與請求的頁面交互，例如，要將document.body.innerHTML打印到標準輸出，您可以執行以下操作：

<code class="language-bash">google-chrome --headless --disable-gpu --dump-dom http://endless.horse/</code>

如果您好奇還有什麼可能性，可以在這裡找到完整的參數列表。

在Node.js中運行無頭Chrome

然而，本文的重點不是命令行，而是如何在Node.js中運行無頭Chrome。為此，我們需要以下模塊：

• chrome-remote-interface：JavaScript API提供命令和通知的簡單抽象。
• chrome-launcher：允許我們在多個平台上的Node.js中啟動Chrome。

然後我們可以設置我們的環境。這假設您的機器上已安裝Node.js和npm。如果不是這種情況，請查看我們的教程。

<code class="language-bash">alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/</code>

之後，我們要使用headless-chrome實例化一個會話。讓我們從在項目文件夾中創建一個index.js文件開始：

<code class="language-bash">google-chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/</code>

首先，我們正在引入依賴項，然後創建一個自調用函數，該函數將實例化Chrome會話。請注意，在撰寫本文時需要--disable-gpu標誌，但在您閱讀本文時可能不需要，因為它只是一個解決方法（正如Google推薦的那樣）。我們將使用async/await來確保我們的應用程序在執行後續步驟之前等待無頭瀏覽器啟動。

接下來，我們需要公開測試所需的域：

<code class="language-bash">google-chrome --headless --disable-gpu --dump-dom http://endless.horse/</code>

這裡最重要的Page對象——我們將使用它來訪問呈現到UI的內容。這將也是我們指定導航位置、交互元素以及運行腳本的位置。

探索Page

初始化會話並定義域後，我們可以開始導航網站。我們要選擇一個起點，因此我們使用上面啟用的Page域進行導航：

<code class="language-bash">mkdir headless
cd headless
npm init -y
npm install chrome-remote-interface --save
npm install chrome-launcher --save</code>

這將加載頁面。然後，我們可以使用loadEventFired方法定義要運行應用程序的步驟，以執行代碼來複製我們的用戶旅程。在這個例子中，我們只是獲取第一段的內容：

<code class="language-javascript">const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');

(async function() {
  async function launchChrome() {
    return await chromeLauncher.launch({
      chromeFlags: [
        '--disable-gpu',
        '--headless'
      ]
    });
  }
  const chrome = await launchChrome();
  const protocol = await CDP({
    port: chrome.port
  });

  // 所有后续代码片段都位于此处

})();</code>

如果您使用node index.js運行腳本，您應該會看到類似於以下輸出的結果：

更進一步——抓取截圖

這很好，但我們可以同樣輕鬆地將任何代碼替換為script1值，以使用查詢選擇器點擊鏈接、填寫表單字段和運行一系列交互。每個步驟都可以存儲在JSON配置文件中，並加載到您的Node.js腳本中以順序執行。可以使用Mocha等測試平台驗證這些腳本的結果，允許您交叉引用捕獲的值是否滿足UI/UX要求。

作為測試腳本的補充，您可能希望在導航網站時捕獲頁面的截圖。幸運的是，提供的域具有一個captureScreenshot函數，它可以準確地做到這一點。

<code class="language-javascript">const {
  DOM,
  Page,
  Emulation,
  Runtime
} = protocol;
await Promise.all([Page.enable(), Runtime.enable(), DOM.enable()]);</code>

fromSurface標誌是另一個在撰寫本文時需要進行跨平台支持的標誌，在未來的迭代中可能不需要。

使用node index.js運行腳本，您應該會看到類似於以下輸出的結果：

結論

如果您正在編寫自動化腳本，您現在應該開始使用Chrome的無頭瀏覽器。雖然它仍然沒有完全集成到Selenium等工具中，但模擬Chrome渲染引擎的好處不容低估。這是以完全自動化方式重現用戶體驗的最佳方式。

我將為您提供一些進一步閱讀的資料：

• API文檔：https://www.php.cn/link/fc56459a18776e2a100854c16a1fd78b
• 無頭Chrome入門：https://www.php.cn/link/ada77e9fac537039c9adb2787b9af7da

請在下面的評論中告訴我您使用無頭Chrome的經驗。

(此處省略了FAQs部分，因為與原文重複，且篇幅過長。可以根據需要選擇性保留或重新組織FAQs內容。)

以上是快速提示：從node.js開始使用無頭鉻的詳細內容。更多資訊請關注PHP中文網其他相關文章！