This is the first day of my participation in Gwen Challenge

1. Introduction

Before each new release, you need to go back to the core functionality and make sure that the applet works as expected once it goes live. At the moment, this part of the regression work is done manually by test colleagues to verify test cases, following the iteration rhythm of the Monday version, and regression takes a lot of testing time. Recently, the front-end work is relatively easy, so I am thinking whether this part of the repetitive work to the program to carry out automatically, save time and effort.

2. What is small program automation

Small program automation SDK provides developers with a set of external scripts to control small programs, so as to achieve the purpose of automatic testing small programs.

The developer tool can automatically click and input on the page according to the order of code execution (that is, simulate user operation), and then compare the page performance after operation with the expected results to get the test conclusion (assertion). Website links: developers.weixin.qq.com/miniprogram… Small program test automation SDK: www.npmjs.com/package/min…

The automatic test SDK of small program has the following features: A. Control the small program to jump to the specified page; B. Obtain the page data of the small program; C. Obtain the status of applets page elements; D. Trigger the applets element binding event; E. Inject code snippets into AppService; F. Call any interface on the WX object; G. …

3. Small program automation SDK

3.1 Operating Environment

A. Install Node.js whose version is later than 8.0.

B. The base library version is 2.7.3 or later;

C. The developer tool version is 1.02.1907232 or later.

D. Items to be automated (described later);

How to view & modify the base library version, see the following figure.

See the following figure for how to view the developer tool version.

Items requiring automatic testing (choose 1 from 3):

A. Create A project with the help of wechat developer tools;

B. Developers can directly download from Github official widget source code down (widget official widget source code:Github.com/wechat-mini…);

C. Real projects;

In this article, to make the practical steps as straightforward as possible, take plan A and create A new project (on which all the demonstrations below are based).

Let’s take a look at the general directory structure as follows:If you have the above operating environment, please continue to look.

3.2 Installing the automated test SDK

Tips: CD Go to the root directory of the project and run the following command.

npm i miniprogram-automator --save-dev
Copy the code

The difference between –save-dev and no –save-dev is detailed below:Juejin. Cn/post / 684490…

After the command is executed successfully, the following information is displayed on the terminal, indicating that the installation is successful.

There are warn alarms on the terminal, which do not affect the use of the terminal.

At the beginning of 3.3 experience

A. Enable the CLI/HTTP invocation function in tool security Settings.

Specific instructions are as follows: Open wechat developer tools -> Settings -> Security Settings -> Enable service port.

For more information about CLI/HTTP functionality, please click this link:Developers.weixin.qq.com/miniprogram…

B. Prepare a page for automated tests (for convenience, the simplest demo will be shown below)

WXML <view class="usermotto"> < motto class="usermotto"> {{motto} </ motto > </view> // index.js const app = getApp() Page({data: {motto: 'Hello World',}, tapFn (e) {console.log(e,' test automatic result ')}}) // index.wxss. Usermotto {margin-top: 1000; text-align: center; }Copy the code

C. Create a new file in the project and end with.spec.js (for example, create index.spce.js in the root directory of the project). Enter the following information (modify the file based on your own project) :

const automator = require('miniprogram-automator') automator.launch({ cliPath: '/ Applications/wechatwebdevtools. App/Contents/MacOS/cli', / tools/cli position, if you didn't change the default installation location, you can ignore the 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() })Copy the code

There are three points to pay attention to: 1. Change the path of cli tool (if you have not changed the default installation path of wechat developer tool, you can ignore this item; if you have changed the installation path, you need to find the installation path and add it here); 2. If you do not know how to view the software installation location, please click this link: juejin.cn/post/697060… 2. Change the file path of the project (absolute path is recommended). 3. Modify the elements you actually want to manipulate in the demo below.

D. Run the following command on the terminal to execute the automatic test result.

node index.spec.js
Copy the code

Let’s take a look at the execution of the order.

Here we need to pay attention to the right side of the automatic test when starting wechat developer tools to see whether the following content [start automation port] appears.Next, let’s see if the developer tool prints out any contentFinally, if we look at the terminal, you will see that the terminal will output the following, as your code expects.This demo wants to achieve is: through the automated test SDK simulation user click Hello World text (TAP operation), see if the normal execution of bindtap inside the method.

At this point, small program automation testing is a start, please continue to see.

4. Jest framework

4.1 Introducing the Jest Framework

The applets automation SDK itself does not provide a testing framework.

Therefore, we can combine it with any popular Node.js test framework in the market to achieve the purpose of writing small program test cases. According to the official website, we use Jest testing framework to write the actual small program automation test. A. CD Go to the root directory of the project and run the following command to install dependencies

npm i miniprogram-automator jest
Copy the code



B. Run the following command to install the Jest framework globally

npm i jest -g
Copy the code

During the installation, the following error occurred:

According to the error message, it should be insufficient permission, so execute the following command (the actual process developers can handle according to their own error)

// Look at the command line, you should be prompted to enter a password. sudo npm i jest -gCopy the code

C. Enable the CLI/HTTP invocation function in tool security Settings (see 2.4 Enabling the function).

Since then, the Jest testing framework has been built and is ready for the next step.

4.2 Initial experience of Jest

A. Script writing (goal: automatically start wechat developer tools && open the project)

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()
  })
})
Copy the code

