Puppeteer爬自己想偷的猫
毕设做的太累,就想写点小玩具。平时很喜欢云吸猫,就写了个小爬虫,每天爬点猫咪图片增加点动力,这可比程序员鼓励师给劲多了(滑稽)!
预热
Puppeteer是 Google Chrome
团队官方的无界面(Headless)Chrome
工具,它是一个 Node 库,提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome
。也可以配置为使用完整(非无头)的 Chrome
。Chrome
素来在浏览器界稳执牛耳,因此,Chrome Headless
必将成为 web 应用自动化测试的行业标杆。使用 Puppeteer
,相当于同时具有 Linux
和 Chrome
双端的操作能力,应用场景可谓非常之多。此仓库的建立,即是尝试各种折腾使用 GoogleChrome Puppeteer
;以期在好玩的同时,学到更多有意思的操作。
您可以在浏览器中手动完成的大部分事情都可以使用 Puppeteer
完成!你可以从以下几个示例开始:
- 生成页面的截图和PDF。
- 抓取SPA并生成预先呈现的内容(即“SSR”)。
- 从网站抓取你需要的内容。
- 自动表单提交,UI测试,键盘输入等。
- 创建一个最新的自动化测试环境。使用最新的
JavaScript
和浏览器功能,直接在最新版本的Chrome中运行测试。 - 捕获您的网站的时间线跟踪,以帮助诊断性能问题。
了解更多戳这里
正题
使用 Puppeteer
获取想要的元素
由第一部分可以知道 Puppeteer
可以模拟用户的各种操作,所以我们想浏览“猫片”的第一步就是打开浏览器啦!
1. 打开浏览器
const options = {
// 如果使用headless字段会启用可视化模式,也就是会启动Chrome浏览器,并且会有头部地址栏等工具
// headless: false,
executablePath: getNPMConfig('chrome')
};
const browser = await Puppeteer.launch(options);
2. 创建一个Tab
const page = await browser.newPage();
3. 输入“猫片”地址
// 这里以花花与三猫catlive为例
await page.goto('https://space.bilibili.com/9008159/dynamic');
4. 重头戏:获取Dom元素
由于是动态网页,如果使用 JSDom
来获取 DOM
元素很有可能会出错。这也就是我们为什么选择 Puppeteer
的原因,使用 Puppeteer
的 waitForSelector
方法可以等指定 DOM
元素加载完毕后再获取。
下面我们来看一下我们需要什么 DOM
元素中的内容:
可以看到,动态中的“猫片”是在 .zoom-list
的列表内,包含 .zoom-list
的最外层的父元素是 .s-space
,并且每个图片的 class
都为 .img-content
,最后照片并不是通过 <img />
的 href
属性进行设置的,而是通过 background-image
来设置的。这样我们就可以下手“偷猫”啦!
// 最好用比较外层的元素来判定是否加载完成,因为如果用比较内层的元素来判定的话,如果超过Puppeteer的判定时间(可以自己设定)那么就会报错
await page.waitForSelector('.s-space .zoom-list');
// ?eval:第一个参数为选择器:选择要获取的DOM元素;第二个参数为回调函数:对获取的DOM元素的操作
const content = await page.?eval('.s-space .zoom-list .card',
items =>
items.map(
item =>
item
.querySelector('.img-content')
.style.backgroundImage.split('"')[1]
)
);
上图就是我们获取的图片的路径啦!撒花~
最后一步,发邮件
发邮件我们使用 nodemailer
,没有用过的伙伴可以看一下这篇文章NodeJs使用NodeMailer发邮件。要提一下,nodemailer
一定要依托于服务器才可以发送HTML样式(至少我试的是这样)。我们只需要对我们获得的数据进行简单的操作就可以啦:
htmlContent = content.reduce((acc, cur) => {
acc += `<div><img style='height: 100px' src='${cur}' alt='' /></div>`;
return acc;
}, '');
// 然后在sendMail的第一个参数options中加入下面字段即可
{
...
html: htmlContent
}
邮件内容如下图:
大家可以美化一下样式,我只做了一个简单的例子。代码中没有实现每天定时爬图片,大家可以改进一下,每天爬一些图片发到自己邮箱吸一吸!毕竟在掘金吸了这么久闰土了,也该换换口味了 23333
希望大家能劳逸结合,身体第一位!
源码地址:GitHub 中间遇到点问题(就是被选择器坑了!!!),感谢水歌的耐心解答,也感谢群里其他大佬的解决方案!