你是否在使用 n8n 進行網頁爬蟲時，遇到過這樣一堵讓你無法前進的「牆」？你已經完美地設定了 Browserless 節點來處理 JavaScript 動態渲染的網站，你的爬蟲成功地載入了頁面，但就在你準備用 HTML Extract 節點大展身手時，卻發現你想抓取的主要內容，被一個碩大無朋的「Cookie 同意」視窗或橫幅，遮得嚴嚴實實。
這個基於 GDPR 等隱私法規而生的 Cookie 同意視窗，已經成為現代網站的標準配備，同時也成為了自動化爬蟲最常見、也最惱人的攔路虎。如果無法像真人一樣，先點擊那個「接受全部 (Accept All)」、「同意」或「OK」的按鈕，你的爬蟲就永遠只能在門外徘徊，望著被遮擋的數據興嘆。
幸運的是，這堵牆並非無法逾越。透過 n8n 結合 Puppeteer 的瀏覽器自動化能力，我們就能夠賦予爬蟲一雙「無形的手」，讓它在抓取資料前，先模擬真人，優雅地點掉這個煩人的視窗。
這篇文章將是你的 n8n 爬蟲必修課。我們將深入探討 Cookie 視窗的運作原理，並手把手教你如何偵查按鈕、撰寫 Puppeteer 腳本，最終在 n8n 中實現自動化點擊，讓你能夠暢行無阻地抓取任何被遮擋的網頁內容。
為什麼 Cookie 同意視窗是爬蟲的天敵？
Cookie 同意視窗（或稱為 Cookie Banner）之所以是爬蟲的天敵，主要有兩個原因：
- 內容遮擋 (Content Obscuring): 大多數 Cookie 視窗會以一個高
z-index的浮動圖層 (Overlay) 形式，覆蓋在整個網頁之上。這意味著，即使你想抓取的主要內容（例如文章內文、商品價格）在技術上已經被載入到 HTML 中，但它們可能因為被遮擋而無法被某些爬蟲工具正確地「看到」或互動。 - 互動攔截 (Interaction Blocking): 更致命的是，這個浮動圖層會攔截所有的滑鼠點擊事件。如果你需要執行的下一步操作是「點擊登入按鈕」或「點擊載入更多」，但這個 Cookie 視窗還擋在前面，那麼你的
page.click()指令將會失敗，因為它實際上點擊到的是那個透明的遮罩層，而不是你真正的目標按鈕。
不處理掉這個視窗，你的爬蟲就寸步難行。
你的武器庫：使用 Puppeteer (透過 Browserless) 模擬真人點擊
要解決這個需要「互動」才能解決的問題，我們需要動用瀏覽器自動化利器——Puppeteer。在 n8n 中，執行 Puppeteer 腳本最方便的方式，就是使用 Browserless 節點的 Run Custom Function 操作模式。
這個模式提供了一個沙盒環境，讓你可以在其中撰寫 JavaScript 程式碼，來命令一個在雲端運行的真實 Chrome 瀏覽器，執行一系列的真人操作，其中就包括了我們最需要的「點擊按鈕」。
偵查階段：如何精準定位「接受」按鈕的 CSS Selector？
在我們能命令 Puppeteer 點擊之前，我們必須先給它一個精準的目標。你需要像一位偵探一樣，找出那個「接受」按鈕在 HTML 中的唯一識別碼，也就是它的 CSS Selector。
偵查步驟：
- 用你的 Chrome 瀏覽器，打開目標網站。
- 當 Cookie 同意視窗出現時，在「接受」按鈕上點擊滑鼠右鍵。
- 在彈出的選單中，選擇「檢查 (Inspect)」。
- 你的開發者工具 (DevTools) 會自動打開，並高亮顯示出這個按鈕對應的 HTML 程式碼。
- 仔細觀察這段程式碼，尋找可以用來定位它的「線索」。優先順序如下：
id屬性： 這是最理想的線索，因為它通常是頁面中獨一無二的。例如<button id="cookie-accept-btn">，它的 Selector 就是#cookie-accept-btn。- 獨特的
class屬性： 如果沒有 id，尋找一個看起來比較獨特的 class 名稱。例如<button class="btn btn-primary cookie-consent-button">，它的 Selector 可以是.cookie-consent-button。 - 其他屬性： 有時按鈕會有
data-testid或data-action這類自訂屬性，也可以用來定位。例如<button data-action="accept-all">，Selector 就是[data-action="accept-all"]。 - 文字內容： 如果以上都沒有，你還可以用按鈕上的文字來定位，但這是最後的手段。
記下你找到的最精準、最穩定的那個 CSS Selector，這就是我們等一下要交給 Puppeteer 的「目標座標」。
實戰腳本：n8n Puppeteer 自動點擊 Cookie 按鈕的完整程式碼
現在，讓我們來撰寫核心的 Puppeteer 腳本。
目標： 前往一個有 Cookie 視窗的網站，等待並點擊「接受」按鈕，然後回傳清理乾淨後的頁面 HTML。
在 Browserless 節點的 Run Custom Function 中，貼上以下程式碼：
JavaScript
// page 是 n8n 傳入的 Puppeteer 頁面物件
// context 包含額外資訊，例如上游節點傳來的 url
const url = context.json.url;
// 1. 前往目標網址
await page.goto(url, {
waitUntil: 'domcontentloaded' // 等待 HTML 骨架載入完成即可
});
// 2. 定義 Cookie 按鈕的 CSS Selector
const cookieButtonSelector = '#cookie-accept-btn'; // <--- 請換成你偵查到的 Selector
try {
// 3.【等待】按鈕出現在頁面上，最長等待 10 秒
await page.waitForSelector(cookieButtonSelector, { timeout: 10000 });
// 4.【點擊】按鈕
await page.click(cookieButtonSelector);
console.log('Successfully clicked the cookie consent button.');
// 5. 點擊後，可以稍微等待一下，確保遮罩層的消失動畫已完成
await page.waitForTimeout(1000); // 等待 1 秒
} catch (error) {
// 如果 10 秒內都沒找到按鈕（可能該頁面沒有 Cookie 視窗），
// 我們不讓流程失敗，而是印出一個日誌，然後繼續執行。
console.log('Cookie consent button not found or timed out. Proceeding anyway.');
}
// 6. 回傳最終的頁面 HTML，供後續節點使用
const finalHtml = await page.content();
return {
html: finalHtml
};
腳本解析：
try...catch區塊： 這是讓腳本更穩健的關鍵。我們將尋找並點擊按鈕的邏輯，包在try區塊中。如果waitForSelector因為超時而失敗（代表這個頁面可能根本沒有 Cookie 視窗），catch區塊會捕捉到這個錯誤，讓腳本可以繼續往下執行，而不會導致整個 n8n 工作流中斷。waitForSelector： 我們不再使用不穩定的固定延遲waitForTimeout，而是用這個指令，精準地等待按鈕被渲染出來。page.content()： 在所有互動完成後，用這個指令來獲取「最終版」的 HTML。
完整流程演練：從點擊到成功抓取主要內容
流程設計： Start -> Set (設定目標) -> Browserless (點擊 Cookie) -> HTML Extract
Set節點: 建立一個url欄位，值為目標網址。Browserless節點:- Operation:
Run Custom Function - 將上面的實戰腳本貼入程式碼編輯器。
- Context > JSON (Expression):
{{ JSON.stringify($json) }}(將上游節點的資料傳入 context，讓腳本能透過context.json.url取得網址)。
- Operation:
HTML Extract節點:- 將
Browserless節點的 html 輸出端，連接到此節點。 - Source Data:
From Previous Node's 'html' Field。 - 現在，你可以安心地設定你要抓取的主要內容的 CSS Selector，因為 Cookie 視窗已經被成功點掉了！
- 將
進階挑戰：當按鈕藏在 iFrame 或 Shadow DOM 中怎麼辦？
在極少數情況下，你會遇到更棘手的 Cookie 視窗，它們被封裝在 <iframe> 或 Shadow DOM 這類特殊的網頁結構中。
- iFrame: 你需要先找到 iFrame 的 Selector，然後用
page.frames()找到對應的 frame 物件，再從這個 frame 物件中去尋找並點擊按鈕。 - Shadow DOM: Puppeteer 的
waitForSelector和click對 Shadow DOM 無效。你需要使用更深層的pierce/選擇器，或是page.evaluate()搭配element.shadowRoot.querySelector()來處理。
這些是更為進階的主題，但原理是相通的：找到它，然後操作它。
結語
Cookie 同意視窗，是你從靜態爬蟲邁向動態互動式爬蟲的第一個、也是最常見的挑戰。透過 n8n 整合 Puppeteer，你學會了如何像真人一樣，在執行主要任務前，先優雅地處理掉這些「前置障礙」。
掌握了「等待特定元素出現 (waitForSelector) -> 點擊 (click)」這個核心模式，你不僅能處理 Cookie 視窗，更能應對任何需要點擊才能載入內容的網頁，例如分頁切換、下拉式選單、折疊面板等。這項技巧，將為你的 n8n 自動化爬蟲，打開一扇通往更廣闊、更複雜網路世界的大門。
更多精選文章請參考
n8n 與 Zapier 比較：該選哪個？2025年最完整功能、費用、優缺點分析
開源自動化工具推薦：從工作流程到測試，找到最適合你的免費方案
n8n 發送 Email 超詳細教學：從 SMTP 設定到 Gmail 節點串接，一篇搞定！
n8n Notion 串接終極指南：2025 年打造自動化工作流程，效率翻倍！
