用Puppeteer爬自己想偷的猫,推翻闰土统治掘金的时代!

2,785 阅读4分钟

Puppeteer爬自己想偷的猫

毕设做的太累,就想写点小玩具。平时很喜欢云吸猫,就写了个小爬虫,每天爬点猫咪图片增加点动力,这可比程序员鼓励师给劲多了(滑稽)!

预热

PuppeteerGoogle Chrome 团队官方的无界面(Headless)Chrome 工具,它是一个 Node 库,提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整(非无头)的 ChromeChrome 素来在浏览器界稳执牛耳,因此,Chrome Headless 必将成为 web 应用自动化测试的行业标杆。使用 Puppeteer,相当于同时具有 LinuxChrome 双端的操作能力,应用场景可谓非常之多。此仓库的建立,即是尝试各种折腾使用 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 的原因,使用 PuppeteerwaitForSelector方法可以等指定 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 中间遇到点问题(就是被选择器坑了!!!),感谢水歌的耐心解答,也感谢群里其他大佬的解决方案!