background

As small program projects become more complex, business scenarios become more numerous, and time spent on regression testing increases, it becomes necessary to put front-end automated testing on the agenda.

Today is: small program automation test introductory tutorial.

The environment

System: macOS wechat Developer Tool version: 1.05.2106300

What is applets automation

Wechat official document: small program automation

Using miniprogram automation SDK miniprogram-automator can help us complete some things in the small program, such as: control the small program jump to the specified page, obtain the small program page data, obtain the small program page element state and so on.

Cooperate with JEST can realize small program side automatic test. Without further ado, let’s begin

To prepare

  1. In the project root directory mini-auto-test-demo, prepare two directories miniProgram and test-e2e to store the code of the test case

| - mini - auto - test - demo // / root directory| - miniprogram /// Small program code| - pages / | - index /// Test the file| - test - e2e /// Test case code| - index. Spec. Js// Start the file| - package. JsonCopy the code

Pages prepared for testing under index folder

<! --index.wxml--><view class="userinfo">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
  </view>
  
  /**index.wxss**/
.userinfo {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
// index.js
// Get the application instance
const app = getApp()
Page({
  data: {
    userInfo: {},},// Event handlers
  bindViewTap() {
    wx.navigateTo({
      url: '.. /logs/logs'})}})Copy the code
  1. Wechat developer Tools -> Settings -> Security Settings -> Punch Card service port

  1. Install the NPM package

If there is no package.json file in the root directory, execute first

npm init
Copy the code

If you already have a package.json file in your root directory, run the following command:

npm install miniprogram-automator jest --save-dev
npm i jest -g
Copy the code

Dependencies required by the installation

  1. Create a new one in the root directoryindex.spec.jsfile
const automator = require('miniprogram-automator')

automator.launch({
  cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli'.// Tool CLI location
  projectPath: '/Users/SONG/Documents/github/mini-auto-test-demo/miniprogram'.// Project file address
}).then(async miniProgram => {
  const page = await miniProgram.reLaunch('/pages/index/index')
  await page.waitFor(500)
  const element = await page.$('.userinfo-avatar')
  console.log(await element.attribute('class'))
  await element.tap()
  await miniProgram.close()
})

Copy the code

Note here to modify to their own CLI location and project file address:

  1. cliPath:

You can find the wechat developer tool in the application, right click “Show package contents”

After you find the CLI, the shortcut key: command+option+ C copy path, you get it

  1. projectPath:

Attention!!!!! The project path is filled with the miniprogram folder miniProgram instead of mini-Auto-test-demo

Start the

After the path is written, go to the mini-auto-test-demo root directory or vscode root directory on the MAC terminal and run the following command:

node index.spec.js
Copy the code

You will find that wechat developer tool is automatically opened, and a click event is executed to enter the log page, and the terminal outputs the value of class. Now that you’ve had a taste of automation, you ask, what about automated testing? Don’t worry. Keep reading.

Automated testing

Create a new integration.test.js file in the test-e2e folder that you originally prepared.

Js test code, into jest it, we don’t need to describe the jEST related content here, you can learn by yourself (actually I just started ~ □ ~ | |).

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

describe('index'.() = > {
  let miniProgram;
  let page;
  const wsEndpoint = 'ws: / / 127.0.0.1:9420';
  beforeAll(async() => {
    miniProgram = await automator.connect({
      wsEndpoint: wsEndpoint
    });
  }, 30000);

  it('test index'.async() => {
   page = await miniProgram.reLaunch('/pages/index/index')
    await page.waitFor(500)
    const element = await page.$('.userinfo-avatar')
    console.log(await element.attribute('class'))
    await element.tap()
  });
});
 
 
Copy the code

Add commands to package.json scripts

"e2e": "jest ./test-e2e integration.test.js --runInBand"
Copy the code

Now that the test code is written, how do you run it? Here’s another way to do it.

Cli command line call

You must ask, just we are not learning to start running, so we have to learn another way o(╥﹏╥)o everyone knows, the general team is multi-person cooperation, everyone’s projectPath is not the same, do you want to change projectPath every time? Too troublesome, using cli does not need to consider where to start, where the project address, no more words, dry!

Open the terminal and enter the cli folder of wechat developer tools (path is for reference only) :

cd /Applications/wechatwebdevtools.app/Contents/MacOS 
Copy the code

Execute commands (if your wechat developer tool has the project open, turn it off first)

./cli --auto  /Users/SONG/Documents/github/mini-auto-test-demo/miniprogram  --auto-port 9420
Copy the code

The wechat developer tool is launched from the command line

Once started, execute in the project root directory and see that the tests pass

npm run e2e
Copy the code

At this point, we are ready to write test cases. Thank you for your patience. If you have any questions, please feel free to leave a comment

github

mini-auto-test-demo

About me

Wechat search public number: ‘front-end girls juku’, reply “front-end” find me, join “front-end fairy group”, come to the organization is waiting for you ~

Finally, if the article is useful to you, please give me a thumbs-up. I take every thumbs-up seriously as a like ~