1. 前言
最近前端工作比较轻松、故在思考能否把这部分重复的工作交给程序自动来进行呢、省时省力。
2. 何谓小程序自动化
小程序自动化SDK为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。
大白话翻译就是: 让开发者工具能按照代码的执行顺序自动在页面上完成点击、输入等操作(即模拟用户操作), 再将操作后的页面表现与预期想要的结果做对比得到测试结论(断言)。
官网链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/
小程序自动化测试SDK:https://www.npmjs.com/package/miniprogram-automator
小程序自动化测试SDK具备的特性:
A. 控制小程序跳转到指定页面;
B. 获取小程序页面数据;
C. 获取小程序页面元素状态;
D. 触发小程序元素绑定事件;
E. 往AppService注入代码片段;
F. 调用wx对象上任意接口;
G. ...
3. 小程序自动化SDK
3.1 运行环境
A. 安装Node.js并且版本大于8.0;
B. 基础库版本为2.7.3及以上;
C. 开发者工具版本为1.02.1907232及以上;
D. 要做自动化测试的项目(后面会介绍哦)。
如何查看&修改基础库版本，请见下图。
如何查看开发者工具版本、请见下图。
需要做自动化测试的项目(3选1):
A. 借助微信开发者工具新建个项目;
B. 开发者可直接从github下载小程序官方组件源码下来(小程序官方组件源码git地址: https://github.com/wechat-miniprogram/miniprogram-demo;
C. 真实的项目。
在本篇文章中、为尽可能直白讲清楚实践步骤、采取方案A新建个项目(下文所有的演示都是基于该项目)。
先来看看大概的一个目录结构如下:
若具备以上运行环境了，请继续往下看。
3.2 安装自动化测试SDK
Tips: cd 进入到项目根目录下, 终端执行如下命令。
npm i miniprogram-automator --save-dev
该命令执行成功后，在终端会输出如下内容，说明安装成功。
终端也有些warn告警，暂不影响使用，故先不处理。
3.3 初体验
A. 开启工具安全设置中的CLI/HTTP调用功能。
具体操作指南如下: 打开微信开发者工具->设置-> 安全设置 -> 启用服务端口。
有关于CLI/HTTP功能的详细介绍、请戳此链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/http.html
B. 先准备个需要做自动化测试的页面(为方便、下面会以最简单的demo来演示)。
// 想要测试的页面index
// index.wxml
<view class="usermotto">
<text class="user-motto" bind:tap="tapFn">{{motto}}</text>
</view>
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
},
tapFn (e) {
console.log(e,'测试自动化结果')
}
})
// index.wxss
.usermotto {
margin-top: 200px;
text-align: center;
}
C. 在项目中新建文件，以.spec.js结尾(本文以在项目根目录下新建index.spce.js为例子), 输入类似如下内容（在实际过程中根据自己的项目修改即可）。
const automator = require('miniprogram-automator')
automator.launch({
cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项
projectPath: '/Users/susan.li/files/mini-demo', // 项目文件地址
}).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.attribute('class'))
await element.tap()
await miniProgram.close()
})
这里有3个点需要注意:
1.修改cli工具的路径(若您没更改过微信开发者工具的默认安装路径、可忽略此项、若改过安装路径的、就需要自行寻找安装路径是什么然后补充到这);
2.修改项目的文件路径(这里推荐绝对路径);
3.修改下面demo中实际想要操作的元素。
D.在终端输入如下命令、就在执行自动化测试结果了。
node index.spec.js
我们来看看命令执行的全过程。
这里需要留意一点, 在自动化测试启动微信开发者工具时、留意右侧是否出现下图内容[启动自动化端口]。
紧接着我们看看开发者工具是否有打印出相关内容。
最后我们再看看终端, 你会发现终端会输出如下内容, 跟你代码的预期是符合的。
本演示demo想实现的是: 通过自动化测试SDK模拟用户点击Hello World文本(tap操作)、看能否正常执行bindtap里面的方法。
至此，小程序自动化测试算是开了个头, 请接着往下看。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
