Puppeteer 網頁爬蟲：逐步教學指南

如果您曾經試著從會隨著捲動載入內容、把價格藏在登入後，或是每隔一兩週就改版的網站抓資料，您一定懂那種痛。靜態爬蟲早就不夠用了。事實上，超過 現在依賴網頁爬蟲來取得替代數據，而 也會自動化監控競爭對手價格。但關鍵在這裡：這些資料有很大一部分都存在於動態網站中，由 JavaScript 載入，還被使用者互動所包住。這正是無頭瀏覽器自動化——以及像 Puppeteer 這類工具——派上用場的地方。

我花了好幾年在打造自動化與 AI 工具（沒錯，也替銷售與營運團隊抓過不少網站資料），親身見證了 Puppeteer 如何解鎖傳統爬蟲抓不到的資料。但我也看過，對商務使用者來說，程式開發成本往往成了最大阻礙。所以在這篇指南裡，我會帶您完整了解什麼是 Puppeteer 爬蟲、如何用它進行網頁爬蟲，以及什麼時候您可能會想選擇更簡單的方案——像是 ，我們這款 AI 驅動、免程式碼的網頁爬蟲。

什麼是 Puppeteer 爬蟲？快速總覽

先從基礎開始。 是 Google 推出的開源 Node.js 函式庫，可讓您用 JavaScript 控制無頭的 Chrome 或 Chromium 瀏覽器。白話一點說：它就像一個機器人，能打開網頁、點按按鈕、填寫表單、捲動頁面，最重要的是——擷取資料，而且整個過程不會在您的螢幕上顯示任何畫面。

Puppeteer 為什麼特別？

• 它可以渲染動態內容——也就是會像真人一樣等待 JavaScript 載入完成。
• 它可以模擬使用者操作：點擊、輸入、捲動，甚至處理彈出視窗。
• 對於資料只有在互動後才出現的網站，它特別適合，例如電商列表、社群動態或儀表板。

它和其他工具相比如何？

• Selenium：瀏覽器自動化界的老牌工具。支援多種瀏覽器與語言，但體積較大，也比較傳統。很適合跨瀏覽器測試，不過在 Chrome／Node.js 專案裡，Puppeteer 往往更俐落。
• Thunderbit：這就是我最興奮的部分。Thunderbit 是一款免程式碼、AI 驅動的網頁爬蟲，直接在瀏覽器裡運作。您不用寫腳本，只要點一下「AI 建議欄位」，讓 AI 幫您判斷要抓什麼就好。對想要成果、但不想寫程式的商務使用者來說，它非常合適（這部分後面會再細談）。

簡單來說：Puppeteer＝最高控制度（如果您會寫程式）。Thunderbit＝最高便利性（如果您不想寫程式）。

為什麼 Puppeteer 網頁爬蟲對商務使用者很重要

說真的：網頁爬蟲早就不只是駭客或資料科學家的工具了。業務、營運、行銷，甚至房地產團隊，都在使用網頁資料搶得先機。而且當這麼多攸關業務的資訊都被鎖在動態網站裡時，Puppeteer 往往就是打開它的關鍵。

以下是一些實際應用情境：

別忘了： 一週有四分之一的時間都花在資料蒐集這類重複性工作上。用網頁爬蟲把這件事自動化，不只是「加分項」——而是競爭優勢。

開始上手：設定您的 Puppeteer 爬蟲

準備動手了嗎？以下是在 10 分鐘內讓 Puppeteer 跑起來的方法（前提是您對一點 JavaScript 不會太陌生）：

1. 安裝 Node.js
Puppeteer 需要在 Node.js 上執行。請到 下載最新的 LTS 版本。

2. 建立新的專案資料夾
打開終端機並執行：

1mkdir puppeteer-scraper-demo
2cd puppeteer-scraper-demo
3npm init -y

3. 安裝 Puppeteer

1npm install puppeteer

這也會順便下載相容版本的 Chromium（大約 100MB）。

4. 建立第一支腳本
建立一個名為 scrape.js 的檔案：

1const puppeteer = require('puppeteer');
2(async () => {
3  const browser = await puppeteer.launch();
4  const page = await browser.newPage();
5  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
6  const title = await page.title();
7  console.log('頁面標題：', title);
8  await browser.close();
9})();

執行方式如下：

1node scrape.js

如果您看到「頁面標題：Example Domain」，恭喜您——您已經把 Chrome 自動化了！

建立您的第一個 Puppeteer 網頁爬蟲腳本

來點實作。假設您想從 （一個供爬蟲練習使用的示範網站）抓取名言。

步驟 1：前往頁面

1await page.goto('http://quotes.toscrape.com', { waitUntil: 'networkidle0' });

步驟 2：擷取資料

1const quotes = await page.evaluate(() => {
2  return Array.from(document.querySelectorAll('.quote')).map(node => ({
3    text: node.querySelector('.text')?.innerText.trim(),
4    author: node.querySelector('.author')?.innerText.trim(),
5    tags: Array.from(node.querySelectorAll('.tag')).map(tag => tag.innerText.trim())
6  }));
7});
8console.log(quotes);

