大前端神器安利之 Puppeteer

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

原文出处：晚晴幽草轩
原文首链：大前端神器安利之 Puppeteer

大前端神器安利之 Puppeteer

Puppeteer 能做些什么

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

• 生成页面的截图和PDF。
• 抓取SPA并生成预先呈现的内容（即“SSR”）。
• 从网站抓取你需要的内容。
• 自动表单提交，UI测试，键盘输入等
• 创建一个最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。
• 捕获您的网站的时间线跟踪，以帮助诊断性能问题。

---

Puppeteer 轻松入门

想要在项目中使用 Puppeteer，只需要运行如下命令安装即可；不过要注意的是：Puppeteer 至少需要 Node v6.4.0，如要使用 async / await，只有 Node v7.6.0 或更高版本才支持；另外，安装 Puppeteer 时，它会下载最新版本的 Chromium（〜71Mb Mac，〜90Mb Linux，〜110Mb Win），保证与 API 协同工作。

yarn add puppeteer
# or "npm i puppeteer"

对于如何使用 Puppeteer，这非常之容易；如下简易的示例，即实现了：导航到 https://example.com 并将截屏保存为 example.png；

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

更多示例可参考 GoogleChrome Puppeteer Usage；在略为熟悉 Puppeteer的 Api 之后，即可用来她操纵浏览器，来为你做些你想搞的事儿；不过值得一提的是，她现在还处于开发阶段，随着版本的更替，Api 接口也有可能会跟着略有变动。Toss Puppeteer，这是在 Github 创建的一个仓库，以承载尝试使用 GoogleChrome Puppeteer 做的各种的折腾，具体如下：

---

微注： 鉴于个人信息不便于提交，已设置 git 提交忽视私密配置文件；如要运行如下几个 Demo，需要手动在 src/config 目录下，创建 secret.js，格式如 secretSample.js 所示(🍀️)。

自动抓取指定网站文章分享至指定网站

这番折腾，是基于 Puppeteer 抓取某网页链接（ 具体是在 https://jeffjade.com/categories/Front-End/ 中随机出一篇），将其推送到技术头条；其目的在于：练习初步运用 Puppeteer。

运行命令

git clone https://github.com/nicejade/toss-puppeteer
npm i (更推荐 yarn)
yarn run shareBlogToBlogread

步骤详述

• [X] 打开技术头条-提交页面，同时到 晚晴幽草轩-Front-End 随机抓取一篇文章，获取到标题、地址、描述。
• [X] 模拟人为操作，点开“用微博登录”按钮(会跳转至微博登录页面)；
• [X] 模拟人为操作，填充用户名和密码并“点击”登录按钮，完成登录(会重新跳转至技术头条-提交页面)；
• [X] 模拟人为操作，填充之前获取到的标题、地址、描述，并“点击”提交，打完收工。
• [ ] 将其部署于服务器，并设置任务，定时间隔性执行，完成自动按时分享。

提交🈯️定链接到指定网站

处于某些分享需要，偶尔会涉及到这样的需求即：分享指定链接(Url)到指定网站；这个相比于如上功能，要省却些步骤。如果愿意折腾的话，还可以提交至多个不同的目标网站，只需增加设定目标地址，登录方式，以及提交表单的信息即可。当然，对于涉及到登录需要复杂的验证网站，额外需要多做些处理。这里只对技术头条做了配置，运行如下命令即可：(Update@17-12-17)

Url=https://jeffjade.com/2017/09/28/127-nice-front-end-tutorial/ yarn run shareUrlToTheSite
url=https://jeffjade.com/2017/09/28/127-nice-front-end-tutorial/ yarn run shareUrlToTheSite

抓取指定网站页面并将其打印成 PDF

