微信小程序自动化测试

安装环境

按照官方文档:developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html 进行配置:
执行命令,安装sdk:

npm i miniprogram-automator --save-dev

之后开启工具安全设置中的CLI/HTTP调用功能。关闭状态无法通过脚本对小程序进行自动化操作;

设置/安全设置

手动编写脚本

1. 自定义脚本

我们可以使用jest或者直接通过node环境来执行脚本,以下例子以node环境举例:
引入 SDK 开始编写控制脚本,在项目中任意路径新建一个js文件,如index.js,填充以下内容

const automator = require('miniprogram-automator')
// 根据路径唤起开发者工具
automator.launch({
  cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli', 
  projectPath: '/Users/XXX/XXX/XXX/wechat-app',
}).then(async miniProgram => {
  // 开发者工具被唤醒,接下来执行自定义操作
  const page = await 
  miniProgram.reLaunch('/mps/zfsy/plugin/zufang/pages/home/home')
  await page.waitFor(500)
})

可能遇到问题:开发者工具未安装到默认位置,cliPath路径报错

UnhandledPromiseRejectionWarning: Error: Failed to launch wechat web devTools, please make sure cliPath is correctly specified

解决:mac找到微信小程序开发工具,右键显示包内容,进入Contents/MacOs/找到 cli文件并将其选中,快捷键 :command+option+c复制路径,

路径

之后执行该文件

node index.js

就会发现微信开发者会启动并跳转到/mps/zfsy/plugin/zufang/pages/home/home页面;录得视频太大了贴不上。。全靠脑补;

上面是通过微信sdk的automator.launch来创建端口并进行连接,我们还可以通过命令行来手动开启端口+automator.connect达到该效果。
按照上文说到的路径进入 /Applications/wechatwebdevtools.app/Contents/MacOS/中,之后执行以下代码开启自动化

// 12345 是随便指定的端口
./cli auto --project /Users/XXXX/XXXX/wechat-app --auto-port 12345
官网直接cli了,但是mac不可以!!需要./cli 才可以!!一大坑

执行命令后会自动唤起你的开发者工具并提示!!!


执行
提示成功,emm我这工具好像有点奇怪

启动之后就可以执行我们其他的脚本啦,举个例子下面代码判断的代码筛选项是否为4个

const automator = require('miniprogram-automator')
automator.connect({
  wsEndpoint: 'ws://localhost:12345' //这里就是我们通过cli开启的端口
}).then(async miniProgram => {
    await page.waitFor(500);
    //获取组件filter-ftoy
    const filter = await page.$('filter-ftoy') 
    //获取组件filter-ftoy中class为filter-tab-item的元素
    const filterTabs = await filter.$$(".filter-tab-item")  
    await miniProgram.pageScrollTo(500)
    if(filterTabs.length!==4){
        console.log("error:筛选项渲染成功")
        return;
    }
})

当然我们也可以安装jest,使脚本提示更友好:

npm i miniprogram-automator jest
npm i jest -g

之后执行

const automator = require('miniprogram-automator')
describe('index', () => {
  let miniProgram
  let page
  beforeAll(async () => {
    miniProgram = await automator.connect({wsEndpoint: 'ws://localhost:12345'})
  }, 30000)
// 用例
  it('筛选项个数', async () => {
    const filter = await page.$('filter-ftoy')
    const filterTabs = await filter.$$(".filter-tab-item")
    expect(filterTabs.length).toBe(4)
  })
// ....
  afterAll(async () => {
    // await miniProgram.close()
  })
})
之后执行命令

2. 自动化录制用例并生成脚本

除开手动写测试脚本以外,我们也可以进一步使用开发者工具来实现录制用例后自动开跑:
在菜单栏找到工具/自动化测试,在菜单栏上方点击开始录制,之后按照自己的逻辑进行步骤录制;

菜单栏中的开始录制

随着你的点击滚动等操作,在下图画圈处会有同步的记录;

捕捉动作

并在会在你的项目中新建minitest文件夹(默认可在project.config.json中修改”textRoot“),其中保存的是录制好的用例对应的json文件;

通过共享该文件夹达到协同

录制完成后,可以针对某一步骤进行修改,比如,我把点击的筛选项文字从价格改为并不是价格查找方式改为全局文字匹配

之后我们点击菜单栏上的回放,此时将自动化重新跑一遍刚才录制的用例;


此时发现有报错,因为小程序中点击的就是带有价格字样的筛选项,并不是我们设定的并不是价格,所以报错了;这种自动化可以帮助我们便捷的跑跑主流程,快速大范围进行回归;

这里的用例也可以导出,导出的是个zip包,里面有jest脚本,可二次开发;

微信的云测

地址: developers.weixin.qq.com/miniprogram/dev/devtools/minitest/cloud_problem.html

可将我们项目中录制的用例进行上传,有机器人自动远程帮跑;还可以进行测试计划的管理等,也很方便。 在微信开发者工具提供的自动化测试内,可以选中某个用例并且将其导出成jest脚本或者json

导出后开发zip

再将其中的json导入到云测,进行数据互通;

导入

你可能感兴趣的:(微信小程序自动化测试)