步驟 3：處理分頁

1let hasNext = true;
2let allQuotes = [];
3while (hasNext) {
4  // 依照上面方式擷取 quotes
5  const quotes = await page.evaluate(/* ... */);
6  allQuotes.push(...quotes);
7  const nextButton = await page.$('li.next > a');
8  if (nextButton) {
9    await Promise.all([
10      page.click('li.next > a'),
11      page.waitForNavigation({ waitUntil: 'networkidle0' })
12    ]);
13  } else {
14    hasNext = false;
15  }
16}

步驟 4：儲存成 JSON

1const fs = require('fs');
2fs.writeFileSync('quotes.json', JSON.stringify(allQuotes, null, 2));

這樣一來，您就有了一個基本的 Puppeteer 爬蟲，可以瀏覽、擷取、分頁，並儲存資料。

進階 Puppeteer 爬蟲技巧：處理動態內容

大多數真實世界的網站都不像靜態清單那麼簡單。以下教您如何處理比較棘手的情況：

1. 等待動態元素

1await page.waitForSelector('.product-list-item');

這能確保您要的內容載入完成後，再進行擷取。

2. 模擬使用者操作

• 點擊按鈕： await page.click('#load-more');
• 在欄位中輸入： await page.type('#search', 'laptop');
• 為無限捲動而捲動：

  1// 注意：page.waitForTimeout 已在 Puppeteer v22 移除，請改用一般 promise。
  2const sleep = (ms) => new Promise(r => setTimeout(r, ms));
  3let previousHeight = await page.evaluate('document.body.scrollHeight');
  4while (true) {
  5  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  6  await sleep(1500);
  7  const newHeight = await page.evaluate('document.body.scrollHeight');
  8  if (newHeight === previousHeight) break;
  9  previousHeight = newHeight;
  10}