此番折腾，是基于 Puppeteer 抓取指定网站页面(示例是 https://jeffjade.com/ 所有文章)，并将其打印成 PDF；其目的在于：进一步熟悉运用 Puppeteer。

运行命令

git clone https://github.com/nicejade/toss-puppeteer
npm i (更推荐 yarn)
npm run printWebsiteToPDF

步骤详述

• [X] 打开 https://jeffjade.com/archives 页面，从而得到博客文章总分页总数；
• [X] 运用 axios & cheerio 抓取分页并分析，从而得到网站所有文章链接，并存储在数据中；
• [X] 遍历所有链接（借助 async 控制并发），在页面渲染完成之后，将其打印成 PDF 并保存。

使用 Puppeteer 抓取指定网站页面并将其打印成 PDF

一键初始化 Gitment 评论系统

背景说明 、

早前在 About Me有如此感叹道：

嗟夫，真真是：独立的才是自己的。博客从最开始用多说，17年6月1日关闭服务后，转战网易云跟帖；未曾想它8月1日也跟着关闭了。索性转投靠至国外Disqus，奈何这堵墙厉害之极，家里虽也翻了墙，却仍不能很好访问；这才又转战至 Gitment；😂言多皆泪，感慨颇多啊——独立的才是自己的，之后得空时候，还是自己搞一套😪，Fighting。

这提及的 Gitment 是基于 GitHub Issues 的评论系统；它本身的一些特征，使得它存在很多优势，对于维护“程序”相关话题博客。所以，个人博客晚晴幽草轩就采用此评论系统；但，它也会存在一些问题，譬如需要主动初始化评论,initialize-your-comments，当然也可以运用些工具协助完成✅。对于已经写了 140+ 篇博文的晚晴幽草轩，这实在很有必要；所以，这里谈及即，使用 Puppeteer 一键来初始化 Gitment 评论系统（需要注明的是，每个系统结构有所区别，这里只具有些参考性，却不能直接加以使用）。

运行命令

git clone https://github.com/nicejade/toss-puppeteer
npm i (更推荐 yarn)
npm run initializeGitment

步骤详述

• [X] 打开 https://jeffjade.com/archives 页面，从而得到博客文章总分页总数；
• [X] 运用 axios & cheerio 抓取分页并分析，从而得到网站所有文章链接，并存储在数据中；
• [X] 打开 Github 登录地址： https://github.com/login ，填充用户名、密码，从而完成登录；
• [X] 遍历所存储链接，并在不同窗口打开（借助 async 控制并发）；
• [X] 等待，直到初始化按钮显示后并点击（实际上需要先触发博客页面的 Github login 链接）；

一键初始化 Gitment 评论系统

寄存的博客评论，可在 jadeblog-backups#issues 查看;(实际上，在使用 Gitment 之时，触发初始化按钮，并未能真正完成初始化，猜测这可能是插件本身的问题，或者别的，需要进一步探究）(Update@17-11-23)。

用 Puppeteer Trace 做性能分析

可以使用 tracing.start 和 tracing.stop 创建一个可以在 Chrome 开发工具或时间线查看器中打开的跟踪文件(每个浏览器一次只能激活一个跟踪)，具体参见 Puppeteer Trace Api。

await page.tracing.start({path: 'trace.json'})
await page.goto('https://www.google.com')
await page.tracing.stop()

运行命令

git clone https://github.com/nicejade/toss-puppeteer
npm i (更推荐 yarn)
npm run performanceAnalysis

一键初始化 Gitment 评论系统

对于 Chrome Performance／Timeline，如何使用，可以参见 Chrome 开发者工具，或者移步至 Chrome Tutorial，这里有比较详尽的，不断补充修缮的参考资料。

---

前面就有提及，使用 Puppeteer，相当于同时具有 Linux 和 Chrome 双端的操作能力，应用场景可谓非常之多；上面这些只是闲余时间写来玩儿的，而真正可以做的，会随着你的想象力扩散而增加；比如高级爬虫，实现前端监控诸此等等；对于前端监控这项，可以一提的是，完全可以借鉴 capture webpage and diff the dom change with phantomjs ♨ 类似思想，结合 Puppeteer、MongoDB 等器具，实现一套前端页面前端监控，实现定期检查同时，还能辅助于测试，在这一点上可以比 Sentry 做的更多；个中实现，有待继续摸索实践。

额外需要补充说明的是，关于此文章的命名；无端由的加了一个“大”字；倒不完全是因为，“前端开发者”在相关行业，承担着越来越多的重要工作；而其本身也要不断学习、充实知识库；入围门槛的难度也在逐步增加；凡此等等，在与时俱进版前端资源教程一文中，可见一斑；不幸的是，在同类相轻的鄙视链中，却总有些个别的“合作者”，在工作中只因角色分工的不同，而缺少对人应有尊重；虽然，个人倒不自定为前端开发者，遇到这种恶，总免不了惹起骨子里的侠义；可以言说的是：角色之设定高明与否，相关从业者本身可以自嘲，外人何由来的轻责与漫蔑？王小波先生在他的杂文关于格调的最后有写到：“对于一件愚蠢的事，你只能唱唱反调”；“大”这一字，如此而已。

@2017-12-17 于深圳.南山 Last Modify： 2017-12-17