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

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