评论

【新人报道】尝鲜小程序自动化测试工具(miniprogram-automator)

小程序自动化测试工具的基本使用

测试驱动简介

关于测试驱动的快速入门,可以看之前的这篇文章
换一种思路写代码,前端测试驱动开发模式(TDD)快速入门》
,这篇文章就跳过一些基础的概念。

小程序自动化

来自官方的介绍:
小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案,从而实现小程序自动化测试的目的。

个人理解,这个小程序自动化工具,就是可以用代码去写一些脚本,可以操作小程序开发者工具自动的执行一些操作。

官方文档:
https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/

工具的安装和配置

运行环境(来自官方文档):

  • 安装  Node.js  并且版本大于 8.0
  • 基础库版本为  2.7.3  及以上
  • 开发者工具版本为  1.02.1907232  及以上

首先 npm init, 初始化一个项目。

执行下面命令安装工具:

npm i miniprogram-automator --save-dev

因为需要使用 jest 做为测试的工具,所以需要安装 jest,执行以下两条命令:

npm i jest --save-dev
npm i jest -g

在目录下创建 test 文件夹,创建以.spec.js结尾的文件,在此文件中写入测试代码, 我这里建立index.spec.js。在 package.json 的 script 中添加:

{
    "test": "jest"
}

这样npm run test 文件名就可以运行指定的测试文件。

连接小程序开发工具

我在尝鲜的时候在这里花了一些时间在连接小程序开发工具上。

首先需要在微信开发者工具, 设置->通用设置->安全中把服务端口打开。

index.spec.js中添加连接的代码:

import automator from 'miniprogram-automator'


describe('index', () => {
  let miniProgram

  // beforeAll 表示在执行所有测试之前需要的操作
      beforeAll(async () => {
        miniProgram = await automator.launch({
          cliPath: `${cli.bat文件的路径}`, // 如果是默认安装路径,就不需要写了
          projectPath: `${项目路径}` //这里需要写上项目路径
        })
      }, 40000)

})

这时候就可以执行命令来测试连接小程序开发者工具了, 如果连接成功的话,在执行命令后,就会自动打开微信开发者工具,如果连接失败,就是命令行工具会关闭,并且打不开微信开发者工具。

一些连接经验:

  • 为了路径兼容 windows 和 mac 最好用 node 的 path 模块去拼路径
  • cli.bat 是在微信开发者工具的根目录中,记得写路劲的时候要加上.bat 的后缀名
  • 如果你是默认路径安装的,如果还是打不开,我自己就是遇到这个情况,我是通过 imweb 团队这篇文章中写的,打开自动化操作服务端口后就可以连接使用了

基本使用思路

目前这个工具只有四个 api: Automator, MiniProgram, Page, Element, 点击查看文档。

  • Automator 主要提供启动和连接开发者工具的方法。
  • MiniProgram 主要提供操作小程序的一些方法, 比如跳转页面,getSystemInfo, 或者执行 wx 对象上的方法
  • Page 主要提供操作页面的方法,比如用$获取元素,获取页面的 data,调用页面的方法
  • element 主要提供元素的操作方法

主要的使用思路就是用代码来操作小程序的操作。比如可以先用 MiniProgram 的页面跳转方法跳转到指定的页面,用 Page 的 callMethod 来执行相关的方法,再选取需要测试的元素,比较是否符合预期。

示例

这里展示一个小的示例。在电商小程序中,大部分页面都需要一进入就需要请求接口拿数据,我们通常把原始数据经过洗数据层变成前端想要的样子。现在就来测试一下是否初始的数据是我们期望的那样。

步骤是:

  1. 连接小程序,并且跳转的指定页面
  2. 等待初始接口调用
  3. 查看 page 的 data,比较是否符合预期
describe('index', () => {
  let miniProgram
  let page
  // 连接微信开发者工具
  beforeAll(async () => {
    miniProgram = await automator.launch({
      projectPath: `${root}`
    })
    page = await miniProgram.reLaunch('/pages/plp/plp') // 使用miniProgram的api跳转到指定页面
    await page.waitFor(500) // 等待页面请求接口
  }, 40000)

  it('初始化洗数据后, 初始数据满足要求', async (done)=>{
    const data = await page.data() // 使用page的方法获取当前页面的data
    expect(data).toMatchObject({
      items: expect.anything(),
      facet: expect.anything()
    })  // 通过jest的expect方法比较这个data是否符合预期
    done()
  })

  在执行
  afterAll(async () => {
    await miniProgram.close()
  })
})

执行 npm run test index 后,看到 pass 的字样,就表示这个测试通过了。
Jest 会自动把通过与不通过的测试用例都展示出来。

总结

小程序自动化测试工具 api 很简单,思路也简单易懂,可能连接的时候需要花一点时间。
实施好自动化测试可以提升程序本身的健壮性。
之后还要花一些时间来深入的使用。

点赞 4
收藏
评论

