[Automation Testing] Use miniprogram-automator and Wechat Devtools to test Miniprogram automatically

miniprogram-automator

miniprogram-automator is the Miniprogram Automation SDK provides developers with a set of solutions for manipulating Miniprograms through external scripts and Wechat Devtools so as to achieve the purpose of Miniprogram automation testing.

Prerequisites

• Node.js

  Install Node.js - https://nodejs.org/en/ 8.0+.

• Mini Program account

  The first step in developing the Mini Program is to have a Mini Program account that allows you to manage your Mini Program

  Apply for an account | Weixin public doc - https://developers.weixin.qq.com/miniprogram/en/dev/#Apply-for-an-account

  Log in WeChat Official Accounts Platform - https://mp.weixin.qq.com, and you can see the AppID of your Mini Program in the menu of “Settings” - “Development Settings”.

• Wechat Devtools

  Go to the developer toolkit download page to download the appropriate installation package for your operating system. More details about the developer toolkit can be found in the Developer Toolkit Introduction.

  # Install by Homebrew package manager on macOS. 
  # wechatwebdevtools — Homebrew Formulae
  # https://formulae.brew.sh/cask/wechatwebdevtools
  $ brew install --cask wechatwebdevtools

  Open the Wechat Devtools, and log in by scanning QR code with your Weixin. Now you are ready to develop your first Mini Program!

Installation

First, install miniprogram-automator SDK.

# (Optional) Make a workspace folder and initialize npm package.json.
# mkdir col-miniprogram-automator && cd col-miniprogram-automator && npm init
$ npm i miniprogram-automator --save-dev

Configuration

Enable the CLI/HTTP call function in the Wechat Devtools security settings in Settings -> Security Settings.

---

The above options must be enabled, otherwise the SDK will not be able to start the tool automation function normally.

---

Examples

// index.js

const automator = require('miniprogram-automator')

automator.launch({
  cliPath: 'path/to/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项
  projectPath: 'path/to/project', // 项目文件地址
}).then(async miniProgram => {
  const page = await miniProgram.reLaunch('/page/component/index')
  await page.waitFor(500)

  await miniProgram.screenshot({
    path: 'index.png'
  })

  const element = await page.$('.kind-list-item-hd')
  console.log(await element.attribute('class'))
  await element.tap()

  await miniProgram.screenshot({
    path: 'index-tap.png'
  })

  await miniProgram.close()
})

Run

Run index.js with node command.

$ node index.js

Or run index.js with npm run script.

First, edit and append the follow content in the package.json file.

$ cat package.json
{
    ...
    "scripts": {
        "test": "node index.js"
    }
    ...
}

Then, run with npm script.

$ npm run test

You will Wechat Devtools run your Miniprogram project automatically and generate the screenshots.

References

[1] 快速入门 | 微信开放文档 - https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html

[2] automator | 微信开放社区 - https://developers.weixin.qq.com/community/search?query=automator&page=1&block=1&random=1613793400435&type=1

[3] Node.js - https://nodejs.org/en/

[4] wechatwebdevtools — Homebrew Formulae - https://formulae.brew.sh/cask/wechatwebdevtools

[5] developer toolkit download page