Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

puppeteer初识之爬虫 #15

Open
jiangtao opened this Issue Nov 8, 2017 · 0 comments

Comments

Projects
None yet
1 participant
@jiangtao
Copy link
Owner

commented Nov 8, 2017

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

什么是puppeteer

来自官方的介绍:

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

能干什么

来自官方的描述:

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

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

爬取百度图片

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

百度图片首页爬取特点

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

百度图片详情页爬取特点

  • 以图片展示框展示,需要自动点击下一页

图片抓取通用点

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

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

以首页爬取来开始Puppeteer

  1. 首先创建 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)) {
      // 下载图片逻辑
    }
  })
  1. 自动滚动逻辑

通过 window.scrollBy api控制滚动条自动滚动。 里面的retry变量用来保证滚动到loading的时候滑到底部。也就是当loading的时间大约100 * 10 ms还没滚动出来数据的话,直接判定为滑动到最底部。

代码如下

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

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

总结

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

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

参考阅读

@jiangtao jiangtao changed the title 从一个爬虫初识puppeteer puppeteer初识之爬虫 Feb 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.