當你興高采烈地寫完你的第一個 n8n Puppeteer 腳本，準備讓它大展身手時，卻可能遭遇到最令人沮喪的情況：這個爬蟲時而成功，時而失敗。
你可能會看到 Error: Node is either not visible or not an HTMLElement 這樣的錯誤訊息，但你重跑一次，它又神奇地成功了。這種難以捉摸、無法穩定重現的「薛丁格的 Bug」，正是無數 Puppeteer 新手最大的惡夢。而這背後的罪魁禍首，幾乎都指向同一個原因：你沒有掌握「等待的藝術」。
在n8n Puppeteer 實戰終極指南 中，我們學會了如何模擬互動。但一個專業的瀏覽器自動化腳本，不僅要會「行動」，更要懂得「等待」。因為你的 n8n 腳本執行速度，與現代網頁透過 JavaScript 動態載入內容的速度之間，永遠存在一場競賽。
這篇文章將是你深入 Puppeteer 等待機制的專業教學。我們將帶你理解為何「固定延遲」是個壞主意，並深入解析 waitForSelector 等三大事件驅動的等待指令。學會這些技巧，你將能夠告別那些時好時壞、不穩定的爬蟲，打造出真正專業、可靠、能在任何網路環境下穩定運作的自動化腳本。
為什麼我的 Puppeteer 爬蟲時好時壞？認識「競爭條件 (Race Condition)」
要理解等待的重要性，你必須先認識「競爭條件 (Race Condition)」這個概念。
想像一個簡單的場景：
- 你的腳本命令瀏覽器前往一個商品頁面。
- 緊接著，下一行指令是「點擊『加入購物車』按鈕」。
問題在於，當 page.goto() 指令完成時，它只代表網頁的 HTML 骨架已經下載完畢。但頁面上的「加入購物車」按鈕，很可能是由後續的 JavaScript 動態生成或啟用的。你的 Puppeteer 腳本執行速度是微秒級的，而 JavaScript 的載入與執行，可能需要數百毫秒甚至數秒。
於是，一場競賽開始了：
- 你的腳本（賽跑者 A）： 以極快的速度往下跑，準備執行「點擊」指令。
- 網頁的 JavaScript（賽跑者 B）： 正在努力地載入、渲染，準備把「加入購物車」按鈕放到頁面上。
如果你的腳本先跑到終點，而按鈕還沒被放到頁面上，就會發生「找不到元素 (Node not found)」的錯誤。這就是競爭條件。而由於網路速度、伺服器響應時間等變數，有時候 JavaScript 跑得快一點，你的腳本就成功了；有時候你的腳本跑得快一點，就失敗了。這就是爬蟲「時好時壞」的根本原因。
錯誤的等待方式：為何 waitForTimeout (固定延遲) 是個壞主意？
許多新手遇到這個問題時，第一個想到的解決方案，就是加入一個固定的延遲：
JavaScript
// 前往頁面
await page.goto('https://example.com');
// 等個 3 秒，想說頁面應該載入完成了吧？ (錯誤示範！)
await page.waitForTimeout(3000);
// 再去點擊按鈕
await page.click('#add-to-cart-button');
page.waitForTimeout(毫秒)，也就是俗稱的 sleep 或「死等」，在自動化腳本中是一個極力應該避免的「反模式 (Anti-Pattern)」。
為什麼它不好？
- 不可靠 (Unreliable): 你如何確定 3 秒鐘就足夠？在網路狀況不佳時，頁面可能需要 5 秒才能載入，你的腳本依然會失敗。
- 效率低下 (Inefficient): 如果頁面其實只花了 0.5 秒就載入完成了，你的腳本卻依然在原地「乾等」了 2.5 秒。當你需要處理上百個頁面時，這些無謂的等待時間會被急遽放大，嚴重拖慢你的整體效率。
一個專業的腳本，不應該基於「猜測」來等待，而應該基於「事實」——也就是頁面上實際發生的「事件」。
專業的等待策略：三大「事件驅動」Wait 指令詳解
專業的等待方式，是告訴 Puppeteer：「請你一直等到『某個條件』滿足後，再繼續往下執行。」這就是事件驅動的等待。
1. page.waitForSelector(selector, [options]) – 最核心的等待指令
這是你最常用、也最重要的等待指令。它的意思是：「等到頁面上出現符合指定 CSS Selector 的元素後，再繼續。」
- 用途： 在進行任何
click,type或evaluate操作前，用它來確保目標元素已經被 JavaScript 渲染出來。 - 範例：JavaScript
await page.goto('https://example.com/login'); // 等待，直到 ID 為 'username-input' 的輸入框出現在頁面上 await page.waitForSelector('#username-input'); // 現在我們可以 100% 確定輸入框存在，再進行輸入操作 await page.type('#username-input', 'my_user'); - 常用選項 (
options):timeout: 超時時間（預設 30 秒）。如果超過這個時間元素還沒出現，就會拋出錯誤。visible: true: 不僅要存在於 HTML 中，還必須是可見的（沒有被display: none等樣式隱藏）。
2. page.waitForNavigation([options]) – 等待頁面跳轉
當你點擊一個連結或提交一個表單後，瀏覽器會開始載入一個新的頁面。這個指令就是用來「等待這個跳轉過程完全結束」。
- 用途： 緊跟在
page.click()或觸發頁面跳轉的操作之後。 - 範例（與
Promise.all結合是最佳實踐）：JavaScript// 使用 Promise.all 來同時觸發點擊和開始等待 await Promise.all([ page.click('button[type="submit"]'), // 觸發跳轉的動作 page.waitForNavigation(), // 等待跳轉完成 ]); // 當這行程式碼執行時，可以保證新頁面已經載入完畢
3. page.waitForFunction(js_function, [options]) – 等待任意自訂條件
這是最高級的等待方式。它允許你傳入一個 JavaScript 函式，Puppeteer 會在瀏覽器中反覆執行這個函式，直到它回傳 true 為止。
- 用途： 當你需要等待的條件，無法單純用一個 CSS Selector 來描述時。例如，等待某個元素的文字內容變為「載入完成」，或是等待頁面上的計數器數字大於 10。
- 範例： 等待一個 ID 為
status-text的元素的文字，從「處理中…」變為「處理完成」。JavaScriptawait page.waitForFunction( () => document.querySelector('#status-text').textContent === '處理完成' );
實戰演練：打造一個「永不失敗」的自動化登入腳本
讓我們結合上述指令，建立一個極度穩定的自動化登入流程。
流程設計： Start -> Browserless (Run Custom Function)
Browserless 節點的 Run Custom Function 程式碼：
JavaScript
// page 是 n8n 傳入的 Puppeteer 頁面物件
// 1. 前往登入頁
await page.goto('https://example.com/login');
// 2.【等待】使用者名稱輸入框出現
await page.waitForSelector('input[name="username"]', { visible: true });
await page.type('input[name="username"]', 'my_user');
// 3.【等待】密碼輸入框出現
await page.waitForSelector('input[name="password"]', { visible: true });
await page.type('input[name="password"]', 'my_secret_password');
// 4.【等待】登入按鈕可被點擊，並在點擊後【等待】頁面跳轉
await page.waitForSelector('button[type="submit"]', { visible: true });
await Promise.all([
page.click('button[type="submit"]'),
page.waitForNavigation(),
]);
// 5.【等待】登入後頁面中的使用者頭像出現，確認登入成功
await page.waitForSelector('.user-avatar', { visible: true });
// 6. 回傳登入成功後的頁面 HTML
return {
html: await page.content()
};
這個腳本中的每一步行動前，都有一個對應的「等待」，確保了它的執行節奏與網頁的載入狀態完全同步，從而實現了最大的穩定性。
結語
在 Puppeteer 的世界裡，「等待」並非浪費時間，而是一種確保精準與可靠的智慧。一個充滿了 waitForTimeout 的腳本，或許能在你的高速網路下偶然成功，但一個精心佈局了 waitForSelector 和 waitForNavigation 的腳本，才能在任何不可預測的真實網路環境中，都表現得像一位沉著冷靜的專業人士。
告別那些讓你抓狂的隨機性錯誤吧！從今天起，將「先等待、再行動」的原則，融入到你的每一個 Puppeteer 自動化流程中。這將是你從「能寫出爬蟲」的業餘玩家，蛻變為「能寫出穩定可靠的自動化系統」的專業開發者的關鍵一步。
更多精選文章請參考
n8n 與 Zapier 比較：該選哪個？2025年最完整功能、費用、優缺點分析
開源自動化工具推薦：從工作流程到測試，找到最適合你的免費方案
n8n 發送 Email 超詳細教學：從 SMTP 設定到 Gmail 節點串接，一篇搞定！
n8n Notion 串接終極指南：2025 年打造自動化工作流程，效率翻倍！
