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

Puppeteer 是 Google Chrome 团队官方的无界面 （Headless）Chrome 工具，它是一个 Node 库，提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整（非无头）的 Chrome 。 Chrome 素来在浏览器界稳执牛耳，因此， Chrome Headless 必将成为 web 应用自动化测试的行业标杆。使用 Puppeteer ，相当于同时具有 Linux 和 Chrome 双端的操作能力，应用场景可谓非常之多。此仓库的建立，即是尝试各种折腾使用 GoogleChrome Puppeteer ；以期在好玩的同时，学到更多有意思的操作。

您可以在浏览器中手动完成的大部分事情都可以使用 Puppeteer 完成！你可以从以下几个示例开始：

JavaScript

了解更多戳这里

正题

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