B. Enable the CLI/HTTP invocation function in tool security Settings (see 2.4 Enabling the function) C. D. Disable the CLI/HTTP invocation function in the security Settings of the tool (as described in 2.4 Enabling the function) and close the wechat developer tool E. Run the following script in the root directory of the project

jest index.spec.js
Copy the code

Oh, my God. Wrong report. Look, look.

Solution: Run the following command in the project directory.

npm init
Copy the code

After the installation is complete, there is a package.json file in the project root directory.

Then we go to step E again: Oops, error again, look look.At least one test should be included in the script, i.e. code similar to it(‘ XXX ‘, () => expect(‘ XXX ‘).tobe (‘ XXX ‘)).

Solution: Add at least one test case (the following example demonstrates a tap event that simulates text).

The final script code is as follows:

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(' Click hello world text ', Async () => {awaitpage.waitfor (3000)} const tabbar = awaitpage.$('.chatted ') tabbar.tap()})  // afterAll(async () => { // await miniProgram.close() // }) })Copy the code

So let’s do step E again: we’ll see that the tap method is executed under developer tools.

After the script is executed, the terminal displays the following information about the result:

4.3 Advanced gameplay

The above method needs to inject the installation path of wechat developer tools && project path into the code. The configuration of different project members is different, so can we make it isolated? The project itself maintains only the test case scripts, and it is up to the developer to decide where to execute the scripts and what project directory to execute them in.

Open the automation interface of the developer wechat developer tool and connect the automation interface by command.

A. Go to the wechat developer tool installation directory and run the following command:

// Go to the installation directory of wechat developer tools (my directory structure is: / Applications/wechatwebdevtools app) - > / WeChat developer tools installation directory/Contents/MacOS CD / Applications/wechatwebdevtools app/Contents/MacOS / / find to perform automated test directory (the author project path is: / Users/Susan li/files/mini - demo) cli - auto /Users/susan.li/files/mini-demo --auto-port 9420Copy the code

The automation port is independent of the service port (the 52968 you printed in Developer Tools -> Settings -> Security -> is actually the server port); We need to see the following prompt in the terminal to mean that the automatic port has been opened successfully (9420)

// To see this sentence, this sentence is critical ！！！！！！ ✔ the Open project with automation enabled success/Users/Susan li/files/mini - demoCopy the code

Let’s take a look at the actual effect:

After the command is successfully executed, the developer tools & Project is automatically opened, and the following information is displayed in the upper right corner.

B. Find the root directory of the automated test project and run the following command to install the SDK(ignore it if it has been installed) :

// To install the miniprogram, run the following command: NPM I miniprogram-automator --save-devCopy the code

C. Introduce the automatic test SDK and connect the automatic operation port in the script

const automator = require('miniprogram-automator');

const miniProgram = automator.connect({
  wsEndpoint: 'ws://localhost:9420',
})
Copy the code

D. Write scripts based on service requirements and perform operations

const automator = require('miniprogram-automator') describe('index', () => {let miniProgram // Call before running test, enable automation port 9420 beforeAll(async () => {miniProgram = await automator.connect({miniProgram = await automator.connect({miniProgram = await automator.connect). WsEndpoint: 'ws://localhost:9420',})}) // afterAll(() => {miniprogram.disconnect (); }) // Automate test content it(' click hello world text ', Async () => {// get page information const page = await miniprogram.relaunch ('/pages/index/index') // Select target element const Tabbar = await page.$('.createtimingfunction ') // CreatetimingFunction (' createtimingfunction ');Copy the code

E. After the script is ready, run the following command to perform the automated test (keep the smile Developer tool open)

jest index.spec.js
Copy the code

If the test passes, the terminal will have the following PASS prompt, and the result is as shown in the figure:

5. Write at the end

As a small program of e-commerce, it guarantees the stable operation of business on the line, requires each page and module to handle properly in abnormal cases, and ensures the most basic user experience to users. This article only serves as the initial introduction of automated testing, and the following will be combined with the actual business to do further combing demonstration.

If there is a mistake, please leave a message, will be corrected in time! If feel helpful to you, please click a like or collect it!