前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Puppeteer 初探之前端自动化测试

Puppeteer 初探之前端自动化测试

原创
作者头像
QQ音乐前端团队
修改2017-09-25 10:55:35
13K6
修改2017-09-25 10:55:35
举报

导语: Most things that you can do manually in the browser can be done using Puppeteer!

初识puppeteer

puppeteer 翻译是操纵木偶的人,利用这个工具,我们能做一个操纵页面的人。puppeteer是一个nodejs的库,支持调用Chrome的API来操纵Web,相比较Selenium或是PhantomJs,它最大的特点就是它的操作Dom可以完全在内存中进行模拟既在V8引擎中处理而不打开浏览器,而且关键是这个是Chrome团队在维护,会拥有更好的兼容性和前景。

puppeteer功能

1.利用网页生成PDF、图片 2.爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染) 3.可以从网站抓取内容 4.自动化表单提交、UI测试、键盘输入等 5.帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例 6.捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题

安装 puppeteer

可能会遇到 无法下载Chromium 问题

是因为在执行安装的过程中需要执行install.js,这里会下载Chromium,官网建议是进行跳过,我们可以执行 —ignore-scripts 忽略这个js执行

接下来我们需要去下载Chromium,windows的版本我这里已经下载好了,直接解压缩附件中的到 node_modules/puppeteer中就可以了。

执行下,我们创建一个文件index.js,文件内容

这段代码会打开 https://y.qq.com 并截图,我们运行

如果看到目录下有生成图片y.qq.png的话,恭喜你,我们可以开始继续往下学习puppeteer了。

体验第一个demo,数字专辑自动购买的UI自动化测试

这里测试的功能是自动拉登录购买一张数字专辑,并在购买成功后跳转到铭牌页,先看下整个流程吧。

首先我们先创建一个设备,文档中(https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js) 我们能看到,默认支持的设备数量还是很多的,除了这些默认的设备之外,我们还可以自定义自己的设备,后面在调用emulate方法时会提到:

我们这里暂时先创建系统提供的iphone6设备,完了我们定义一个延时的timeout函数

接下来我们创建一个浏览器实例,并打开一个页面,细心的你一定发现在创建浏览器的时候我们传了headless参数,如果设为true的话就能可以在不打开外部浏览器的情况下完全利用v8引擎来进行页面的测试,简单说就是页面以及Dom完全在内存中,就连浏览器事件也是在内存中去模拟触发。

创建好浏览器实例之后我们需要让页面模拟成iphone6,这里的emulate函数的参数你也可以自定义参数

好接下来我们就可以写我们的测试步骤了。

第一步:我们打开页面,考虑到有数据需要异步加载,我们在延迟1000ms后调用screenshot方法截图留作日志。

第二步: 模拟触发点击 立即购买按钮,这时候会因为没有登录态而打开QQ登录。

第三步:在输入框中输入帐号密码,模拟输入需要我们先调用tap方法模拟点击输入框,tap参数就是元素selector,再用type方法进行输入,输入完了之后在模拟点击登录按钮,登录完了之后我们延迟一段时间截图,顺利的话我们就能重新回到之前的售卖页首页,而底下usrbar因为有了登录态也展示了出来。

第四步:跟第一步一样,点击立即购买按钮,这里会出现一个购买选择浮层,然后我们点击立即支付之后需要加载米大师,故这里我们延迟5000ms。

第五步:在拉起米大师支付浮层之后,我们需要去点击提示中的确定按钮,由于米大师是在iframe中打开的,所以我们需要先获取到我们当前页frame,这个可以调用刚创建的页面实例page的mainFrame()方法即可获得,如果我们需要获取子frame的话也只需要调用childFrames来进行获取。在获取到米大师对应的frame之后就可以调用midas_frame.$(selector)类jquery的方法进行元素的获取,之后再模拟点击。

第六步:点击Q币支付

第七步:点击完成进入铭牌页,测试完毕,关闭浏览器实例

最后在项目目录中,我们看到,各个步骤的截图都已生成。

体验第二个demo,页面性能检测 Puppeteer Trace API

Trace API 主要是利用Chrome Performance,生成页面性能追踪的文件 trace.json,在Chrome 开发者工具中上传该文件,就可以对里面的火焰图去做分析。 事例代码:

首先,这段代码执行的是模拟iphone6打开林俊杰的《丹宁执着》数专售卖页,并进行性能的分析。主要使用 tracing.start,stop生成trace.json文件

trace.json

接下来我们打开Chrome的开发者工具,进入到Performance栏目下,把刚才的trace.json拖上去就能看到数据了

总结

通过上面两个例子,我们看到了puppeteer可以做UI自动化测试和页面性能检测,其实他的功能远远不止于此,比如还可以做爬虫,去爬取github的文章或是掘金上的博客,总之,自己也是初次尝试,肯定会有更多的功能能够被挖掘出来,希望大家多多交流。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 初识puppeteer
  • puppeteer功能
  • 体验第一个demo,数字专辑自动购买的UI自动化测试
  • 体验第二个demo,页面性能检测 Puppeteer Trace API
  • 总结
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档