尝鲜小程序自动化测试工具(miniprogram-automator)
发表时间:2021-1-8
发布人:葵宇科技
浏览次数:120
来自官方的介绍:
小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案,从而实现小程序自动化测试的目的。
个人理解,这个小程序自动化工具,就是可以用代码去写一些脚本,可以操作小程序开发者工具
自动的执行一些操作。
官方文档: https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/
运行环境(来自官方文档):
- 安装 Node.js 并且版本大于 8.0
- 基础库版本为 2.7.3 及以上
- 开发者工具版本为 1.02.1907232 及以上
首先 npm init, 初始化一个项目。
执行下面命令安装工具:
npm i miniprogram-automator --save-dev
复制代码
因为需要使用 jest 做为测试的工具,所以需要安装 jest,执行以下两条命令:
npm i jest --save-dev
npm i jest -g
复制代码
在目录下创建 test 文件夹,创建以.spec.js
结尾的文件,在此文件中写入测试代码, 我这里建立index.spec.js
。在 package.json 的 script 中添加:
{
"test": "jest"
}
复制代码
这样npm run test 文件名
就可以运行指定的测试文件。
我在尝鲜的时候在这里花了一些时间在连接小程序开发工具上。
首先需要在微信开发者工具, 设置->通用设置->安全中把服务端口打开。
import automator from 'miniprogram-automator'
describe('index', () => {
let miniProgram
// beforeAll 表示在执行所有测试之前需要的操作
beforeAll(async () => {
miniProgram = await automator.launch({
cliPath: `${cli.bat文件的路径}`, // 如果是默认安装路径,就不需要写了
projectPath: `${项目路径}` //这里需要写上项目路径
})
}, 40000)
})
复制代码
这时候就可以执行命令来测试连接小程序开发者工具了, 如果连接成功的话,在执行命令后,就会自动打开微信开发者工具,如果连接失败,就是命令行工具会关闭,并且打不开微信开发者工具。
一些连接经验:
- 为了路径兼容 windows 和 mac 最好用 node 的 path 模块去拼路径
- cli.bat 是在微信开发者工具的根目录中,记得写路劲的时候要加上.bat 的后缀名
- 如果你是默认路径安装的,如果还是打不开,我自己就是遇到这个情况,我是通过 imweb 团队这篇文章中写的,打开自动化操作服务端口后就可以连接使用了
目前这个工具只有四个 api: Automator, MiniProgram, Page, Element, 点击查看文档。
- Automator 主要提供启动和连接开发者工具的方法。
- MiniProgram 主要提供操作小程序的一些方法, 比如跳转页面,getSystemInfo, 或者执行 wx 对象上的方法
- Page 主要提供操作页面的方法,比如用$获取元素,获取页面的 data,调用页面的方法
- element 主要提供元素的操作方法
主要的使用思路就是用代码来操作小程序的操作。比如可以先用 MiniProgram 的页面跳转方法跳转到指定的页面,用 Page 的 callMethod 来执行相关的方法,再选取需要测试的元素,比较是否符合预期。
这里展示一个小的示例。在电商小程序中,大部分页面都需要一进入就需要请求接口拿数据,我们通常把原始数据经过洗数据层变成前端想要的样子。现在就来测试一下是否初始的数据是我们期望的那样。
步骤是:
- 连接小程序,并且跳转的指定页面
- 等待初始接口调用
- 查看 page 的 data,比较是否符合预期
describe('index', () => {
let miniProgram
let page
// 连接微信开发者工具
beforeAll(async () => {
miniProgram = await automator.launch({
projectPath: `${root}`
})
page = await miniProgram.reLaunch('/pages/plp/plp') // 使用miniProgram的api跳转到指定页面
await page.waitFor(500) // 等待页面请求接口
}, 40000)
it('初始化洗数据后, 初始数据满足要求', async (done)=>{
const data = http://www.wxapp-union.com/await page.data() // 使用page的方法获取当前页面的data
expect(data).toMatchObject({
items: expect.anything(),
facet: expect.anything()
}) // 通过jest的expect方法比较这个data是否符合预期
done()
})
在执行
afterAll(async () => {
await miniProgram.close()
})
})
复制代码
执行 npm run test index
后,看到 pass 的字样,就表示这个测试通过了。
Jest 会自动把通过与不通过的测试用例都展示出来。
小程序自动化测试工具 api 很简单,思路也简单易懂,可能连接的时候需要花一点时间。 实施好自动化测试可以提升程序本身的健壮性。 之后还要花一些时间来深入的使用。