1**3. 處理登入**
2```javascript
3await page.goto('https://exampleshop.com/login');
4await page.type('#login-username', 'myusername');
5await page.type('#login-password', 'mypassword');
6await page.click('#login-button');
7await page.waitForNavigation({ waitUntil: 'networkidle0' });

4. 處理 AJAX 載入的資料 有時候資料不在 DOM 裡，而是來自 API 呼叫。您可以用以下方式攔截網路回應：

1page.on('response', async response => {
2  if (response.url().includes('/api/products')) {
3    const data = await response.json();
4    // 處理資料
5  }
6});

實戰範例：從電商網站抓取商品資料

把前面學到的內容串起來。假設您想在登入後，從一個（示範）電商網站抓取商品名稱、價格與圖片。

1const puppeteer = require('puppeteer');
2const fs = require('fs');
3(async () => {
4  const browser = await puppeteer.launch({ headless: true });
5  const page = await browser.newPage();
6  // 步驟 1：登入
7  await page.goto('https://exampleshop.com/login');
8  await page.type('#login-username', 'myusername');
9  await page.type('#login-password', 'mypassword');
10  await page.click('#login-button');
11  await page.waitForNavigation({ waitUntil: 'networkidle0' });
12  // 步驟 2：前往分類頁
13  await page.goto('https://exampleshop.com/category/laptops', { waitUntil: 'networkidle0' });
14  // 步驟 3：擷取商品
15  const products = await page.evaluate(() => {
16    return Array.from(document.querySelectorAll('.product-item')).map(item => ({
17      name: item.querySelector('.product-title')?.innerText.trim() || '',
18      price: item.querySelector('.product-price')?.innerText.trim() || '',
19      image: item.querySelector('img.product-image')?.src || ''
20    }));
21  });
22  // 步驟 4：儲存成 JSON
23  fs.writeFileSync('products.json', JSON.stringify(products, null, 2));
24  await browser.close();
25})();

這段腳本會自動完成登入、導覽、擷取與儲存。若有更進階的需求，您還可以加入分頁迴圈，甚至點進每個商品頁取得更多細節。

Thunderbit：用 AI 讓 Puppeteer 爬蟲更簡單

如果您看到這裡，心裡在想：「很不錯，但我不想每次都為了新資料集寫程式。」其實您並不孤單。這正是我們打造 的原因。

Thunderbit 有什麼不同？

• 不需要寫程式：只要安裝 ，打開要抓取的頁面，然後點「AI 建議欄位」。
• AI 驅動的欄位辨識：Thunderbit 會讀取頁面，並建議最適合擷取的欄位，例如「商品名稱」、「價格」、「圖片」等等。
• 可處理動態內容：無限捲動、彈出視窗、子頁面？Thunderbit 的 AI 都能應付，會自動點分頁，甚至逐一拜訪每個商品詳情頁來補充資料。
• 一鍵匯出：只要按一下，就能把資料直接送到 Excel、Google Sheets、Notion 或 Airtable。匯出不另外收費。
• 熱門網站範本：需要抓取 Amazon、Zillow 或 LinkedIn 嗎？Thunderbit 有即用型範本，不用額外設定。
• 雲端或瀏覽器爬取：如果是大規模任務，Thunderbit 可以在雲端同時抓取最多 50 個頁面。

我看過使用者在不到五分鐘內，從「我希望可以拿到這份資料」進展到「這是我的試算表」。最棒的是？再也不用擔心網站改版導致腳本壞掉——Thunderbit 的 AI 會即時調整。

Puppeteer vs. Thunderbit：如何選擇合適的網頁爬蟲工具

那麼，您該用哪一個？以下是我替團隊整理的比較方式：

結論：

• 如果您需要完全控制、有程式開發資源，或要把爬蟲整合進更大型的應用中，請用 Puppeteer。
• 如果您想快速拿到結果、不想寫程式，或希望讓非技術同事也能上手，請用 Thunderbit。

老實說，我看過很多團隊兩個都用：Thunderbit 拿來快速驗證與原型開發，Puppeteer 則用在深度整合或特殊情境。

逐步檢查清單：成功執行 Puppeteer 網頁爬蟲專案

以下是我自己常用、能讓 Puppeteer 抓取專案順利進行的檢查清單：

1. 定義目標：您需要哪些資料？它們在哪裡？
2. 分析網站：是動態網站嗎？需要登入嗎？有沒有反機器人機制？
3. 設定環境：Node.js、Puppeteer，以及任何輔助函式庫。
4. 先做概念驗證：先從一個頁面開始，把選擇器弄準。
5. 處理動態內容：使用 waitForSelector，必要時模擬點擊／捲動。
6. 加入分頁或迴圈：把所有頁面都抓下來，不只一頁。
7. 實作避免封鎖的策略：隨機化延遲、設定真實的 User-Agent，必要時使用代理伺服器。
8. 匯出並驗證資料：存成 JSON／CSV，檢查是否完整。
9. 最佳化與錯誤處理：加入 try/catch、記錄進度，優雅處理缺漏資料。
10. 監控與維護：網站會變動——要隨時準備更新腳本。

排錯提示：

• 如果選擇器回傳 null，請重新檢查 HTML，並確認有使用等待機制。
• 如果被封鎖，請放慢速度、輪換 IP，或使用 stealth 外掛。
• 如果腳本當掉，請檢查記憶體洩漏或未處理的例外狀況。

結論與重點整理

在以數據驅動的團隊裡，網頁爬蟲已經成為必備技能。Puppeteer 讓您即使面對最動態、最依賴 JavaScript 的網站，也能強力擷取資料——但它確實需要一些程式能力與持續維護。對想跳過寫程式、直接拿資料的商務使用者來說，Thunderbit 則提供了一個由 AI 驅動、免程式碼的替代方案，速度快、彈性高，而且出乎意料地穩定。

我的建議是這樣：

• 如果您有技術背景，而且需要深度客製化，先從 Puppeteer 開始。
• 如果您重視速度、簡單與較少的維護成本，試試 （從 開始最方便）。
• 對大多數團隊來說，兩者搭配使用就能涵蓋 99% 的網頁資料需求。

想看更多類似指南嗎？歡迎前往 ，查看教學、比較文章，以及 AI 網頁爬蟲的最新資訊。

常見問題

1. 什麼是 Puppeteer 爬蟲？為什麼它會用於網頁爬蟲？
Puppeteer 是一個 Node.js 函式庫，可讓您用 JavaScript 控制無頭 Chrome 瀏覽器。它之所以用於網頁爬蟲，是因為它能載入動態內容、模擬使用者操作，並從傳統爬蟲無法處理的網站擷取資料。

2. Puppeteer 與 Selenium、Thunderbit 相比如何？
Selenium 可支援多種瀏覽器與語言，但體積較大。Puppeteer 針對 Chrome／Node.js 做了精簡，對許多爬取任務來說更快。另一方面，Thunderbit 是免程式碼、AI 驅動的工具，讓非技術使用者只要幾個點擊就能抓資料。

3. Puppeteer 網頁爬蟲的主要商業效益是什麼？
自動化資料蒐集可以節省時間、減少錯誤，並為業務、行銷、營運等部門帶來即時洞察。應用情境從名單開發、價格監控到市場研究都有。

4. Puppeteer 爬取最大的挑戰是什麼？
主要挑戰在於處理動態內容、避開反機器人封鎖，以及在網站改版後維護腳本。您需要寫程式來管理等待、模擬互動並處理錯誤。

5. 什麼時候我該用 Thunderbit 取代 Puppeteer？
如果您想跳過寫程式、需要快速取得結果，或希望讓非技術同事也能使用，就該用 Thunderbit。它非常適合標準爬取任務、需要快速交付的專案，或是您只想把資料簡單匯出到 Excel 或 Google Sheets 的情況。

準備試試更聰明的抓取方式了嗎？ 或前往 看更多指南。祝您抓取順利！

了解更多