Jest框架
4.1 引入Jest框架
小程序自动化SDK本身不提供测试框架。
故我们可将它与市面上流行的任意Node.js测试框架来结合使用， 以此来达到编写小程序测试用例的目的。
根据官网的介绍，我们使用Jest测试框架来编写实际的小程序自动化测试。
A. cd到项目根目录下，执行如下命令安装依赖
npm i miniprogram-automator jest
B. 执行如下命令全局安装Jest框架
npm i jest -g
在安装过程中遇到了如下报错:
根据报错提示应该是权限不够，故执行如下命令（实际过程开发者可根据自身报错去处理）。
// 看看命令行、应该会提示你要输入密码。
sudo npm i jest -g
C. 开启工具安全设置中的CLI/HTTP调用功能(同2.4打开步骤)。
自此，Jest测试框架已搭建完成，可进入到下一步。
4.2 Jest初体验
A. 编写脚本（目标：自动启动微信开发者工具&&打开该项目）
const automator = require('miniprogram-automator')
describe('index', () => {
let miniProgram
let page
beforeAll(async () => {
miniProgram = await automator.launch({
projectPath: '/Users/susan.li/files/shop-mini',
cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli'
})
page = await miniProgram.reLaunch('/pages/index/index')
await page.waitFor(5000)
}, 30000)
afterAll(async () => {
await miniProgram.close()
})
})
B. 开启工具安全设置中的CLI/HTTP调用功能（同2.4打开步骤）
C. 关闭后重新启动小程序到首页
D. 关闭工具安全设置中的CLI/HTTP调用功能（同2.4打开步骤）并关闭微信开发者工具
E. 在项目根目录下，执行如下脚本
jest index.spec.js
哎呀妈呀报错了，look look：
解决方案: 在项目目录下执行如下命令。
npm init
安装完成后，项目根目录下就多了package.json文件了。
那我们再次执行E步骤：哎呀妈呀，再次报错了。look look：
报错解析：脚本里面至少要包含一个测试，即类似it('xxx', () => expect('xxx').toBe('xxx'))的代码，详细用法可以搜索下jest测试框架的教程。
解决方案：加上至少一个测试用例（下面例子演示的是模拟文本的tap事件）。
最终的脚本代码如下：
const automator = require('miniprogram-automator')
describe('index', () => {
let miniProgram
let page
beforeAll(async () => {
miniProgram = await automator.launch({
projectPath: '/Users/susan.li/files/mini-demo',
cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli'
})
page = await miniProgram.reLaunch('/pages/index/index')
await page.waitFor(5000)
}, 30000)
it('点击hello world文本', async () => {
await page.waitFor(3000)
// 通过.user-motto选择目标元素
const tabbar = await page.$('.user-motto')
tabbar.tap()
})
// afterAll(async () => {
// await miniProgram.close()
// })
})
那我们再次执行E步骤：我们会发现在开发者工具下有执行tap方法。
脚本执行完毕后，终端会输出如下内容，告诉执行结果：
4.3 进阶玩法
上述做法需要在代码内注入微信开发者工具的安装路径&&项目路径，不同项目成员内的配置是不同，那我们思考下能否做成隔离的？
即项目本身只维护测试用例脚本，至于在哪里执行脚本，执行的项目目录是什么？由开发者自行决定。
通过命令打开开发版微信开发者工具的自动化接口并连接自动化接口。
A. 找到微信开发者工具安装目录，在该目录终端下输入如下命令：
// 进入微信开发者工具的安装目录(笔者的目录结构是: /Applications/wechatwebdevtools.app) -> /微信开发者工具安装目录/Contents/MacOS
cd /Applications/wechatwebdevtools.app/Contents/MacOS
// 找到要执行自动化测试的目录(笔者项目路径是:/Users/susan.li/files/mini-demo)
cli --auto /Users/susan.li/files/mini-demo --auto-port 9420
Tips: 自动化端口是独立于服务端口的(你在开发者工具->设置->安全->打印出来的52968其实是服务器端口)，我们需要在终端看到如下提示才意味着成功打开了自动化端口(9420)。
// 要看到这句话、这句话很关键！！！！！！
✔ Open project with automation enabled success /Users/susan.li/files/mini-demo
我们看看实际效果图:
命令运行成功后会自动打开开发者工具&项目，并在右上角有如下提示。
B. 找到自动化测试的项目根目录下，执行如下命令安装SDK（若已安装可忽略）
// 若需要安装、安装命令如下:
npm i miniprogram-automator --save-dev
C. 引入自动化测试SDK，在脚本中连接自动化操作端口
const automator = require('miniprogram-automator');
const miniProgram = automator.connect({
wsEndpoint: 'ws://localhost:9420',
})
D. 根据业务需要编写对应的脚本并进行相关操作
const automator = require('miniprogram-automator')
describe('index', () => {
let miniProgram
// 运行测试前调用、启用自动化端口9420
beforeAll(async () => {
miniProgram = await automator.connect({
wsEndpoint: 'ws://localhost:9420',
})
})
// 运行测试后调用
afterAll(() => {
miniProgram.disconnect();
})
// 自动化测试内容
it('点击hello world文本', async () => {
// 获取页面相关信息
const page = await miniProgram.reLaunch('/pages/index/index')
// 通过.user-motto选择目标元素
const tabbar = await page.$('.user-motto')
// 模拟tap事件
tabbar.tap()
})
})
E. 脚本准备完毕，执行如下命令做自动化测试（开发者工具是打开的状态）
jest index.spec.js
若测试通过在终端会有如下PASS提示，结果如图所示：
5. 写在最后
作为电商类小程序，保障线上业务的稳定运行，要求各页面各模块在异常情况下进行适当的兜底处理，确保给到用户最基础的用户体验。
此文仅作为自动化测试的初入门，接下来会结合实际业务去做进一步梳理演示。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
