使用 Puppeteer 自動抓取網站資料的完整教學

在現今資料驅動的時代，網站資料的蒐集成為許多開發者和數據分析師的日常任務。Puppeteer 是一套強大的 Node.js 函式庫，可以模擬無頭（或有頭）瀏覽器自動操作網頁。本文將為您介紹如何使用 Puppeteer 自動抓取網站資料，從安裝、基本語法到實用範例，幫助您快速掌握這項技能。

什麼是 Puppeteer？

Puppeteer 是由 Google 開發的 Node.js 函式庫，它提供一個高階 API，操控無頭版的 Chromium 瀏覽器（或全功能瀏覽器）。開發者可以透過它執行各種操作，例如模擬點擊、填表單、擷圖、生成 PDF，甚至抓取網站資料。

為什麼選擇 Puppeteer 來抓取資料？

• 模擬真人使用者行為，更能處理 JavaScript 渲染的網站
• 內建等待元素載入功能，避免資料尚未渲染就擷取
• 可控制操作流程，如點擊下一頁、自動滾動頁面等
• 生成畫面截圖與 PDF，方便保存操作結果

安裝 Puppeteer

在使用 Puppeteer 前，請先確保已安裝 Node.js 和 npm。

npm install puppeteer

以上指令會自動下載 Puppeteer 以及 Chromium 瀏覽器。

基本抓取資料範例

以下是一個簡單的 Puppeteer 程式，抓取 Google 首頁的標題文字：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');

  const title = await page.title();
  console.log('頁面標題：', title);

  await browser.close();
})();

這段程式會啟動無頭瀏覽器，打開 Google 網站，取得標題文字並列印出來。

如何抓取特定資料元素？

若要抓取特定 HTML 元素的內容，可以使用 page.$eval 函數範例如下：

const result = await page.$eval('h1', element => element.textContent);
console.log('標題：', result);

你也可以搭配 querySelectorAll 抓取多筆資料：

const items = await page.$$eval('.item-class', elements => {
  return elements.map(el => el.textContent.trim());
});
console.log('項目清單：', items);

處理 JavaScript 渲染的內容

現代網站常使用 JavaScript 載入內容，通常需等待資料載入完成才能擷取。這時可以使用：

await page.waitForSelector('.article-title'); // 等待目標元素出現

自動化更多操作

Puppeteer 支援點擊按鈕、填寫表單、翻頁等功能：

await page.click('#submit-button');
await page.type('#input-field', '測試輸入');
await page.keyboard.press('Enter');

模擬使用者滑動頁面

如果網站需要滑動才能載入更多內容，可以這樣做：

await page.evaluate(async () => {
  await new Promise(resolve => {
    let totalHeight = 0;
    const distance = 100;
    const timer = setInterval(() => {
      window.scrollBy(0, distance);
      totalHeight += distance;
      if (totalHeight >= document.body.scrollHeight) {
        clearInterval(timer);
        resolve();
      }
    }, 300);
  });
});

總結

Puppeteer 提供強大的功能讓開發者能夠模擬使用者操作並有效抓取網站資料。無論是動態內容處理、自動填表、擷取清單或進行爬蟲任務，它都是 Node.js 環境中極具彈性與效率的工具。搭配合適的程式結構與錯誤處理機制，就能打造穩定且可靠的自動化抓取流程。

常見問答（FAQ）

1. Puppeteer 是否支援登入需要驗證的網站？

可以。你可以使用 page.type() 與 page.click() 來模擬登入流程，也可設置 Cookie 來保留登入狀態。

2. 如何在有圖形介面的瀏覽器中開啟 Puppeteer？

預設是無頭模式，如需顯示瀏覽器介面，請在 launch() 中設置 headless: false。

const browser = await puppeteer.launch({ headless: false });

3. Puppeteer 可以抓取多頁面的資料嗎？

當然可以。你可以建立迴圈，自動點擊下一頁按鈕或改變 URL 分頁參數，一頁一頁抓取需要的資料。

想獲得更多 Puppeteer 自動化爬蟲技巧？歡迎訂閱我們的網頁開發教學頻道！