7 个评论

  • 染柒
    染柒
    2019-10-12

    愣着干嘛、点赞收藏啊各位

    2019-10-12
    赞同 2
    回复 1
    • 努力的Jerry
      努力的Jerry
      2019-10-14
      大佬~~
      2019-10-14
      回复
  • 太阳🌙粑粑
    太阳🌙粑粑
    2020-02-12

    您好,我根据demo一直就是显示


    2020-02-12
    赞同
    回复 2
    • 太阳🌙粑粑
      太阳🌙粑粑
      2020-02-12
      2020-02-12
      回复
    • Dragon baby
      Dragon baby
      2022-10-17
      请问解决了吗  我也遇到了
      2022-10-17
      回复
  • 冬日
    冬日
    2020-01-16




    Mac-mini-4:test mac$ npm run test index.spec.js


    > miniprogram-demo@1.0.0 test /Users/mac/Downloads/demo/miniprogram-demo-master

    > jest "index.spec.js"


    FAILtest/index.spec.js

      Test suite failed to run


        Your test suite must contain at least one test.


          at ../../../node_modules/@jest/core/build/TestScheduler.js:242:24

          at asyncGeneratorStep (../../../node_modules/@jest/core/build/TestScheduler.js:131:24)

          at _next (../../../node_modules/@jest/core/build/TestScheduler.js:151:9)

          at ../../../node_modules/@jest/core/build/TestScheduler.js:156:7

          at ../../../node_modules/@jest/core/build/TestScheduler.js:148:12

          at onResult (../../../node_modules/@jest/core/build/TestScheduler.js:271:25)


    Test Suites: 1 failed, 1 total

    Tests:       0 total

    Snapshots:   0 total

    Time:        2.734s

    Ran all test suites matching /index.spec.js/i


      Cannot log after tests are done. Did you forget to wait for something async in your test?

        Attempted to log "catch a error Error: SDKVersion is currently 2.7.0, while automator(0.9.1) requires at least version 2.7.3

            at MiniProgram.checkVersion (/Users/mac/node_modules/miniprogram-automator/out/MiniProgram.js:1:3350)

            at processTicksAndRejections (internal/process/task_queues.js:94:5)

            at Launcher.connect (/Users/mac/node_modules/miniprogram-automator/out/Launcher.js:1:2427)

            at Automator.connect (/Users/mac/node_modules/miniprogram-automator/out/Automator.js:1:1021)".




          at MiniProgram.checkVersion (../../../node_modules/miniprogram-automator/out/MiniProgram.js:1:3350)

          at Launcher.connect (../../../node_modules/miniprogram-automator/out/Launcher.js:1:2427)

          at Automator.connect (../../../node_modules/miniprogram-automator/out/Automator.js:1:1021)".

          at CustomConsole.log (../../../node_modules/@jest/console/build/CustomConsole.js:183:10)

          at test/index.spec.js:42:11


    Jest did not exit one second after the test run has completed.


    This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

    大佬,请问如何解决。

    2020-01-16
    赞同
    回复 3
    • 卤肉饭
      卤肉饭
      2020-03-18
      大佬 解决了么
      2020-03-18
      回复
    • 行者无疆
      行者无疆
      2020-05-31
      后面是怎么解决的?
      2020-05-31
      回复
    • T
      T
      2020-09-27
      afterAll() 里面 然后 超时时间长点
      2020-09-27
      回复
  • 冬日
    冬日
    2020-01-16

    现在遇到一个问题,就是我执行 npm run test 文件名 后,会提示,





    > @ test /Users/mac

    > echo 'Error: no test specified' "/Users/mac/Downloads/demo/miniprogram-demo-master/test/spec.js"


    Error: no test specified /Users/mac/Downloads/demo/miniprogram-demo-master/test/spec.js

    2020-01-16
    赞同
    回复 1
    • 乔佰灵
      乔佰灵
      2020-05-26
      请问这个咋解决的?
      2020-05-26
      回复
  • 冬日
    冬日
    2020-01-16

    我用命令行可以打开了,现在是会显示Open project with automation enabled success了

    2020-01-16
    赞同
    回复
  • 冬日
    冬日
    2020-01-15

    执行

    Mac-mini-4:~ mac$ /Applications/wechatwebdevtools.app/Contents/MacOS/cli /Users/mac/Downloads/miniprogram-demo-master --auto-port 9420

    Initializing...

    idePortFile: /Users/mac/Library/Application Support/微信开发者工具/Default/.ide

    IDE server has started, listening on http://127.0.0.1:35077

    initialization finished



    没有看到Open project with automation enabled success /Users/mac/Downloads/miniprogram-demo-master

    2020-01-15
    赞同
    回复 5
    • 努力的Jerry
      努力的Jerry
      2020-01-16
      大佬你的开发者工具会自动打开嘛?
      2020-01-16
      回复
    • 冬日
      冬日
      2020-01-16回复努力的Jerry
      catch a error Error: SDKVersion is currently 2.7.0, while automator(0.9.1) requires at least version 2.7.3


      请问我要如何更新到2.7.3
      2020-01-16
      回复
    • 努力的Jerry
      努力的Jerry
      2020-01-17回复冬日
      把开发者工具的小程序版本升一下?
      2020-01-17
      回复
    • 卤肉饭
      卤肉饭
      2020-03-18回复冬日
      这个问题怎么样了,这个sdk指的是哪个sdk呢
      2020-03-18
      回复
    • 梦
      2020-03-24回复卤肉饭
      把project.config.json文件中的libVersion改到2.7.3就好了
      2020-03-24
      回复
  • 2019-11-26

    请问,如果有图片上传的话,怎么测试?

    2019-11-26
    赞同
    回复 2
    • 努力的Jerry
      努力的Jerry
      2020-01-16
      好像是测不了呃,你可以单独开个帖子问问大神。。
      2020-01-16
      回复
    • 冬日
      冬日
      2020-01-19
      beforeAll(async () => {
          miniProgram = await automator.launch({
            projectPath: '/Users/mac/Desktop/miniprogram-demo-master'
          })
          page = await miniProgram.reLaunch('/page/component/index')
          await page.waitFor(500)
        }, 30000)




      miniProgram已经定义了,运行脚本的时候,会提示。  ● Test suite failed to run


          ReferenceError: miniProgram is not defined
      2020-01-19
      回复
登录 后发表内容