好用的 Puppeteer 輔助工具 Puppeteer Recorder

Puppeteer

Puppeteer 是一個Node庫，它提供了一個高級API來控制DevTools協議上的Chrome或Chromium，經常使用於爬蟲、自動化測試等，你在瀏覽器手動完成的大多數事情均可以使用它來完成。

站內有不少文章介紹Puppeteer，此處就再也不介紹。

可是

可是不管是爬蟲仍是自動化測試，你要寫Puppeteer腳本，首先你得分析網頁，而且講道理，每一個網站還都不同，這就很尷尬。

Puppeteer Recorder

Puppeteer Recorder 是Chrome擴展程序，可記錄你的瀏覽器交互並生成Puppeteer腳本。

下圖是以segmentfault點擊排行榜上用戶加關注爲栗子錄製的腳本。看上去是否是頗有規律，寫入cookie再改爲for循環，一個自動加關注的腳本就完成了。

注意事項

目前這個項目還比較簡單，經過分析幾種event生成代碼，這樣仍是會有比較多的問題。
好比，最後獲得selector和點擊前的selector不一致。selector是js腳本動態生成，須要waitFor去等待等等。
這些問題自己也是開發前分析網頁甚至debug須要遇到的問題，改爲自動腳本仍需注意。

如下爲部分源碼

_parseEvents (events) {
    console.debug(`generating code for ${events.length} events`)
    let result = ''
    for (let event of events) {
      const { action, selector, value, href, keyCode } = event
      switch (action) {
        case 'keydown':
          result += this._handleKeyDown(selector, value, keyCode)
          break
        case 'click':
          result += this._handleClick(selector, href)
          break
        case 'goto*':
          result += `  await page.goto('${href}')\n`
          break
        case 'reload':
          result += `  await page.reload()\n`
          break
      }
    }
    return result
  }
  _handleKeyDown (selector, value, keyCode) {
    if (keyCode === 9) return `  await page.type('${selector}', '${value}')\n`
    return ''
  }

參考

Puppeteer
Puppeteer Recorder