从一个爬虫初识puppeteer

前段时间破事群讨论问题，突然提到一个新名词 puppeteer，于是好奇查了下干什么的。于是一发不可收拾。

什么是puppeteer

来自官方的介绍：

Puppeteer是一个Node库，提供一套高度封装的API，通过DevTools Protocol来控制headless Chrome

能干什么

来自官方的描述：

很多事情可以使用Puppeteer在浏览器中手工完成，下面是一些可以上手的例子：

生成屏幕快照和pdf
爬取单页面应用和预渲染内容
获取网页内容
全自动的form提交, UI测试, 键盘输入等等.
创建一个最新的，自动的测试环境。直接使用最新版本的chrome，使用最新的JavaScript和浏览器特性，跑你的测试用例
捕获你网站的timeline trace，诊断性能问题

爬取百度图片

爬取特定 关键词 搜索出来的图片，百度图片分为首页和详情页

百度图片首页爬取特点

图片一般较小，需要过滤掉小图
需要滚动加载显示更多图片，需要程序自动滚动

百度图片详情页爬取特点

图片抓取通用点

因为Puppeteer可以监听网络请求和响应，所以只需要在请求和响应的时候做处理即可。
为了保证图片尺寸，我们这里以响应时做处理。若读者需要快速的请求，不在乎小图啊，可以通过请求的时候来做处理，这样效率更快一点。

下面我们一块来撸一个百度图片的爬虫。注：本教程只用做演示，请大家不要搞百度呀~

以首页爬取来开始Puppeteer

首先创建 Page 实例

const browser = await puppeteer.launch({
  headless: false
})
const page = await browser.newPage()
// 若需要request， 把事件改成 request 即可，但拿到的是request的信息
page.on('response', async(data) => {
  // 判定拿到的数据是否是图片， 也可以根据url规则挑选出自己想要的url
  if (isDownloadImageByResponse(data)) {
    // 下载图片逻辑
  }
})

自动滚动逻辑

通过 window.scrollBy api控制滚动条自动滚动, 代码如下

module.exports = async function autoScroll(page) {
  await page.evaluate(async () => {
    await new Promise((resolve, reject) => {
      try {
        let lastScroll = 0
        const maxScroll = Number.MAX_SAFE_INTEGER
        const interval = setInterval(() => {
          window.scrollBy(0, 100)
          const scrollTop = document.documentElement.scrollTop
          if (scrollTop === maxScroll || lastScroll === scrollTop) {
            clearInterval(interval)
            resolve()
          } else {
            lastScroll = scrollTop
          }
        }, 100)
      } catch (err) {
        reject(err.toString())
      }
    })
  })
}

这样一个滚屏的爬虫逻辑就完成了，具体的代码请查看，而且不需要解析dom，也不用担心网站改版之类了，生活瞬间变得美好。

总结

Puppeteer带来的是更方便的操作headless chrome, 对于前端而言，可以做更好的测试，如基本的操作测试，线上页面屏幕快照抓取和分析等等。
当然在很久之前也有类似的实现，比如 Phantomjs之流，Puppeteer相对而言使用浏览器最新的api，对前端而言上面更快。如果你又兴趣，不妨去利用Puppeteer做一些事儿。

您喜欢欢迎star or fork，转载请注明出处