跳至主要内容

[note] puppeteer 筆記

keywords: 爬蟲, crawler, 自動化, chrome, test​

puppeteer @ GitHub

常用功能​

取得 DOM 元素​

keywords: page.$(), page.evaluate(), ElementHandles.dispose()​

取得 DOM 元素後，可以透過一般的 Vanilla JS 來操作這些元素：

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

  /**
   * 透過 page.$(<selector>) 選取元素
   * 把選取到的元素丟到 page.evaluate(fn, arg) 的 arg 中，可以在 fn 透過 Vanilla JS 操作
   * 透過 ElementHandles.dispose() 將記憶體回收
   **/
  const bodyToBeHandle = await page.$('body');
  const html = await page.evaluate((body) => body.innerHTML, bodyToBeHandle);

  // 透過 dispose() 移除
  await bodyToBeHandle.dispose();

  await browser.close();
});

注意​

Puppeteer 是模擬瀏覽器真實的行為，因此沒辦法讓瀏覽器同時輸入多個對話框，因爲一次只能 focus 一個元素：

// 不可行的作法！！
await Promise.all([
  page.type('#person_id', PERSON_ID), // 輸入身分證字號
  page.type('#from_station', FROM_STATION), // 輸入起站
  page.type('#to_station', TO_STATION), // 輸入抵達站
]);

page.type should block the event loop until complete @ puppeteer github issues

參考​