您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

小程序自动化测试实践

时间:2019-09-26 14:13:05  来源:  作者:

曾几何时,大家还不知道什么是小程序,它到底能干些什么,跟App有啥区别,跟H5又有啥区别,但是最近几年,依托于腾讯这颗大树,已经迅速建立起了小程序良好的生态体系,同时也因为APP市场的饱满,以及其开发和推广成本高等问题,目前几乎所有的互联网公司的业务都用起了小程序,而且页面也越来越复杂,涉及的业务场景也越来越多,小程序已经是IT互联网领域一个举足轻重的属性了。

为了应对小程序如火如荼的发展,腾讯在今年5月底推出了miniprogram-automator来支持小程序的自动化测试,本文也主要是基于此项技术来做介绍,让大家对小程序自动化有个初步的了解。

之前小程序自动化的模式

在腾讯推出此项技术之前,其实小程序的自动化测试已经有所开展了,主要有以下几种方式:

1. 通过APP自动化的工具appium来实现的

2. 通过Airtest来实现

3. 通过FAutoTest来实现

这些方法大同小异,基本上都属于黑盒自动化方案。此处不做具体介绍,大家可以自行查阅。

纯Miniprogram-automator模式

Miniprogram-automator是腾讯自研的一套小程序自动化sdk,原理跟大家熟知的自动化测试框架selenium webdriver类似,只是操作的目标不同而已。

运行环境

  • Nodejs版本需要大于8.0
  • 小程序基础库的版本需要大于等于2.7.3,需要注意的此处不是小程序最低支持的基础库的版本,而是本地调试基础库的版本
小程序自动化测试实践

 

  • 开发工具版本 : 1.02.1907232 及以上

SDK安装

npm i miniprogram-automator --save-dev

​框架支持编写语言

目前此框架仅支持通过JAVAscript来书写自动化测试用例。

简单应用

代码片段

const automator = require('miniprogram-automator')
const miniProgram = automator.launch({
 cliPath: '/Applications/wechatwebdevtools.app/Contents/macOS/cli',
 projectPath: '/Users/user/Desktop/miniprogram-quickstart-master/miniprogram-quickstart-master',
 }).then(async miniProgram => {
 const page = await miniProgram.reLaunch('/pages/index/index')
 await page.waitFor(500)
 const element = await page.$('.user-motto')
 console.log(await element.text())
 await miniProgram.close() 
})

运行用例

将上述代码保存到test.js中,然后运行命令如下:

node test.js

代码讲解

const automator = require('miniprogram-automator')

首先需要引入miniprogram-automator自动化包,此处需要注意的是代码文件和miniprogram-automator包的地址的路径问题,否则会出现类似Cannot find module 'miniprogram-automator' 这样的问题出现。

const miniProgram = automator.launch({
 cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli',
 projectPath: '/Users/user/Desktop/miniprogram-quickstart-master/miniprogram-quickstart-master',
 }).then(async miniProgram => {
})

此块创建了miniProgram的实例,该模块提供了控制小程序的方法automator.launch用来启动并连接微信开发者工具。

cliPath: 工具cli位置,默认路径是/Applications/wechatdevtools.app/Contents/MacOS/cli

projectPath: 项目文件路径

此处是通过cli命令行来启动微信开发者工具,要达到此目的,需要注意以下前提条件:

1、确保工具安全设置中已开启 CLI/HTTP 调用功能。

开发者工具菜单中的设置->安全设置->服务端口

小程序自动化测试实践

 

2、开启小程序自动化功能

cli --auto <project_root> --auto-port <port>
const page = await 
miniProgram.reLaunch('/pages/index/index')

此处是通过调用miniProgram提供的relaunch方法创建了一个page的实例,page模块提供了控制小程序页面的方法,relanch方法会关闭所有的页面,打开到应用内指定的页面。里面中的参数是页面的路径,此路径可以从app.json文件中获取到。

await page.waitFor(500) 

此处是调用page的waitFor方法,等待直到指定条件成立,方法的参数是number类型,该参数会被当成超时时长,当经过指定时间后,结束等待。这块属于隐式等待,如果想进行显示等待的话,可以传入string或是function类型。

const element = await page.$('.user-motto')

此处是调用page模块的$方法,用来获取页面元素,参数是元素的选择器字符串,定位element元素时可以在微信开发者工具调试器中wxml处进行调试。

await miniProgram.close() 

此处调用miniProgram模块的close方法关闭与小程序运行的连接并且关闭项目窗口。

Miniprogram-automator + Jest模式

Miniprogram-automator 这个仅仅是小程序自动化的sdk,说直白些,仅提供了一些API,并不是真正意义上的测试框架,这意味着上述的代码仅仅是JavaScript的代码片段,而非真正意义上的自动化测试用例,要达到真正书写自动化测试用例,需要一款测试框架,该框架可以是市面上任意一款node.js的javascript框架。miniprogram-automator负责操作小程序页面的信息,测试框架负责组织和断言。

测试框架选取与安装

此处使用时下比较流行的facebook出品的一款测试框架Jest,该框架集成了众多框架的功能。

npm i jest -g

简单应用

代码片段

