uni-app项目自动化测试

lyj168997

已于 2022-07-22 11:19:06 修改

阅读量3k

点赞数

分类专栏：微信 Vue相关笔记文章标签： vue.js 前端 uni-app

于 2022-07-21 16:17:16 首次发布

本文链接：https://blog.csdn.net/lyj168997/article/details/125914131

版权

Vue相关笔记同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

微信

2 篇文章 0 订阅

订阅专栏

1.使用uni-app官网中的自动化测试方式

uni-app自动化测试@about | uni-app官网创建项目

$ npm install -g @vue/cli# 全局安装vue-cli
$ cd ... // 切换到工程保存目录
$ vue create -p dcloudio/uni-preset-vue#alpha my-project//也可以使用vue create -p dcloudio/uni-preset-vue my-project

$ cd my-project

$ npm install -D jest-environment-node@26.5.2

$ npm install -S puppeteer
$ npm install -S cross-env adbkit node-simctl  playwright @playwright/test

（如果下载依赖超时，使用cnpm）

package.json内容如下(如果一直报错，可以删除node_modules文件夹重新拉取所有依赖)

注意：如果执行测试用例，报错.waitFor is not Function 大概率是有依赖没安装

{
  "name": "my-project3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
    "build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",
    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
    "dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",
    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
    "test:wx": "cross-env UNI_PLATFORM=mp-weixin jest -i"
  },
  "dependencies": {
    "@dcloudio/uni-app-plus": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-h5": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-i18n": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-360": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-alipay": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-baidu": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-jd": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-kuaishou": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-lark": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-qq": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-toutiao": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-vue": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-weixin": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-mp-xhs": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-quickapp-native": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-quickapp-webview": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-stat": "^2.0.1-alpha-35220220719002",
    "@playwright/test": "^1.23.4",
    "@vue/shared": "^3.0.0",
    "adbkit": "^2.11.1",
    "core-js": "^3.6.5",
    "cross-env": "^7.0.3",
    "flyio": "^0.6.2",
    "node-simctl": "^7.1.0",
    "playwright": "^1.23.4",
    "regenerator-runtime": "^0.12.1",
    "vue": "^2.6.11",
    "vuex": "^3.2.0"
  },
  "devDependencies": {
    "@babel/runtime": "~7.17.9",
    "@dcloudio/types": "^3.0.4",
    "@dcloudio/uni-automator": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-cli-i18n": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-cli-shared": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-migration": "^2.0.1-alpha-35220220719002",
    "@dcloudio/uni-template-compiler": "^2.0.1-alpha-35220220719002",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.1-alpha-35220220719002",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.1-alpha-35220220719002",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.1-alpha-35220220719002",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.1-alpha-35220220719002",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.1-alpha-35220220719002",
    "@vue/cli-plugin-babel": "~4.5.19",
    "@vue/cli-service": "~4.5.19",
    "babel-plugin-import": "^1.11.0",
    "cross-env": "^7.0.2",
    "jest": "^25.4.0",
    "jest-environment-node": "^26.5.2",
    "mini-types": "*",
    "miniprogram-api-typings": "*",
    "postcss-comment": "^2.0.0",
    "puppeteer": "^15.4.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "Android >= 4.4",
    "ios >= 9"
  ],
  "resolutions": {
    "@babel/runtime": "~7.17.9"
  },
  "uni-app": {
    "scripts": {}
  }
}

jest.config.js

注意：微信小程序的port不设置，如果设置了大概率会报错Failed to launch wechat web devTools, please make sure http port is open

module.exports = {

  globalTeardown: '@dcloudio/uni-automator/dist/teardown.js',

  testEnvironment: '@dcloudio/uni-automator/dist/environment.js',

  testEnvironmentOptions: {

    "mp-weixin": {

      // port: 33489, // 默认 9420

      account: "", // 测试账号

      url:'D:/my-project3/dist/dev/mp-weixi',

      args: "", // 指定开发者工具参数

      cwd: "", // 指定开发者工具工作目录

      launch: true, // 是否主动拉起开发者工具

      teardown: "disconnect", // 可选值 "disconnect"|"close" 运行测试结束后，断开开发者工具或关闭开发者工具

      remote: false, // 是否真机自动化测试

      executablePath: "D:/桌面助手/微信web开发者工具/cli.bat", // 开发者工具cli路径，默认会自动查找,  windows: C:/Program Files (x86)/Tencent/微信web开发者工具/cli.bat", mac: /Applications/wechatwebdevtools.app/Contents/MacOS/cli

    },

  },

  // cli --auto D:\my-project3\dist\dev\mp-weixin --auto-port 33489

  testTimeout: 35000,

  reporters: [

    'default'

  ],

  watchPathIgnorePatterns: ['/node_modules/', '/.git/'],

  moduleFileExtensions: ['js', 'json'],

  rootDir: __dirname,

  testMatch: ['<rootDir>/src/**/*test.[jt]s?(x)'],

  testPathIgnorePatterns: ['/node_modules/']

}

测试用例index.test.js

注意点：微信小程序需要设置一定的延时时间，是为了小程序打开开发者工具时间，否则容易超时链接不上报错Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout

describe('pages/index/index.vue', () => {
    let page
    beforeAll(async () => {
        // 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
        page = await program.reLaunch('/pages/index/index')
        await page.waitFor(2000)
    },10000)//此处设置延时是为了小程序打开开发者工具时间，否则容易超时链接不上报错

    it('测试下内容', async () => {
        // 检测首页u-link的文本内容
        console.log(await (await page.$('.title')).text());
        expect(await (await page.$('.title')).text()).toBe('Hello')
    })
})

2.uni-app项目使用微信小程序自动化测试方式

官网文档地址
创建好uni-app项目后安装miniprogram-automator

执行 npm i miniprogram-automator -D

创建 openWeixin.js文件

const automator = require('miniprogram-automator')
 
automator.launch({
  cliPath: 'D:/**/微信web开发者工具/cli.bat', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项
  projectPath: 'D:/**/dist/dev/mp-weixin', // 项目文件地址
}).then(async miniProgram => {
    const page = await miniProgram.reLaunch('/pages/decorationPages/home/index')
  await page.waitFor(15000)
  const element = await page.$('.title')
  console.log(await element.attribute('class'))
  await element.tap()

  await miniProgram.close()
})

之后执行 node openWeixin.js