Puppeteer前端自动化测试实践

标签: javascript puppeteer 前端工程化 测试环境搭建 | 发表时间:2019-02-20 17:33 | 作者:Athon
出处:https://segmentfault.com/blogs
本篇内容将记录并介绍使用Puppeteer进行自动化网页测试,并依靠约定来避免反复修改测试用例的方案。主要解决页面众多时,修改代码导致的牵连错误无法被发现的运行时问题。文章首发于 个人博客

起因

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

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

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

功能设定

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

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

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

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

图片描述

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

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即可。

总结

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

相关 [puppeteer 前端 自动化] 推荐:

Puppeteer前端自动化测试实践

- - SegmentFault 最新的文章
本篇内容将记录并介绍使用Puppeteer进行自动化网页测试,并依靠约定来避免反复修改测试用例的方案. 主要解决页面众多时,修改代码导致的牵连错误无法被发现的运行时问题. 目前我们在持续开发着一个几十个页面,十万+行代码的项目,随着产品的更迭,总会出现这样的问题. 在对某些业务逻辑或者功能进行添加或者修改的时候(尤其是通用逻辑),这些通用的逻辑或者组件往往会牵扯到一些其他地方的问题.

前端开发流程自动化

- Lee - 《程序员》杂志官网
如今前端工程师需要维护的代码变得极为庞大和复杂,代码维护、打包、发布等流程上浪费的时间精力也越来越多. 精简流程、提高效率,是每一个前端团队都会遇到的问题. 大部分前端团队使用Ant脚本进行这一系列流程的自动操作. Ant主要用于代码构建、打包、部署的自动化操作. 早先主要用于Java开发,但由于它具有接口开放、便于配置、Java跨平台等特性,在前端流程自动化方面同样可以发挥强大的功用.

前端自动化测试探索

- - FEX 百度 Web 前端研发部
测试是完善的研发体系中不可或缺的一环. 前端同样需要测试,你的css改动可能导致页面错位、js改动可能导致功能不正常. 由于前端偏向GUI软件的特殊性,尽管测试领域工具层出不穷,在前端的自动化测试上面却实施并不广泛,很多人依旧以手工测试为主. 本文试图探讨前端自动化测试领域的工具和实践. 一个项目最终会经过快速迭代走向以维护为主的状态,在合理的时机以合理的方式引入自动化测试能有效减少人工维护成本.

前端优化之图片优化自动化

- jinn - 搜索研发部官方博客
随着前端页面越来越复杂,尤其是一些社区型的页面中,图片成了页面中不可或缺的资源,并且随着产品功能的叠加图片大小越来越多. 以下是几个网站的图片所占的比重. 由于图片是二进制文件,并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小. 所以图片优化主要是选择合适的图片格式,在不降低图片质量的情况下去掉图片里的元数据信息.

前端自动化开发工作流模板

- - 氪星人
每种项目都有自己特定的开发流程、工作流程. 从需求分析、设计、编码、测试、发布,一个整个开发流程中,会根据不同的情况形成自己独特的步骤和流程. 一个工作流的过程不是一开始就固定的,而是随着项目的深入而不断地改进,期间甚至会形成一些工具. 例如当年大神们在Linux写C语言,觉得每次编译好多文件好麻烦,就发明了makefile.

关于前端测试bug分类和自动化技术选型的想法

- - Taobao QA Team
下面按照现象和成因分解了前端相关bug,方便后面进行定位. 一部分和前端后端都相关的问题也列举了进来. 这些bug都是实际遇到过的,前端问题五花八门,期待大家共同维护这个mm图. 2常用前端测试相关工具. Fiddler:无差别跟踪每一个请求,可以重定向方便调试;. IE调试器(companion.js等):安装时需要先安装 Microsoft Script Debugger 然后再安装 CompanionJS安装后需要将IE设置中的禁用脚本调试(Internet Explorer)禁用脚本调试(其他)这两个选项去掉.

iPhone App自动化测试

- BeerBubble - Taobao QA Team
         无线客户端的发展很快,特别针对是android和ios两款无线操作系统的客户端应用,相应的测试工具也应运而生,这里主要给大家介绍一些针对iPhone App的自动化测试工具.          首先,我们把这些测试框架分为三大类:接口测试工具、注入式UI测试工具、录放式UI测试工具.

Android Robotium自动化测试

- - CSDN博客移动开发推荐文章
1、官方网站下载测试工程demo. 从 http://code.google.com/p/robotium/downloads/detail?name=ExampleTestProject_v3.6.zip 下载官方的Android测试工程demo. 解压后的文件NotePad、NotePadTest、readme.txt.

Android UiAutomator 自动化测试

- - 操作系统 - ITeye博客
一、一个BUG引发的问题.     如果研发过程中有一个BUG:“不断的切换手机语言出现花屏现象”. 我想,最好的方式应该是自动化测试.     那么,自动化测试可以完成哪些任务呢.     简单的说,那些重复性的测试工作,都可以交给自动化完成:.         1、设置手机的语言.         2、添加、删除、收藏联系人.

Robotium 自动化测试

- - CSDN博客推荐文章
Robotium 自动化测试. Android Studio环境下,在所要测试的Module的build.gradle文件下添加,. Robotium即是对Instrumentation框架方法的封装,所以使用之前需要继承测试类,重写构造器,setUp()和tearDown()方法. 其中继承的是ActivityInstrumentationTestCase2测试类.