爬虫利器-Puppeteer初探

你的名字 2021-04-19 15:05 674阅读 0赞

# 模拟浏览器操作神器Puppeteer初探 #

## 介绍 ##

刚接触到puppeteer，并不是用来做爬虫，只是想做一个后台数据推送及性能数据抓取的功能，需要模拟登陆内部系统爬取数据截图。一开始想到利用很多方案，像wkhtmltopdf, phantomjs等等，他们都是类浏览器的环境，因为之前使用过，都知道他们或多或少都存在些问题。再后来发现了headless，谷歌的无头浏览器服务，这个最接近真实浏览器的东西（应该说就是个浏览器吧），然后决定采用headless，网上最多的是采用lighthouse作为操作headless的nodejs接口工具,后来看到puppeteer，和lighthouse差不多，但毕竟是谷歌团队自己维护的工具，当然就选择了它，后来看了看，果然还是它用起来比较方便。

官方对于puppeteer的介绍（翻译过来）：

> puppeteer由Chrome团队开发的Node库。它提供了一个高级API来控制无头（或完整）Chrome。它与Phantom和NightmareJS等其他自动化测试库类似，但它只适用于最新版本的Chrome。 除此之外，Puppeteer还可用于轻松截取屏幕截图，创建PDF，导航页面以及获取有关这些页面的信息。如果您想快速自动化浏览器测试，我建议使用该库。它隐藏了DevTools协议的复杂性，并负责启动Chrome的调试实例等冗余任务>

看起来很强大对不对，实时上除了无头模式，Puppeteer也可以操作真实浏览器进行工作，你会发现它除了可以做完美的爬虫之外，对于自动化的ui测试也是利器。目前也有了中文文档，使用起来也是极其方便的

### 截图 ###

让我们先来看一下它的api,首先是puppteer对象，用于启动一个Chromium实例，例子：

const puppeteer = require('puppeteer');
    
    puppeteer.launch().then(async browser => {
      const page = await browser.newPage();
      await page.goto('https://www.google.com');
      // 其他操作...
      await browser.close();
    });

上图实际是打开了一个浏览器应用，lauch方法支持一个对象类型的参数，其中可以指定headless为true还是false,当指定为true是，可以观察到实际行为，在我们测试的时候还是很有用处的，当我们设置为true是可以观察到，browser对象针对的是整个浏览器窗口，而page对象针对的是每个tab页签，当关闭browser对象时，所有page对象都会被销毁，如果想要单独销毁page对象可以调用page.close();   在实际应用中，page对象是我们最常用的对象，下面是使用page对象打开一个页面并进行截图的例子：

const puppeteer = require('puppeteer');
    puppeteer.launch().then(async browser => {
      const page = await browser.newPage();
      await page.goto('https://www.baidu.com');
      // 截图...
      await page.screenshot({
        path:'xx/xx.png',type:'png',quality:100,fullPage:true});
      await browser.close();
    });

这里介绍下截图的几个参数：

*  path：图片存储路径
 *  type: 图片格式，默认png
 *  quality: 图片质量0-100的值，png格式无效
 *  fullpage: 是否截取整个页面，如果不设置，截取的是窗口打开部分，并不是全页面，默认打开的窗口是800x600大小，如果想截取更完美的大小需要调整视窗大小，通过设置launch的defaultViewport参数。

### 性能数据获取 ###

puppteer也支持我们在打开页面时进行一些性能数据的采集，page.metrics()方法可以帮我们获取到页面打开过程中的性能参数：

puppeteer.launch().then(async browser => {
      const page = await browser.newPage();
      await page.goto('https://www.target.com');
      // 获取页面性能数据...
      const result = await  page.metrics();
      console.log(result);
      await browser.close();
    });

返回结果包括：

*  Timestamp 时间点(when the metrics sample was taken)
 *  Documents 页面的documents数量。
 *  Frames 页面的iframe数量。
 *  JSEventListeners 页面的js事件数量。
 *  Nodes 页面的dom节点数量。
 *  LayoutCount 整页面或部分页面的布局数量。
 *  RecalcStyleCount 页面样式重新计算数量。
 *  LayoutDuration 页面布局总时间。
 *  RecalcStyleDuration 页面样式重新计算总时间。
 *  ScriptDuration 页面js代码执行总时间。
 *  TaskDuration 页面任务执行总时间。
 *  JSHeapUsedSize 页面占用堆内存大小。
 *  JSHeapTotalSize 总的页面堆内存大小。 还有另外一个api，用于获取我们平时利用浏览器观察页面加载性能的performance视图，它会生成和谷歌浏览器中profile.json一样的一个json数据，我们可以导入浏览器中查看