大前端神器安利之 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 并保存。

一键初始化 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 链接);

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

Puppeteer Trace 做性能分析

可以使用 tracing.starttracing.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

对于 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

加油站也会被黑?来看看这个攻击案例

这篇文章涉及的问题主要与加油管理设备公司Veeder Root相关的油品液位仪TLS-300/350 UST和TLS-350R相关,原因在于可以通过其错误配置的...

2546
来自专栏轮子工厂

有哪些实用且堪称神器的Chrome插件?吐血推荐!!!

相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(E...

3.5K4
来自专栏木制robot技术杂谈

Hexo搭建个人博客(一)— 前期准备

前言 最近几个月自学python的过程中,搜索爬虫资料的时候关注了xlzd的博客,为我开启了一片新世界,之后慢慢收藏了各方高人的博客。搭建一个自己博客的萌芽也悄...

3545
来自专栏知晓程序

我,一个自诩牛逼上天的 Node.js 和小程序开发者,今天就教「快应用」好好做人

1502
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列 - 手绘视频导出

手绘视频最终的生成物是视频文件,前面几篇主要讲的是手绘视频的创作部分,今天讲一下手绘视频的导出问题。主要以 UWP 为例,另外会介绍一些 Web 端遇到的问题和...

4006
来自专栏张戈的专栏

WordPress4.2升级修复补丁:解决大量404请求以及评论表情路径及尺寸异常问题

上一篇文章写到了 WordPress 升级 4.2 版本后部分主题出现了大量 404 请求的问题,匆忙解决也没深究原因。今天继续调试主题却发现了评论表情不显示了...

46913
来自专栏移动开发之家

移动端跨平台开发的深度解析

跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,...

1002
来自专栏北京马哥教育

22款神奇的Ubuntu软件,帮你的系统成为全场最佳

? 作者:PentonBin 来源: https://www.zhihu.com/question/19811112/answer/132006027 先讲一...

6325
来自专栏一个番茄说

iOS 开发安全那些事儿

​ 随着移动互联网的普及,被越来越多的心怀不轨的人觊觎,也越来越多的安全问题暴露了出来。开发者开发出来的应用被安装在设备上之后,用户并不具有专业的安全知识。...

1123
来自专栏WeTest质量开放平台团队的专栏

安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人。下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的...

1102

扫码关注云+社区

领取腾讯云代金券