n8n 動態網站爬蟲終極指南：整合 Browserless，解決 JavaScript 渲染的抓取難題

在上一篇關於靜態與動態網站爬蟲差異的教學中，我們學到了爬取動態網站 (SPA) 的王道，是找出其背後隱藏的資料 API。但如果你遇到了更頑固的對手呢？

當「API 偵探」之路走到盡頭時，我們就需要請出 n8n 動態網站爬蟲的終極秘密武器——無頭瀏覽器 (Headless Browser) 服務，而 Browserless.io 正是這個領域的佼佼者。

這篇文章將是你的 n8n 整合 Browserless 的完整實戰指南。我們將帶你深入理解無頭瀏覽器的運作原理，手把手教你如何將 n8n 與 Browserless 服務對接，並透過實戰案例，解決那些傳統 HTTP Request 節點無法應對的 JavaScript 渲染抓取難題。

內容目錄

當「API 偵探」之路行不通：為什麼你需要無頭瀏覽器 (Headless Browser)？

讓我們快速回顧一下動態網站的問題根源：n8n 基礎的

HTTP Request 節點，就像一個不會使用瀏覽器的機器人，它只會從伺服器取回一個包含 HTML 骨架和一堆 JavaScript 程式碼的「空餐盤」，而無法執行 JavaScript 來動態載入真正的數據。

當我們無法輕易地找到並直接呼叫那些載入數據的 API 時，我們就需要一個更強大的工具，一個能夠完整模擬真人瀏覽行為的機器人。這，就是「無頭瀏覽器」的核心價值。

什麼是無頭瀏覽器？ 你可以把它想像成一個在伺服器背景運行的、沒有圖形介面的、可被程式控制的真實 Chrome 瀏覽器。

它的運作流程是：

接收指令： n8n 告訴它：「請幫我打開這個網址。」
完整渲染： 無頭瀏覽器會像你的 Chrome 一樣，載入 HTML、下載 CSS、並完整地執行所有的 JavaScript 程式碼。它會耐心等待所有 API 呼叫完成，所有數據都被動態地填入頁面。
回傳結果： 當頁面完全渲染成你眼中看到的「最終樣貌」後，無頭瀏覽器再將這份包含所有動態數據的完整 HTML，回傳給 n8n。

透過這個過程，n8n 就能夠抓取到任何最頑固的動態網站內容。

Browserless.io 是一個將無頭瀏覽器「服務化」的平台，它免去了你自己維護 Chrome 伺服器叢集的複雜性。n8n 官方也為其打造了專屬的整合節點。

你可以透過兩種方式使用 Browserless：

Cloud (雲端版): 直接註冊 Browserless.io 的帳號，他們會提供給你一組 API Key。你可以在他們的雲端伺服器上，執行你的爬蟲任務。這種方式最簡單，有免費的試用額度，超出則需付費。
Self-Hosted (自架設版): Browserless 也提供了 Docker Image，讓你可以將整套服務部署在自己的伺服器上，實現私有化、不受限制的無頭瀏覽器服務。

對於大多數使用者來說，從雲端版的免費額度開始，是最快的入門方式。

註冊 Browserless.io 帳號： 前往 Browserless.io 官網，註冊一個免費帳號。
取得 API Key: 登入後，在你的儀表板 (Dashboard) 上，你會清楚地看到一組 API token。將這組金鑰複製下來。
在 n8n 中建立憑證：
- 在 n8n 中新增一個 Browserless 節點。
- 在 Credential 欄位點擊「Create New」。
- Authentication: 選擇 Header Auth。
- Name: X-API-KEY
- Value: 貼上你剛剛複製的 Browserless API token。
- 重要： 在 Options 中，點擊 Add Option。
  - Name: baseURL
  - Value: https://chrome.browserless.io
- 儲存憑證。

n8n 的 Browserless 節點提供了多種強大的操作模式。

Get Content (獲取內容): 這是最核心的爬蟲功能。它會返回指定 URL 經過完整 JavaScript 渲染後的 HTML 內容。你可以將其輸出，直接連接到 HTML Extract 節點進行後續的資料提取。
Take Screenshot (螢幕截圖): 一個非常實用的功能，可以對指定網頁進行截圖，並回傳圖片的二進制資料。你可以設定截取整個頁面 (Full Page) 或只有可視範圍。
Run Custom Function (執行自訂函式): 對於進階使用者，這個模式允許你直接在 Browserless 的瀏覽器環境中，執行你自己的 Puppeteer 程式碼，實現更複雜的互動，例如模擬點擊按鈕、填寫表單等。
Resolve a Puppeteer method (解析 Puppeteer 方法): 這是一個簡化的自訂函式模式，讓你無需撰寫完整函式，就能呼叫 Puppeteer 的特定方法。

讓我們來解決上一篇文章中提到的那個「抓不到價格」的經典問題。

目標： 爬取一個使用 JavaScript 動態載入價格的電商商品頁面。
流程設計： Start -> Browserless (Get Content) -> HTML Extract -> Set (Clean Data)

Start 節點: 手動觸發，並用一個 Set 節點設定 url 變數為目標商品頁網址。
Browserless 節點:
- Credential: 選擇你設定好的 Browserless 憑證。
- Operation: Get Content。
- URL (Expression): {{ $json.url }}。
- Options > Add Option > Wait For: 這是一個非常重要的選項！有時候頁面上的特定元素（例如價格）是延遲載入的。你可以在這裡填入該元素的 CSS Selector，例如 .price-tag。Browserless 會一直等到這個元素出現在頁面上，才回傳 HTML，確保你不會抓到不完整的內容。
HTML Extract 節點:
- 將 Browserless 節點的 HTML 輸出端，連接到此節點。
- Source Data: From Previous Node's 'HTML' Field。
- Extraction Values:
  - Key: price
  - CSS Selector: .price-tag
  - Return Value: Text
Set 節點:
- 對抓取到的價格文字，進行我們在資料清洗教學中學到的技巧，例如去除貨幣符號和空白。

執行這個流程，你就會發現，之前 HTTP Request 節點完全抓不到的價格，現在已經被 Browserless 節點完美地渲染出來，並被 HTML Extract 成功捕獲了！

Browserless 節點設定：

Browserless 會輸出一筆二進制資料，你可以直接將其連接到 Google Drive 節點的 Binary Data 輸入端，並動態設定檔案名稱。

何時使用： 只有在你確定「尋找 API」的方法行不通，或你需要進行網頁截圖時，才動用 Browserless。因為它的執行速度較慢，且雲端服務有成本考量。
善用 Wait For： 對於載入緩慢的動態網站，設定 Wait For 或 Wait for Timeout 是確保抓取成功的關鍵。
注意資源消耗： 如果你自架設 Browserless，請注意它對 CPU 和記憶體的消耗較大。