使用Puppeteer撸一个爬虫

Puppeteer是什么

puppeteer是谷歌chrome团队官方开发的一个无界面（Headless）chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。因此咱们颇有必要来了解一下它。所谓的无头浏览器是指没有窗口的浏览器。

Puppeteer能作什么

使用puppeteer咱们可让浏览器帮咱们自动完成不少事情，好比建立页面的截图或pdf，自动提交表单，UI测试，键盘测试，建立自动化测试环境等。

安装Puppeteer

经过 npm install puppeteer 或者 yarn add puppeteer来安装

注意事项

由于用到了es7的async/await语法进行异步处理。因此node版本最好是v7.6.0或以上。

爬虫实例

对puppeteer有些简单认识以后，咱们来作一个爬虫实例加深对puppeteer的印象！

目标网站

如上图所示，咱们此次的爬取目标是豆瓣电影网分类区按时间排序，评分6-10分的电影信息。最终获取到的数据是每部电影的海报图片，电影名称，评分以及它的id。

代码分析

1，页面中引入puppeteer包

2，声明爬取页面的url

3， 声明一个基于promise的定时器，后续代码中将会用到。

建立一个当即执行的async 方法，后续代码所有书写在async方法中。

经过puppeteer.launch()方法建立一个无头浏览器chrome对象browser。

经过browser.newPage()方法建立一个页面对象page。该page对象你们能够理解成咱们平常打开浏览器以后新建的一个标签页，在该标签页中访问站点。

使用page.goto()访问咱们要爬取的站点，第一个参数为爬取站点的url，第二个参数options具体信息你们可查询puppeteer文档，这里使用的waitUntil: 'networkidle2'参数指：当至少500ms内不超过两个网络请求时判断页面请求完成（请原谅我这蹩脚的翻译）具体请看文档中该部分说明：

这里为了确保浏览器请求结束，咱们延迟3s再作后续操做。

 

目标页面中经过点击加载更多按钮进行数据异步获取，这里咱们须要经过page对象模拟点击操做来显示两页数据，让咱们一次能爬取更多的电影信息。

经过page.waitForSelector()方法等待咱们须要的dom元素页面中显示出来。经过审查元素咱们能够看到在加载更多按钮上声明了more这一class，因此咱们要等待的元素用css选择器表示就是'.more'，正如上图中的30行代码所示。

随后咱们经过循环来控制咱们点击加载更多按钮的次数，这里咱们这须要模拟点击一次来获取两页数据，若想获取更多数据，可经过修改循环次数来实现。

循环中使用sleep()定时器是为了确保按钮真正的出如今了页面当中作的延迟操做。随后经过page.click('.more')来模拟加载更多按钮点击。

当页面中显示足够咱们须要的数据时，接下来咱们要作的就是获取这些数据。puppeteer为咱们提供了page.evaluate()方法实如今该page页面中执行一段咱们本身定义的脚本功能，其中的回调函数则是咱们欲执行的代码。

咱们能够思考一下，倘若咱们能够在一个html中插入一段js脚本去获取html中的数据。咱们能够经过js原生或jquery去获取相应的dom元素，而后经过dom元素的属性，文本，或者img的src拿到咱们想要的信息。首先咱们来判断一下该页面中是否引入了jQuery库，若是已引入，咱们则能够经过jQuery去操做dom获取数据。

在控制台打印jQuery对象，查看打印结果

经过返回值能够肯定该页面是引入了jquery库的，咱们能够大胆使用jquery去操做dom

如上面代码截图，咱们先var 一个$ 符号接收页面中的jquery对象，而后经过jquery选择器去获取电影图片，名称，评分所在的dom对象。最后经过遍历这些dom对象将咱们须要的数据存放到数组links中，完成咱们的爬取工做。

最后咱们关闭浏览器对象browser并打印咱们爬取的数据，检查咱们爬虫代码是否成功爬取到电影信息。

ok，控制台成功打印出了咱们爬取的电影信息！