Puppeteer 是 Google 開源的網路爬蟲工具,說明文黨一開始就提到

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

主要是以 Chrome 當作核心個人使用起來感覺,就是使用程式去操作瀏覽器而已。

範例

const puppeteer = require("puppeteer")

exports.getPageTitle = async url => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.setUserAgent(
    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36"
  )
  await page.setViewport({
    width: 1920,
    height: 1080,
    isMobile: false
  })
  await page.goto(url)
  const result = await page.evaluate(() => {
    return document.title
  })
  await browser.close()
  return Promise.resolve(result)
}

由以上這段範例可以看到有些重點,整段程式碼都是非同步的,所以必須要使用Promise去處理,setViewport 可以去模擬視窗的大小甚至是直接模擬手機,evaluate則是可以取得當前頁面的元素了。

Debug

如果你有嘗試過在 evaluate 內下 console.log() 你會發覺奇怪勒~怎麼都沒有反應,其實也很合理你可以想像 chrome 在當前頁面有一個 console.log() 你沒打開開發工具也不會看到。

那麼要怎麼 debug 呢?我們必須使用偵聽的方式例如:

const page = await browser.newPage()
//...
page.on('console', log => console.log(log.text()))
await page.evaluate(() => {
    console.log('hi~')
    return document.title
  })

如此一來在 node 那邊就可以看到 log 出來的訊息了。

Puppeteer Recorder

Puppeteer Recorder 真的是一個很好用的 chrome 插件,他可以錄製我們在瀏覽器上的操作行為並且產生出範例 code 節省不少寫程式的時間推薦給大家囉。

參考資料

Puppeteer

Puppeteer log inside page.evaluate

Facebook 功能:

Summary
使用 Node.js 套件 Puppeteer 撰寫爬蟲
Article Name
使用 Node.js 套件 Puppeteer 撰寫爬蟲
Description
網路爬蟲一直是都存在的需求,在這個大前端時代裡面使 javascript 寫爬蟲也不是問題,使用 google 所開源的 Puppeteer 就可以滿足我們的需求,快來看看怎麼使用吧。
Author
Publisher Name
bonze