使用Puppeteer撸一个爬虫

为什么80%的码农都做不了架构师？>>>   

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，控制台成功打印出了我们爬取的电影信息！

转载于:https://my.oschina.net/cc4zj/blog/1833151