详解Puppeteer前端自动化测试实践


Posted in Javascript onFebruary 21, 2019

起因

目前我们在持续开发着一个几十个页面,十万+行代码的项目,随着产品的更迭,总会出现这样的问题。在对某些业务逻辑或者功能进行添加或者修改的时候(尤其是通用逻辑),这些通用的逻辑或者组件往往会牵扯到一些其他地方的问题。由于测试人员受限,我们很难在完成一个模块单元后,对所有功能重新测试一遍。
同时,由于环境及数据的区别,(以及在开发过程中对代码完备性的疏忽),代码会在某些特殊数据的解析和和展示上出现问题,在开发和测试中很难去发现。总的来说,我们希望有一个这样的工具,帮我们解决上述几个问题:

  1. 在进行代码和功能改动后,能够自动访问各个功能的页面,检测问题
  2. 针对大量的数据内容,进行批量访问,检测对于不同数据的展示是否存在问题
  3. 测试与代码功能尽量不耦合,避免每次上新功能都需要对测试用例进行修改,维护成本太大
  4. 定期的测试任务,及时发现数据平台针对新数据的展示完备性

其中,最重要的问题,就是将测试代码与功能解耦,避免每次迭代和修改都需要追加新的测试用例。我们如何做到这一点呢?首先我们来梳理下测试平台的功能。

功能设定

由于我们的平台主要是进行数据展示,所以我们在测试过程中,主要以日常的展示数据为重心即可,针对一些复杂的表单操作先不予处理。针对上述的几个问题,我们针对自动化测试工具的功能如下:

  1. 依次访问各个页面
  2. 访问各个页面的具体内容,如时间切换、选项卡切换、分页切换、表格展开行等等
  3. 针对数据表格中的详情链接,选择前100条进行访问,并进行下钻页的继续测试
  4. 捕获在页面中的错误请求
  5. 对错误信息进行捕获,统计和上报

根据以上的梳理,我们可以把整个应用分为几个测试单元

  • 页面单元,检测各功能页面访问的稳定性
  • 详情页单元,根据页面的数据列表,进行批量的详情页跳转,检测不同参数下详情页的稳定性
  • 功能单元,用于检测页面和详情页各种展示类型点击切换后是否产生错误

详解Puppeteer前端自动化测试实践

通过这样的划分,我们针对各个单元进行具体的测试逻辑书写用例,这样就可以避免再添加新功能和页面时,频繁对测试用例进行修改了。

Puppeteer

带着上面我们的需求,我们来看下Puppeteer的功能和特性,是否能够满足我们的要求。

文档地址

Puppeteer是一个Node库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行,但是可以通过修改配置文件运行“有头”模式。

我们可以使用Puppeteer完成以下工作:

  • 访问页面,进行截图
  • 自动进行键盘输入,提交表单
  • 模拟点击等用户操作
  • 等等等等。。

我们来通过一些小案例,来介绍他们的基本功能:

访问一个带有ba认证的网站

puppeteer可以创建page实例,并使用goto方法进行页面访问,page包含一系列方法,可以对页面进行各种操作。

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 // ba认证
 await page.authenticate({
  username,
  password
 });
 // 访问页面
 await page.goto('https://example.com');
 // 进行截图
 await page.screenshot({path: 'example.png'});

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

访问登陆页面,并进行登录

首先,对于SPA(单页面应用),我们都知道,当页面进入后,客户端代码才开始进行渲染工作。我们需要等到页面内容渲染完成后,再进行对应的操作。我们有以下几种方法来使用

waitUntil

puppeteer针对页面的访问,切换等,提供了waitUntil参数,来确定满足什么条件才认为页面跳转完成。包括以下事件:

  • load - 页面的load事件触发时
  • domcontentloaded - 页面的DOMContentLoaded事件触发时
  • networkidle0 - 不再有网络连接时触发(至少500毫秒后)
  • networkidle2 - 只有2个网络连接时触发(至少500毫秒后)

通过waitUnitl,我们可以当页面请求都完成之后,确定页面已经访问完成。

waitFor

waitFor方法可以在指定动作完成后才进行resolve

// wait for selector
await page.waitFor('.foo');
// wait for 1 second
await page.waitFor(1000);
// wait for predicate
await page.waitFor(() => !!document.querySelector('.foo'));

我们可以利用waitForSelector方法,当登录框渲染成功后,才进行登录操作

