用Puppeteer爬本身想偷的猫，推翻闰土统治掘金的时代！

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 中间遇到点问题（就是被选择器坑了！！！），感谢水歌的耐心解答，也感谢群里其余大佬的解决方案！