好用的 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