小程序自动化测试实践

曾几何时，大家还不知道什么是小程序，它到底能干些什么，跟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> --auto-port <port>
const page = await 
miniProgram.reLaunch('/pages/index/index')
/<port>/<project>

此处是通过调用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 做的自动化测试。

大家对小程序自动化测试有什么想法和意见，欢迎回复和讨论!