// 等待密码输入框渲染
await page.waitFor('#password');
// 输入用户名
await page.type('input#username', "username");
// 输入密码
await page.type('input#password', "testpass");

// 点击登录按钮
await Promise.all([
 page.waitForNavigation(), // 等跳转完成后resolve
 page.click('button.login-button'), // 点击该链接将间接导致导航(跳转)
]);

await page.waitFor(2000)

// 获取cookies
const cookies = await page.cookies()

针对列表内容里的链接进行批量访问

主要利用到page实例的选择器功能

const table = await page.$('.table')
const links = await table.$$eval('a.link-detail', links =>
 links.map(link => link.href)
);

// 循环访问links
...

进行错误和访问监听

puppeteer可以监听在页面访问过程中的报错,请求等等,这样我们就可以捕获到页面的访问错误并进行上报啦,这也是我们进行测试需要的基本功能~

// 当发生页面js代码没有捕获的异常时触发。
page.on('pagerror', () => {})
// 当页面崩溃时触发。
page.on('error', () => {})
// 当页面发送一个请求时触发
page.on('request')
// 当页面的某个请求接收到对应的 response 时触发。
page.on('response')

通过以上的几个小案例,我们发现Puppeteer的功能非常强大,完全能够满足我们以上的对页面进行自动访问的需求。接下来,我们针对我们的测试单元进行个单元用例的书写

最终功能

通过我们上面对测试单元的规划,我们可以规划一下我们的测试路径

访问网站 -> 登陆 -> 访问页面1 -> 进行基本单元测试 -> 获取详情页跳转链接 -> 依次访问详情页 -> 进行基本单元测试

-> 访问页面2 ...

所以,我们可以拆分出几个大类,和几个测试单元,来进行各项测试

// 包含基本的测试方法,log输出等
class Base {}

// 详情页单元,进行一些基本的单元测试
class PageDetal extends Base {}

// 页面单元,进行基本的单元测试,并获取并依次访问详情页
class Page extends PageDetal {}

// 进行登录等操作,并依次访问页面单元进行测试
class Root extends Base {}

同时,我们如何在功能页面变化时,跟踪到测试的变化呢,我们可以针对我们测试的功能,为其添加自定义标签test-role,测试时,根据自定义标签进行测试逻辑的编写。

例如针对时间切换单元,我们做一下简单的介绍:

// 1. 获取测试单元的元素
const timeSwitch = await page.$('[test-role="time-switch"]');

// 若页面没有timeSwitch, 则不用进行测试
if (!timeSwitch) return

// 2. time switch的切换按钮
const buttons = timeSwitch.$$('.time-switch-button')

// 3. 对按钮进行循环点击
for (let i = 0; i < buttons.length; i++) {
 const button = buttons[i]

 // 点击按钮
 await button.click()

 // 重点! 等待对应的内容出现时,才认定页面访问成功
 try {
  await page.waitFor('[test-role="time-switch-content"]')
 } catch (error) {
  reportError (error)
 }

 // 截图
 await page.screenshot()
}

上面只是进行了一个简单的访问内容测试,我们可以根据我们的用例单元书写各自的测试逻辑,在我们日常开发时,只需要对需要测试的内容,加上对应的test-role即可。

总结

根据以上的功能划分,我们很好的将一整个应用拆分成各个测试单元进行单元测试。需要注意的是,我们目前仅仅是对页面的可访问性进行测试,仅仅验证当用户进行各种操作,访问各个页面单元时页面是否会出错。并没有对页面的具体展示效果进行测试,这样会和页面的功能内容耦合起来,就需要单独的测试用例的编写了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
微信小程序实现简单的select下拉框
Nov 23 Javascript
javascript中join方法实例讲解
Feb 21 #Javascript
React 组件渲染和更新的实现代码示例
Feb 21 #Javascript
vue图片上传本地预览组件使用详解
Feb 20 #Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 #Javascript
浅谈小程序 setData学问多
Feb 20 #Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 #Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
javascript事件问题
2009/09/05 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript如何自定义trim方法
2015/07/28 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
详解jquery和vue对比
2019/04/16 jQuery
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[05:05]第三天的dota2
2013/07/29 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python生成随机红包的实例写法
2019/09/02 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
新锐科技Java程序员面试题
2016/07/25 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
关于母亲节的感言
2014/02/04 职场文书
社区志愿者活动方案
2014/08/18 职场文书
授权委托书公证
2014/09/14 职场文书
2014年团队工作总结
2014/11/24 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书