B、首先准备一个需要手动测试的页面（为了方便，下面用最简单的demo来演示）
// 想要测试的页面index
// index.wxml
<view class="usermotto">
<text class="user-motto" bind:tap="tapFn">{{motto}}
// 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工具的路径（如果您没有更改Momo开发者工具的默认安装路径，则可以忽略此项，如果您更改了安装路径，则需要了解安装路径是什么并在这里添加）；
如果您不知道如何查看软件安装位置，请点击此链接：juejin.cn/post/697060...
2.更改项目的文件路径（这里建议使用绝对路径）；
D、在终端输入以下命令，执行手动测试结果。
node index.spec.js
我们来看看命令执行的整个过程。
这里需要注意一件事。 手动测试启动Momo开发者工具时，注意【启动手动端口】旁边是否出现右侧内容。
那我们看看开发者工具有没有复制相关内容
最后我们再看一下终端，你会发现终端会输出如下内容，符合你代码的预期。
本demo想要实现的是通过手动测试SDK来模拟用户点击HelloWorld文本（tap操作），看看bindtap上面的技能可以正常执行。
问题：如果执行nodeindex.spec.js时遇到如下错误，请问是什么原因？
(node:2903) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'attribute' of null
at automator.launch.then (/xxx/index.spec.js:38:29)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:2903) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:2903) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
至此，小程序的手动测试已经开始，请继续阅读。
B.执行以下命令全局安装Jest框架
npm i jest -g
安装过程中，遇到如下错误：
根据错误信息测试智商小程序素材网站，应该是权限不够，所以执行以下命令（实际流程开发者可以根据自己的错误报告处理）
// 看看命令行、应该会提示你要输入密码。
sudo npm i jest -g
C、在工具安全设置中启用CLI/HTTP调用功能（同2.4开启步骤）
至此，Jest测试框架已经搭建完毕，可以进行下一步了。
4.2 第一次使用 Jest 的体验
A.编译脚本（目标：手动启动Momo开发者工具&&打开项目）
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开启步骤）并关闭Momo开发者工具
E、在项目根目录下，执行以下脚本
jest index.spec.js
哎呀，我犯了一个错误，你看一下。
解决办法：在项目目录下执行以下命令。
npm init
安装完成后，项目根目录下会多出package.json文件。
然后我们再次执行步骤E：哎呀，我又报错了，你看看。
错误分析：脚本中必须至少包含一个测试，即类似于它的代码('xxx',()=>expect('xxx').toBe('xxx'))。 详细使用方法可以搜索jest测试框架教程。
解决方案：添加至少一个测试用例（下面的例子演示了模拟文本的点击风暴）。
最终脚本代码如下：
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 进阶玩法
上述方法需要将Momo开发者工具的安装路径&&项目路径注入到代码中。 不同项目成员中的配置是不一样的，那么我们想一想，可以隔离吗？
也就是说，项目本身只维护测试用例脚本。 至于在哪里执行脚本以及执行哪些项目目录，则由开发人员决定。
使用该命令打开Momo开发者工具开发版的手动界面并连接到手动界面。 A.找到Momo开发者工具的安装目录，在该目录的终端中输入以下命令：
// 进入微信开发者工具的安装目录(笔者的目录结构是: /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.脚本准备好，执行以下命令进行手动测试（保持smile开发者工具打开）
jest index.spec.js
如果测试通过，终端上会出现如下PASS提示，结果如图：
5.写在最后
作为一个电商小程序，保证线上业务的稳定运行，要求每个页面、每个模块在异常情况下进行适当的处理，保证用户最基本的用户体验。
本文只是对手动测试的介绍，后续会结合实际业务进一步梳理和论证。
如有错误，请留言，我们会及时改正！
如果您觉得对您有帮助，请点赞或者收藏！
