如何用 Puppeteer 爬網站？

發布於二〇二五年五月一一日 by admin

使用 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 自動化爬蟲技巧？歡迎訂閱我們的網頁開發教學頻道！

發布於 二〇二五年五月一一日 by admin