当前，微信小程序的应用数量超过了百万，几乎所有头部互联网公司和独角兽企业都开发了他们对应的小程序，截至2020年8月，小程序的日活用户最新数据为3.39亿，而其中网络购物、餐饮服务占据了全网Top10榜单的一半，由此看出电商在小程序中应用广泛且用户喜爱高，其中测试自动化作为保证产品快速且高质量迭代的重要手段，同样适用于小程序。所以今天就分享一下如何快速搭建一个商城小程序并实现自动化。

　　我选取了GitHub上的优秀开源项目‘海风小店’作为讲解例字，我们只需要申请好小程序账号、部署服务、发布项目即可使用该小程序。

　　源代码地址：https://github.com/iamdarcy/hioshop-miniprogram

　　一、准备工作

　　1、申请小程序账号

　　申请小程序账号只需要按照官网文档说明操作即可，这里我就不展开说了，地址：https://developers.weixin.qq.com/miniprogram/introduction/

　　2、安装本地Git工具&拉取代码

　　新建文件夹hioshop，cd 到该文件夹下后，输入如下命令分别拉取小程序、后台前端、服务端代码，命令：

　　git pull https://github.com/iamdarcy/hioshop-miniprogram

　　git pull https://github.com/iamdarcy/hioshop-admin

　　git pull https://github.com/iamdarcy/hioshop-server

　　3、创建数据库&修改配置

　　①数据库使用的是mysql，推荐管理工具使用Navicat。

　　安装教程参考：https://blog.csdn.net/bobo553443/article/details/81383194

　　②新建数据库，名称可为：hiolabs（注意数据库字符编码为utf8mb4），并导入项目根目录下的hioshop.sql，初始化好原始数据

　　③进入hioshop-server文件夹，更改数据库配置 src/common/config/database.js文件

　　修改数据库名为刚刚建立的数据库名称，填写自己本地数据库地址和账号密码。

　　④填写微信配置和其他设置，打开 src/common/config/config.js文件，如果微信支付、oss服务什么的你都还没申请，都可以先不填写，但是微信的appid 和secret 是必填的。

　　微信的appid 和secret 在微信小程序官网登录以后，在控制台页面的开发->开发设置->开发者ID中

　　二、启动项目

　　1、启动服务端

　　首先我们需要部署并启动服务端，这样我们的小程序和后端管理程序才能连接到本地服务器，使用本地的数据库。

　　打开终端， cd进入hioshop-server文件夹，输入命令：npm start

　　此时控制台打印正常的绿色sql日志信息，说明服务端正确启动。

　　2、调试小程序

　　①下载微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

　　②在工具中导入小程序项目，填写任意项目名称，目录中选择从git上拉取下来的hioshop-miniprogram文件夹，并填写自己的App，点击导入。

　　③导入后等待约1分钟，加载完毕。

　　④修改数据源：此时小程序的数据源还不是你本地的，我们打开hioshop-miniprogram项目下的config文件夹，查看api.js文件文件：

　　默认的数据源地址是：’https://www.hiolabs.com/api/’

　　修改为本地的数据源：'http://localhost:8360/api/'

　　⑤保存配置文件，直接回到小程序开发工具里面，点击’我的‘一栏，并使用微信登录验证，查看数据库有登录信息表示调试成功。

　　3、启动后台管理端

　　打开一个新的终端窗口（原来的终端不要关闭）， cd进入hioshop-admin文件夹

　　①由于npm安装依赖很慢，所以我们选择淘宝镜像cnpm来安装，先安装cnpm

　　输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

　　②直接在根目录中输入命令: cnpm install安装依赖

　　③中途会遇到很多包可能安装不成功，根据提示再多安装几次即可，如

　　④修改数据源：此时管理后端的数据源还不是你本地的，打开src/renderer/config/api.js文件

　　默认的数据源地址是：const rootUrl = 'http://www.hiolabs.com:8360/admin/';

　　修改为本地的数据源：const rootUrl = 'http://127.0.0.1:8360/admin/';

　　⑤启动管理后端项目，在终端输入命令：npm run dev 

　　此时代表项目启动成功，桌面上会出现下图这个程序界面，输入默认的管理员账号密码：

　　用户名：hiolabs，密码：hiolabs

　　⑥登录成功后，我们就可以通过管理后台去管理数据。编辑任意一个商品修改一下名称和价格范围，看看小程序是否正确显示修改过的信息。

　　4、部署服务&发布小程序

　　要想真正将小程序发布到线上，还需要做很多上线前准备工作，由于跟测试内容无关就不展开讲了，可参考链接：https://github.com/iamdarcy/hioshop-server

　　三、小程序自动化

　　1、新建一个终端窗口，cd 到我们刚刚搭建好的商城小程序hioshop-miniprogram文件夹中

　　2、在项目中下载依赖

　　①在项目根目录中下载node依赖

　　终端输入命令： npm i

　　②在hioshop-miniprogram根目录下安装小程序自动化SDK

　　终端输入命令：npm i miniprogram-automator --save-dev 

　　③官方使用Jest测试框架来编写小程序自动化，所以我们还要安装Jest依赖，如果项目没有package.json文件，手动在根目录中创建一个（否则无法正确加入jest依赖）

　　终端输入命令：npm i miniprogram-automator jest

　　终端输入命令：npm i jest -g

　　3、开启工具安全设置中的CLI/HTTP?调用功能（必须开启以上选项，否则 SDK 将无法正常启动工具自动化功能）操作步骤：打开微信开发者工具->设置->安全设置，打开服务端口

　　4、跟其他的测试框架框架一样，使用jest测试只要满足要求2个条件

　　①测试文件名要以spec结果

　　②测试文件后缀为js，jsx，ts，tsx

　　③测试文件需要放任意文件夹下即可

　　比如我们在项目中新建文件夹test，用于存放测试脚本，新建测试脚本index.spec.js

　　5、在index.spec.js文件在编写测试脚本，我们以一个demo为例。

　　①定义好局部变量miniProgram、page

　　②beforeAll函数，在所有测试用例之前执行，一次性设置

　　cliPath:工具 cli 位置，如果没有更改过默认安装位置，可以忽略此项

　　projectPath:被测试项目的绝对路径

　　设置启动等待时间：时间过短，项目无法启动成功会自动化失败

　　③afterAll函数，在所有测试用例之后执行，一般用于断开连接

　　④测试用例：使用expect断言

　　6、保存脚本，测试脚本

　　在终端的项目根目录，输入命令：jest index.spec.js

　　微信开发者软件会自动启动并打开该项目，并自动运行测试脚本测试结果如下：展示被测文件、日志、是否成功、耗时等等信息。

　　具体的Jest框架语法跟pytest类似，大家参考Jtest官网：https://jestjs.io/

　　四、总结

　　实际项目中，我们还会遇到更多棘手的问题如非预计弹窗、控件属性细微差距判断、随机页面延迟、隐藏元素识别、异步加载、越过授权等等，想编写出健壮的UI自动化脚本需要我们有更强大的语言功底和动手去一个个解决实际遇到的问题，大家都遇见过什么奇葩问题，欢迎评论区里一起来交流。

作者：kayie吴嘉怡   

来源：51Testing软件测试网原创