puppeteer初识之爬虫

2018-02-27 11:05:16来源:https://juejin.im/post/5a8e8bbc6fb9a063317c62d0作者:稀土掘金人点击

分享

类似的文章很多了,很久之前写的~最近要搞分享预热预热,大家新年快乐,开工大吉呀。



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


什么是puppeteer

来自官方的介绍:



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


能干什么

来自官方的描述:


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


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


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


百度图片首页爬取特点
图片一般较小,需要过滤掉小图
需要滚动加载显示更多图片,需要程序自动滚动
百度图片详情页爬取特点
以图片展示框展示,需要自动点击下一页
图片抓取通用点


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



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


以首页爬取来开始Puppeteer
首先创建 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)) {
// 下载图片逻辑
}
})
自动滚动逻辑


通过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,转载请注明出处


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台