Puppeteer 快速入門

您必須先安裝 Puppeteer,才能在專案中使用 Puppeteer。

安裝

npm i puppeteer
# or "yarn add puppeteer"

安裝 Puppeteer 時,系統會下載保證可與 API 搭配使用的最新版 Chromium (大約為 170MB Mac,約 282MB Linux,約 280 MB Win)。 如要略過下載、下載至其他路徑或下載其他瀏覽器,請參閱環境變數相關說明。

玩偶核心

自 1.7.0 版起,我們發布了 puppeteer-core 套件。根據預設,這個版本的 Puppeteer 不會下載任何瀏覽器。

npm i puppeteer-core
# or "yarn add puppeteer-core"

puppeteer-core 的用途是簡易版的 Puppeteer,用於啟動現有瀏覽器安裝作業或與遠端裝置連線。請確認你安裝的 Puppeteer-core 版本與你要連線的瀏覽器相容。

請參閱「puppeteer 與 puppeteer-core」。

使用方式

Puppeteer 遵循節點最新的 維護 LTS 版本。

Puppeteer 在使用其他瀏覽器測試架構的人可能已經很熟悉。您可以建立 Browser 的執行個體、開啟頁面,然後使用 Puppeteer API 操控這些頁面。

儲存螢幕截圖

舉例來說,如要前往 https://example.com 並將螢幕截圖儲存為 example.png,請將下列程式碼儲存至 example.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

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

Puppeteer 將初始頁面大小設為 800×600 像素,藉此定義螢幕截圖的大小。您可以使用 Page.setViewport() 自訂頁面大小。

建立 PDF

將檔案儲存為 hn.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {
    waitUntil: 'networkidle2',
  });
  await page.pdf({ path: 'hn.pdf', format: 'a4' });

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

在指令列中執行指令碼:

node hn.js

如要進一步瞭解如何建立 PDF 檔案,請參閱 Page.pdf()

評估網頁內容的指令碼

將檔案儲存為 get-dimensions.js

const puppeteer = require('puppeteer');

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

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio,
    };
  });

  console.log('Dimensions:', dimensions);

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

在指令列中執行指令碼:

node get-dimensions.js

如要進一步瞭解如何評估及相關方法,例如 evaluateOnNewDocumentexposeFunction,請參閱評估 JavaScript

預設執行階段設定

使用無頭模式

Puppeteer 以無頭模式啟動 Chromium。如要啟動完整版本的 Chromium,請在啟動瀏覽器時設定 headless 選項:

const browser = await puppeteer.launch({ headless: false }); // default is true

執行隨附版本 Chromium

根據預設,Puppeteer 會下載及使用特定版本的 Chromium,以便保證其 API 可立即運作。如要將 Puppeteer 與其他版本的 Chrome 或 Chromium 搭配使用,請在建立 Browser 執行個體時傳入執行檔的路徑:

const browser = await puppeteer.launch({ executablePath: '/path/to/Chrome' });

您也可以將 Puppeteer 與 Firefox Nightly 搭配使用 (實驗性支援)。詳情請參閱 Puppeteer.launch()

瞭解詳情:

建立新的使用者設定檔

Puppeteer 會自行建立瀏覽器使用者設定檔,並在每次執行時清理資料。

後續步驟