const automator = require('miniprogram-automator')
describe('小程序自动化测试初体验', () => {
let miniProgram
 beforeAll(async () => {
 miniProgram = await automator.launch({
 cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli',
 projectPath: '/Users/user/Desktop/miniprogram-quickstart-master/miniprogram-quickstart-master', 
 })
 }, 30000)
 it('测试微信用户座右铭是hello world', async () => {
 const page = await miniProgram.reLaunch('/pages/index/index')
 const user_motto = await page.$('.user-motto')
 expect(await user_motto.text()).toBe('Hello World')
 })
 afterAll(async () => {
 await miniProgram.close()
 })
})

运行用例

将上述代码保存到quickstart.test.js中,然后运行命令如下:

jest quickstart.test.js

测试结果如下

小程序自动化测试实践

 

代码讲解

此处仅讲解与纯miniprogram-automator模式不一样的代码部分。

describe('小程序自动化测试初体验', () => {
let miniProgram
 beforeAll(async () => {
 miniProgram = await automator.launch({
 cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli',
 projectPath: '/Users/user/Desktop/miniprogram-quickstart-master/miniprogram-quickstart-master', 
 })
 }, 30000)

因为Jest集成了Mocha,chai,jsdom,sinon等功能,所以这些框架的语法都可以在Jest应用,describe此处就是起test suite的意义。

beforeAll属于测试生命周期API的一种,用在所有测试用例开始前执行。此方法可以进行一些测试初始化的操作。

30000 属于设置的Jest的超时时间,因为工具项目窗口启动初次编译需要一定时长,Jest 默认 5 秒超时太短,所以需要修改如此。

it('测试微信用户座右铭是hello world', async () => {
 const page = await miniProgram.reLaunch('/pages/index/index')
 const user_motto = await page.$('.user-motto')
 expect(await user_motto.text()).toBe('Hello World')
​ })

此处属于具体的测试用例,可以用it,也可以用test关键字。

toBe是matcher函数,使用expect和”matcher”函数结合验证属于具体的断言部分。判断实际得到的结果跟预期结果是否一致。

afterAll(async () => {
 await miniProgram.close()
})

afterAll也属于测试生命周期API的一种,用来在所有用例执行完毕后执行,此处可以进行一些清理收尾工作。

注:本文是针对小程序快速启动模板项目https://github.com/wechat-miniprogram/miniprogram-quickstart 做的自动化测试。



Tags:小程序 自动化测试   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
曾几何时,大家还不知道什么是小程序,它到底能干些什么,跟APP有啥区别,跟H5又有啥区别,但是最近几年,依托于腾讯这颗大树,已经迅速建立起了小程序良好的生态体系,同时也因为APP市场的...【详细内容】
2019-09-26  Tags: 小程序 自动化测试  点击:(524)  评论:(0)  加入收藏
▌简易百科推荐
一、项目背景随着小程序在用户规模和商业化上取得的极大成功,各大平台都推出了自己的小程序。然而这些平台的小程序开发在语法上又不尽相同,不同平台小程序代码的维护需要投入...【详细内容】
2021-11-05  携程技术    Tags:小程序   点击:(65)  评论:(0)  加入收藏
作者:灰灰来源:JS每日一题 一、背景传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态...【详细内容】
2021-10-29  Nodejs开发    Tags:微信小程序   点击:(43)  评论:(0)  加入收藏
总结列举微信小程序开放能力清单 硬件能力 蓝牙 NFC读写 连接WIFI设备 开放能力 ...【详细内容】
2021-09-27  软件开发分享    Tags:微信小程序   点击:(60)  评论:(0)  加入收藏
核心商城(CoreShop)介绍核心小程序商城系统(CoreShop) 是基于 Asp.Net 5.0、Uni-App开发、支持可视化布局的小程序商城系统;前后端分离,支持分布式部署,跨平台运行;拥有分销、代理、...【详细内容】
2021-07-20  码农也有梦想    Tags:小程序商城   点击:(115)  评论:(0)  加入收藏
介绍Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3还是Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发...【详细内容】
2021-07-13  爱分享Coder    Tags:小程序   点击:(204)  评论:(0)  加入收藏
首先明确几个概念1. W3C:指万维网联盟(World Wide Web Consortium),是一个国际的标准的制定机构。2. H5(HTML5,HyperText Markup Language 5的缩写),HTML5 是由W3C制定的新HTML标...【详细内容】
2021-07-06  畅游零和一的海洋    Tags:微信小程序   点击:(153)  评论:(0)  加入收藏
在开发微信公众号时,需要不时请求URL和数据封装。为了不做重复的工作。提取公共部分进行封装。产生了相应的公众类。今天先来写下请求类,代码如下:public class HttpRequestP...【详细内容】
2021-06-16  java浮萍  今日头条  Tags:公共类   点击:(134)  评论:(0)  加入收藏
小程序上线后,改版了很多次,包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的,本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中,不...【详细内容】
2021-06-08    程序猿久一  Tags:微信小程序   点击:(207)  评论:(0)  加入收藏
自从2019年微信公开课Pro在微信之夜演示《跳一跳》以来,微信小游戏已经不知不觉走过的三年,这三年中我们可以明显看到微信对小游戏的扶持,对于微信开发者来说,微信小游戏开发以...【详细内容】
2021-05-25  开课吧科科  今日头条  Tags:微信小游戏   点击:(212)  评论:(0)  加入收藏
学习编程从hello world开始。学习微信小程序开发首先要安装一个微信开发者工具,官网上免费下载童叟无欺,下载完傻瓜式安装即可。 双击微信开发者工具,然后选择小程序,然后点击...【详细内容】
2021-05-12  程序员fearlazy  fearlazy  Tags:微信小程序   点击:(268)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条