【每周小项目】使用 puppeteer 插件爬取动态网站
0. 前言
这两天对爬虫开始感兴趣，最开始是源于天涯的一个房价神贴，盖了上万层，追着读了好久。天涯网页端的“只看楼主”需要会员，手机端可以“只看楼主”，但是体验不太好，记录也不方便，于是决定把楼主发言单独爬下来，既可以保存，也可以检索。
最开始想法很简单，对每一页进行元素检索，发帖人与楼主名字匹配的，就把里面的content拷出来。
首先在网上找到的工具是cheerio插件，它在读取网站之后，将网站内容存下来，通过元素选择器进行内容选取。在使用递归后，还能解决翻页问题。
事实上也确实如此，通过简单几步操作，就把楼主的发言保存了下来，也让我对爬虫产生了兴趣。
问题
cheerio确实简单好用，在应对简单静态网页时没有问题。但对付具备一定反爬机制的网站就无能为力了。比如cheerio解决翻页问题，靠的是动态修改url链接。但是有的网站，比如我最爱的煎蛋，它的网页链接页码是乱码，就没办法实现自动翻页。再比如有的房产网站，在罗列在售资源时，为了用户体验，使用了懒加载，只有将页面滚动到底部后，才能触发加载。
以上种种实际上就是cheerio对于网页操作是无能为力的。
解决
在网上查找对付懒加载的方法时，发现了puppeteer插件。谷歌浏览器在17年自行开发了Chrome Headless特性，并与之同时推出了puppeteer，本质上就是一个不含界面的浏览器，有点像电脑的终端，所有操作都通过代码进行操作。
这样，我们就可以在对网站进行检索之前，操作指定元素滚动到底部，以触发更多信息。或者在需要翻页的时候，操作代码对翻页按钮进行点击，然后对翻页后的页面进行相关处理。
1. 下载与引包
// 下载
npm i puppeteer
// 引包
const puppeteer = require('puppeteer')
2. 使用步骤
// 将整个操作放置在一个闭包的异步函数中，以便于进行异步操作
(async () => {
// 1. 使用puppetee插件启动一个浏览器，并开启一个新页面
const brower = await puppeteer.launch({
args: ['--no-sandbox'],
dumpio: false,
headless:false, // 默认为true，设为false时，可以显示可视化浏览器界面
})
const page = await brower.newPage() // 开启一个新页面
// 2. 打开指定网页
await page.goto('http://jandan.net/ooxx', {
waitUntil: 'networkidle2' // 网络空闲说明已加载完毕
});
// 3. 对动态网站进行自动化操作，这一步是其精髓所在
// 由于我们监控的是动态网页，刚打开网页时，所需元素也许还未出现，所以需要进行监听，例如“下一页按钮”
await page.waitForSelector('a.previous-comment-page'); // 括号内是元素选择器
// 当下一页按钮出现时，模拟点击
await page.click('a.previous-comment-page')
// 4. 这时我们可以执行爬取我们需要的数据了，我们可以去审查页面的dom结果，来循环遍历这些数据。
// page.evaluate() 为在浏览器中执行函数，相当于在控制台中执行函数，返回一个 Promise
const result = await page.evaluate(() => {
// 拿到页面上的jQuery
var $ = window.$;
// 在这里进行熟悉的 DOM 操作
// Do something
});
// 5. 关闭浏览器，在console里面打印我们需要的数据
brower.close();
// 6. 对结果进行处理
console.log(result);
})();
3. 爬过的几个坑
page.evaluate 的传参问题
因为打开的这个 page 只是一个木偶，并不是真正的浏览器页面，所以在这个页面上的操作与一般页面上的操作有差异。
官方文档里说，这个参数是这样的。在实际使用中，可以传一个字符串变量，但是到更复杂一点的，比如‘fs’，自定义外部函数时，都无法读取。
这也是我建议在第6步，对页面操作完成后，统一对结果进行处理。（主要是因为我没有解决这个问题，所以认怂绕开走了……）
元素操作问题
puppeteer中，最重要的函数执行和要素选择都与一般浏览器上操作有些区别，这里有些坑要爬，现在我也说不清楚。
