微信小程序自动化测试完全实现。

参考:官方文档

单个测试文件测试流程

  1. 安装小程序自动化SDK配合jest实现小程序自动化测试:miniprogram-automatorjest
  2. 示例 index.spec.js
1
2
3
4
5
6
7
8
9
10
11
12
const automator = require('miniprogram-automator')
automator.launch({
cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli', // 工具 cli 位置
projectPath: 'Users/liugezhou/Desktop/miniprogram', // 项目文件地址
}).then(async miniProgram => {
const page = await miniProgram.reLaunch('/pages/index/index')
await page.waitFor(500)
const element = await page.$('.btn')
await element.tap()
await miniProgram.close()
})

  1. 启动 node index.spec.js,完成单个示例测试。

自动化测试

  1. 在小程序根目录下新建,tests/pages/liugezhou.spec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const automator = require('miniprogram-automator');

describe('index', () => {
let miniProgram;
let page;
const wsEndpoint = 'ws://127.0.0.1:9420';
beforeAll(async() => {
miniProgram = await automator.connect({
wsEndpoint: wsEndpoint
});
}, 30000);

it('test liugezhou/index.wxml', async() => {
page = await miniProgram.reLaunch('/pages/liugezhou/index')
await page.waitFor(500)
const element = await page.$('.liugezhou')
console.log(await element.attribute('class'))
await element.tap()
});
});

  1. package.json中添加scripts命令
1
"e2e": "jest ./tests/pages liugezhou.test.js --runInBand"
  1. 关闭开发工具客户端,
1
2
3
cd  /Applications/wechatwebdevtools.app/Contents/MacOS/ 

./cli --auto /Users/liugezhou/Desktop/miniprogram --auto-port 9420
  1. 在终端根目录下执行npm run e2e即可发现测试通过

  2. miniProgram提供了控制小程序的方法
    下面的方法用熟之后,可以熟练的编写自动化测试代码了。

1
2
3
miniProgram = await automator.connect({
wsEndpoint,
})
  • miniProgram.pageStack():获取小程序页面堆栈
  • miniProgram.navigateTo():保留当前页面,跳转到某个页面
  • miniProgram.redirectTo():关闭当前页面,跳转到某个页面
  • miniProgram.navigateBack():关闭当前页面,返回上一页面或多级页面
  • miniProgram.reLaunch(): 关闭所有页面,打开到应用内的某个页面
  • miniProgram.currentPage(): 获取当前页面(路径、参数等)。
  • miniProgram.systemInfo():获取系统信息
  • miniProgram.callWxMethod(method,params):调用 wx 对象上的指定方法,调用的方法名。
  • miniProgram.pageScrollTo(number):将页面滚动到目标位置(同wx.pageScrollTo())
  • miniProgram.screenshot({path:‘’}):对当前页面进行截图,若不传options,则返回base64编码
  • miniProgram.exposeFunction(name,bindingFunction):在 AppService 全局暴露方法,供小程序侧调用测试脚本中的方法。
  • miniProgram.stopAudits({path:‘’}):停止体验评分并获取报告
  • miniProgram.disconnect():断开与小程序运行时的连接
  • miniProgram.close():断开与小程序运行时的连接并关闭项目窗口。
  • miniProgram.on(‘exception’,err=>{}):页面JS出错时触发

  • page.path: 页面路径
  • page.query: 页面参数
  • page.$(“.demo”): 获取页面元素
  • page.$$(“.list”): 获取页面元素数组
  • page.waitFor():等待直到指定条件成立。
    • number - 指定时间之后,结束等待
    • string - 参数被当成选择器,当该选择弃元素个数不为0时,结束等待
    • Function - 断言函数,返回true时,结束等待。
  • page.data():获取页面渲染数据
  • page.setData():设置页面渲染数据
  • page.size():获取页面的可滚动宽度和高度
  • page.scrollTop():获取页面的滚动位置
  • page.callMethod():调用页面指定方法

element 通过 page.$()获得

  • element.tagName:标签名,小写
  • element.$():在元素范围内获取元素
  • element.$$():在元素范围内获取元素数组
  • element.size():获取元素的高度和宽度
  • element.offset():获取元素的绝对位置 left和top
  • element.text():获取元素文本
  • element.attribute():获取元素特性
  • element.property():获取元素属性
  • element.wxml():获取元素wxml
  • element.value():获取元素值
  • element.style(‘color’):获取元素样式值
  • element.tap(): 点击元素
  • element.longpress(): 长按元素
  • element.touchstart(): 手指开始触摸元素
  • element.trigger(str,obj):触发元素事件
  • element.input(str):输入文本,仅 input、textarea 组件可以使用
  • element.callMethod():调用组件实例指定方法,仅自定义组件可以使用。
  • element.data():获取组件实例渲染数据,仅自定义组件可以使用。

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=2ptwka3frvuok