Skip to content

U
unidocs-zh

细水会流长 / unidocs-zh
与 Fork 源项目一致

Fork自 DCloud / unidocs-zh

通知 1
Star 0
Fork 0
U
unidocs-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 1287dfb4 编写于 作者: W wan201809
浏览文件
操作

update uni-app自动化测试文档

上级 626e3d34
隐藏空白更改
内联 并排
Showing with 356 addition and 350 deletion
docs/collocation/_sidebar.md
浏览文件 @ 1287dfb4
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
* 自动化测试 * 自动化测试
* [快速开始](collocation/auto/quick-start.md) * [快速开始](collocation/auto/quick-start.md)
* [API](collocation/auto/api.md) * [API](collocation/auto/api.md)
* [自动化测试插件](collocation/auto/hbuilderx-extension/index.md) * [HBuilderX自动化测试插件](collocation/auto/hbuilderx-extension/index.md)
* [CLI项目自动化测试](collocation/auto/hbuilderx-extension/index.md)
<li></li> <li></li>
<div class="contact-box"> <div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item"> <a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
......
docs/collocation/auto/api.md
浏览文件 @ 1287dfb4
# API
### Page ### Page
Page 模块提供了控制页面的方法。 Page 模块提供了控制页面的方法。
......
docs/collocation/auto/hbuilderx-extension/index.md
浏览文件 @ 1287dfb4
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
5. 运行测试到Android手机，如果HBuilderX仅检测到一个android设备，直接运行测试到当前已连接设备。多个设备时，会弹窗要求选择手机。 5. 运行测试到Android手机，如果HBuilderX仅检测到一个android设备，直接运行测试到当前已连接设备。多个设备时，会弹窗要求选择手机。
6. node: 当本机未安装node时，将使用HBuilderX`内置node`运行测试。反之，本机安装了node，则使用本机的node。 6. node: 当本机未安装node时，将使用HBuilderX`内置node`运行测试。反之，本机安装了node，则使用本机的node。
## 插件安装@testInstall ## 插件安装@test_install
[插件安装地址](https://ext.dcloud.net.cn/plugin?id=5708) [插件安装地址](https://ext.dcloud.net.cn/plugin?id=5708)
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
- uni-app普通项目，需要通过插件`hbuilderx-for-uniapp-test`来安装测试环境。 - uni-app普通项目，需要通过插件`hbuilderx-for-uniapp-test`来安装测试环境。
- uniapp-cli项目，只需在项目下安装相关测试依赖即可。[详情](#uniapp-cli项目) - uniapp-cli项目，只需在项目下安装相关测试依赖即可。[详情](#uniapp-cli项目)
### uni-app普通项目@uniapp ### uni-app普通项目
uni-app普通项目，`初始化测试环境`或`运行测试`时，如果未安装相关依赖，会自动安装。 uni-app普通项目，`初始化测试环境`或`运行测试`时，如果未安装相关依赖，会自动安装。
...@@ -53,7 +53,7 @@ uni-app普通项目，`初始化测试环境`或`运行测试`时，如果未安 ...@@ -53,7 +53,7 @@ uni-app普通项目，`初始化测试环境`或`运行测试`时，如果未安
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/ca0f9ce4-1d45-4103-9800-36a1608062d4.gif" style="zoom: 70%;border: 1px solid #eee; border-radius: 10px;"/> <img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/ca0f9ce4-1d45-4103-9800-36a1608062d4.gif" style="zoom: 70%;border: 1px solid #eee; border-radius: 10px;"/>
### uniapp-cli项目@uniappcli ### uniapp-cli项目
uniapp-cli项目，自动化测试运行，将使用**项目下的依赖库**。 uniapp-cli项目，自动化测试运行，将使用**项目下的依赖库**。
...@@ -62,13 +62,13 @@ uniapp-cli项目，自动化测试运行，将使用**项目下的依赖库**。 ...@@ -62,13 +62,13 @@ uniapp-cli项目，自动化测试运行，将使用**项目下的依赖库**。
npm install --save cross-env puppeteer adbkit node-simctl jest playwright @playwright/test npm install --save cross-env puppeteer adbkit node-simctl jest playwright @playwright/test
``` ```
## 创建测试用例@createTestCase ## 创建测试用例@create_testcase
uni-app项目，pages页面，右键菜单，创建测试用例 uni-app项目，pages页面，右键菜单，创建测试用例
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/2b15f277-5a79-425e-b978-19e16d3062f5.gif" style="zoom: 70%;border: 1px solid #eee;border-radius: 15px;"/> <img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/2b15f277-5a79-425e-b978-19e16d3062f5.gif" style="zoom: 70%;border: 1px solid #eee;border-radius: 15px;"/>
## 测试运行@testRun ## 测试运行@test_run
创建测试用例之后，选中项目，右键菜单【运行uni-app自动化测试】，选择运行平台，即可开始运行测试。 创建测试用例之后，选中项目，右键菜单【运行uni-app自动化测试】，选择运行平台，即可开始运行测试。
...@@ -83,20 +83,20 @@ uni-app项目，pages页面，右键菜单，创建测试用例 ...@@ -83,20 +83,20 @@ uni-app项目，pages页面，右键菜单，创建测试用例
- 运行测试到H5，仅支持`chrome`浏览器，**不支持**其它浏览器。 - 运行测试到H5，仅支持`chrome`浏览器，**不支持**其它浏览器。
- 运行测试到Android手机，如果HBuilderX仅检测到**一个android设备**，直接运行测试到当前已连接设备。多个设备时，会弹窗要求选择手机。 - 运行测试到Android手机，如果HBuilderX仅检测到**一个android设备**，直接运行测试到当前已连接设备。多个设备时，会弹窗要求选择手机。
### 选择测试平台@selectPlatform ### 选择测试平台@select_platform
如下图所示，运行测试时，支持选择对应平台。 如下图所示，运行测试时，支持选择对应平台。
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/856d6345-3274-4856-8830-3bccfcc9d747.png" style="zoom: 50%;border: 1px solid #eee;border-radius: 5px;"/> <img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/856d6345-3274-4856-8830-3bccfcc9d747.png" style="zoom: 50%;border: 1px solid #eee;border-radius: 5px;"/>
### 选择设备@selectDevices ### 选择设备@select_devices
> 如果无法获取到设备信息，请[参考](https://ask.dcloud.net.cn/article/97) > 如果无法获取到设备信息，请[参考](https://ask.dcloud.net.cn/article/97)
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/48721bc9-247c-461c-b6f8-8fca1838b734.png" style="zoom: 45%;border: 1px solid #eee;border-radius: 5px;"/> <img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/48721bc9-247c-461c-b6f8-8fca1838b734.png" style="zoom: 45%;border: 1px solid #eee;border-radius: 5px;"/>
## 插件配置@extensionConfig ## 插件配置@extension_config
点击菜单【设置】【插件配置】，找到hbuilderx-for-uniapp-test项，即可看到设置项。 点击菜单【设置】【插件配置】，找到hbuilderx-for-uniapp-test项，即可看到设置项。
...@@ -118,7 +118,7 @@ uni-app项目，pages页面，右键菜单，创建测试用例 ...@@ -118,7 +118,7 @@ uni-app项目，pages页面，右键菜单，创建测试用例
- 测试用例编写，请遵循jest规范。 - 测试用例编写，请遵循jest规范。
### jest用例解析@jestTestcase ### jest用例解析@jest_testcase
下面将使用一个最简单的示例，来讲解测试用例的组成。 下面将使用一个最简单的示例，来讲解测试用例的组成。
...@@ -234,7 +234,7 @@ Snapshots: 0 total ...@@ -234,7 +234,7 @@ Snapshots: 0 total
Time: 0.454 s Time: 0.454 s
``` ```
## 内置Jest代码块@codeblocks ## 内置Jest代码块@snippets
> 为了更快速的编写测试用例，本插件内置了jest部分代码块 > 为了更快速的编写测试用例，本插件内置了jest部分代码块
......
docs/collocation/auto/quick-start.md
浏览文件 @ 1287dfb4
#### uni-app自动化测试 # uni-app自动化测试@about
uni-app提供了一批API，这些API可以操控uni-app应用，包括运行、跳转页面、触发点击等，并可以获取页面元素状态、进行截图，从而实现对uni-app项目进行自动化测试的目的。 uni-app提供了一批API，这些API可以操控uni-app应用，包括运行、跳转页面、触发点击等，并可以获取页面元素状态、进行截图，从而实现对uni-app项目进行自动化测试的目的。
本功能使用到了业内常见的测试库如jest（MIT协议）。 本功能使用到了业内常见的测试库如jest（MIT协议）。
#### 特性 推荐使用方式：研发提交源码到版本库后，持续集成系统自动拉取源码，自动运行自动化测试。
## 特性@features
开发者可以利用API做以下事情： 开发者可以利用API做以下事情：
* 控制跳转到指定页面 * 控制跳转到指定页面
...@@ -19,342 +21,8 @@ uni-app提供了一批API，这些API可以操控uni-app应用，包括运行、 ...@@ -19,342 +21,8 @@ uni-app提供了一批API，这些API可以操控uni-app应用，包括运行、
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(ios仅支持模拟器)|√|√|x|x|x|x|x|x| |√(ios仅支持模拟器)|√|√|x|x|x|x|x|x|
## 测试说明@descriptions
目前仅 [cli](https://uniapp.dcloud.net.cn/quickstart?id=_2-通过vue-cli命令行) 工程支持。有利于持续集成。 uni-app 自动化测试，建议使用[HBuilderX uni-app自动化测试插件](https://ext.dcloud.net.cn/plugin?id=5708)。测试插件支持在HBuilderX内对`uni-app普通项目`、`CLI项目`进行自动化测试。插件简化了测试环境安装、测试用例创建、测试运行、测试设备选择等步骤。[插件文档](/collocation/auto/hbuilderx-extension/index)
[HBuilderX uniapp自动化测试插件](https://ext.dcloud.net.cn/plugin?id=5708), 支持在HBuilderX内对uniapp普通项目、cli项目进行自动化测试。此插件简化了测试环境安装、测试用例创建、测试运行、测试设备选择等步骤。
推荐使用方式：研发提交源码到版本库后，持续集成系统自动拉取源码，自动运行自动化测试。
暂不支持百度，先忽略百度相关测试代码
创建 `cli` 工程
```
# 全局安装vue-cli
$ npm install -g @vue/cli
$ cd ... // 切换到工程保存目录
$ vue create -p dcloudio/uni-preset-vue#alpha my-project
```
如果之前是HBuilderX工程，则把HBuilderX工程内的文件（除 unpackage、node_modules 目录）拷贝至 vue-cli 工程的 src 目录。
在 vue-cli 工程内重新安装 npm 依赖（如果之前使用了 npm 依赖的话）
cli创建项目时若选择`hello uni-app`模板，可看到其中已经自带部分测试例。
已有 `cli` 工程
1. 更新依赖包 `@dcloudio/*` >= `2.0.0-alpha-27920200613002`
2. 安装依赖包 `@dcloudio/uni-automator`
```
npm install @dcloudio/uni-automator --save-dev
```
3. package.json script节点新增命令
```
"test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
"test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
"test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
"test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i",
"test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i"
```
#### H5平台测试流程
1. 进入工程目录，安装依赖
```
npm install puppeteer --save-dev
```
注意： 从v3.0.0开始，`Puppeteer` 开始依赖于Node 10.18.1+
2. 根据API编写测试的js代码，参考测试用例
API文档见：[https://uniapp.dcloud.io/collocation/auto/api](https://uniapp.dcloud.io/collocation/auto/api)
测试文件目录配置见 [jest.config.js](collocation/auto/quick-start?id=jestconfigjs)
3. 运行测试
```
npm run test:h5
```
4. 测试结果
```
>> cross-env UNI_PLATFORM=h5 jest -i
...
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 14.995s, estimated 16s
```
更多配置参考 [jest.config.js](collocation/auto/quick-start?id=jestconfigjs)
#### App-Android测试流程
1. 配置全局 `adb` 环境变量
2. 配置 `Hbuilder` 调试基座/自定义基座 `android_base.apk` 目录，参考 `jest.config.js`
3. 创建 `cli` 工程/现有 `cli` 工程
切换到工程目录，安装依赖包 `adbkit`
```
npm install adbkit --save-dev
```
4. 编写测试代码，参考测试用例
5. 运行测试
```
npm run test:android
```
#### App-iOS测试流程
目前仅支持 iOS 模拟器（需要mac电脑安装xcode）
1. 安装依赖 `node-simctl`
```
npm install node-simctl --save-dev
```
2. 配置模拟器id，参考 `jest.config.js`
3. 配置 `Hbuilder` 调试基座/自定义基座 `Pandora_simulator.app` 目录，参考 `jest.config.js`
4. 编写测试代码，参考测试用例
5. 运行测试
```
npm run test:ios
```
#### 微信小程序测试流程
1. 创建cli项目，同H5平台 (必须配置微信小程序 appid, manifest.json -> mp-weixin -> appid)
2. 运行测试(如果微信开发者工具无法成功打开项目，请手动打开)
```
npm run test:mp-weixin
```
3. 测试结果
```
> cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch "--auto-port" "9520"
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 14.995s, estimated 16s
```
#### 测试示例
使用 hello uni-app 工程测试 H5 平台
1. 创建 `cli` 项目，选择 `hello uni-app`
```
$ vue create -p dcloudio/uni-preset-vue#alpha my-hello-uni-app
# 进入项目目录
$ cd my-hello-uni-app
```
2. 安装 `puppeteer`
```
npm install puppeteer
```
3. 创建测试文件 `src/pages/tabBar/component/component.test.js`，复制下面代码
```
describe('pages/tabBar/component/component.nvue', () => {
let page
beforeAll(async () => {
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
page = await program.reLaunch('/pages/tabBar/component/component')
await page.waitFor(1000)
})
it('u-link', async () => {
// 检测首页u-link的文本内容
expect(await (await page.$('.hello-link')).text()).toBe('https://uniapp.dcloud.io/component/')
})
it('视图容器', async () => {
// 检测首个 panel 是视图容器
expect(await (await page.$('.uni-panel-text')).text()).toBe('视图容器')
// 检测首个 panel 切换展开
const panelH = await page.$('.uni-panel-h');
// 不能做完全匹配，百度小程序会生成额外的class
expect(await panelH.attribute('class')).toContain('uni-panel-h')
await panelH.tap()
await page.waitFor(500)
// 已展开
expect(await panelH.attribute('class')).toContain('uni-panel-h-on')
})
it('.uni-panel', async () => {
const lists = await page.$$('.uni-panel')
expect(lists.length).toBe(9)
})
it('.uni-panel action', async () => {
const listHead = await page.$('.uni-panel-h')
expect(await listHead.attribute('class')).toContain('uni-panel-h-on')
await listHead.tap()
await page.waitFor(200)
expect(await listHead.attribute('class')).toContain(
'uni-panel-h',
)
// 展开第一个 panel，点击第一个 item，验证打开的新页面是否正确
await listHead.tap()
await page.waitFor(200)
const item = await page.$('.uni-navigate-item')
await item.tap()
await page.waitFor(500)
expect((await program.currentPage()).path).toBe('pages/component/view/view')
await page.waitFor(500)
// 执行 navigateBack 验证是否返回
expect((await program.navigateBack()).path).toBe('pages/tabBar/component/component')
})
})
```
4. 运行测试
```
npm run test:h5
```
5. 测试结果
```
> cross-env UNI_PLATFORM=h5 jest -i
PASS src/pages/tabBar/component/component.test.js (14.789s)
pages/tabBar/component/component.nvue
√ u-link (8ms)
√ 视图容器 (518ms)
√ .uni-panel (2ms)
√ .uni-panel action (4447ms)
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 14.995s, estimated 16s
```
##### 屏幕截图示例
```
describe('pages/API/set-navigation-bar-title/set-navigation-bar-title.vue', () => {
let page
beforeAll(async () => {
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
page = await program.reLaunch('/pages/API/set-navigation-bar-title/set-navigation-bar-title')
await page.waitFor(3000)
})
it('.uni-hello-text', async () => {
var image = await program.screenshot({
path: "set-navigation-bar-title.png" // 默认项目根目录
})
console.log(image)
})
})
```
更多测试示例见： hello uni-app
GitHub： [https://github.com/dcloudio/hello-uniapp](https://github.com/dcloudio/hello-uniapp)
#### jest.config.js
```
module.exports = {
globalTeardown: '@dcloudio/uni-automator/dist/teardown.js',
testEnvironment: '@dcloudio/uni-automator/dist/environment.js',
testEnvironmentOptions: {
compile: true,
h5: { // 为了节省测试时间，可以指定一个 H5 的 url 地址，若不指定，每次运行测试，会先 npm run dev:h5
url: "http://192.168.x.x:8080/h5/",
options: {
headless: false // 配置是否显示 puppeteer 测试窗口
}
},
"app-plus": { // 需要安装 HBuilderX
android: {
executablePath: "HBuilderX/plugins/launcher/base/android_base.apk" // apk 目录
},
ios: {
// uuid 必须配置，目前仅支持模拟器，可以（xcrun simctl list）查看要使用的模拟器 uuid
id: "",
executablePath: "HBuilderX/plugins/launcher/base/Pandora_simulator.app" // ipa 目录
}
},
"mp-weixin": {
port: 9420, // 默认 9420
account: "", // 测试账号
args: "", // 指定开发者工具参数
cwd: "", // 指定开发者工具工作目录
launch: true, // 是否主动拉起开发者工具
teardown: "disconnect", // 可选值 "disconnect"|"close" 运行测试结束后，断开开发者工具或关闭开发者工具
remote: false, // 是否真机自动化测试
executablePath: "", // 开发者工具cli路径，默认会自动查找, windows: C:/Program Files (x86)/Tencent/微信web开发者工具/cli.bat", mac: /Applications/wechatwebdevtools.app/Contents/MacOS/cli
},
"mp-baidu": {
port: 9430, // 默认 9430
args: "", // 指定开发者工具参数
cwd: "", // 指定开发者工具工作目录
launch: true, // 是否主动拉起开发者工具
teardown: "disconnect", // 可选值 "disconnect"|"close" 运行测试结束后，断开开发者工具或关闭开发者工具
remote: false, // 是否真机自动化测试
executablePath: "", // 开发者工具cli路径，默认会自动查找
}
},
testTimeout: 15000,
reporters: [
'default'
],
watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
moduleFileExtensions: ['js', 'json'],
rootDir: __dirname,
testMatch: ['<rootDir>/src/**/*test.[jt]s?(x)'], // 测试文件目录
testPathIgnorePatterns: ['/node_modules/']
}
```
**注意事项**
1. 如果页面涉及到分包加载问题，`reLaunch` 获取的页面路径可能会出现问题 ，解决方案如下 ：
```javascript
// 重新 reLaunch至首页，并获取 page 对象（其中 program 是 uni-automator 自动注入的全局对象）
page = await program.reLaunch('/pages/extUI/calendar/calendar')
// 微信小程序如果是分包页面，需要延迟大概 7s 以上，保证可以正确获取page对象
await page.waitFor(7000)
page = await program.currentPage()
```
2. 微信小程序 element 不能跨组件选择元素，首先要先获取当前组件，再继续查找
```html
<uni-tag>
<view class="test"></view>
</uni-tag>
```
```javascript
// 错误，取不到元素
await page.$('.test')
// 可以取到元素
let tag = await page.$('uni-tag')
await tag.$('.test')
```
3. 微信小程序暂不支持父子选择器 如果您想脱离HBuilderX进行自动化测试、或使用持续集成进行测试，请使用uni-app [CLI](https://uniapp.dcloud.net.cn/quickstart?id=_2-通过vue-cli命令行) 工程，[CLI项目自动化测试教程](/collocation/auto/uniapp-cli-project)
4. 百度小程序选择元素必须有事件的元素才能被选中，否则提示元素不存在 \ No newline at end of file
5. 分包中的页面，打开之后要延迟时间长一点，否则不能正确获取到页面信息
docs/collocation/auto/uniapp-cli-project.md 0 → 100644
浏览文件 @ 1287dfb4
# uni-app cli项目@uniapp-cli
> 本文档仅适用于CLI工程。
创建 `cli` 工程
```
# 全局安装vue-cli
$ npm install -g @vue/cli
$ cd ... // 切换到工程保存目录
$ vue create -p dcloudio/uni-preset-vue#alpha my-project
```
如果之前是HBuilderX工程，则把HBuilderX工程内的文件（除 unpackage、node_modules 目录）拷贝至 vue-cli 工程的 src 目录。
在 vue-cli 工程内重新安装 npm 依赖（如果之前使用了 npm 依赖的话）
cli创建项目时若选择`hello uni-app`模板，可看到其中已经自带部分测试例。
已有 `cli` 工程
1. 更新依赖包 `@dcloudio/*` >= `2.0.0-alpha-27920200613002`
2. 安装依赖包 `@dcloudio/uni-automator`
```
npm install @dcloudio/uni-automator --save-dev
```
3. package.json script节点新增命令
```
"test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
"test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
"test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
"test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i",
"test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i"
```
#### H5平台测试流程
1. 进入工程目录，安装依赖
```
npm install puppeteer --save-dev
```
注意： 从v3.0.0开始，`Puppeteer` 开始依赖于Node 10.18.1+
2. 根据API编写测试的js代码，参考测试用例
API文档见：[https://uniapp.dcloud.io/collocation/auto/api](https://uniapp.dcloud.io/collocation/auto/api)
测试文件目录配置见 [jest.config.js](collocation/auto/quick-start?id=jestconfigjs)
3. 运行测试
```
npm run test:h5
```
4. 测试结果
```
>> cross-env UNI_PLATFORM=h5 jest -i
...
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 14.995s, estimated 16s
```
更多配置参考 [jest.config.js](collocation/auto/quick-start?id=jestconfigjs)
#### App-Android测试流程
1. 配置全局 `adb` 环境变量
2. 配置 `Hbuilder` 调试基座/自定义基座 `android_base.apk` 目录，参考 `jest.config.js`
3. 创建 `cli` 工程/现有 `cli` 工程
切换到工程目录，安装依赖包 `adbkit`
```
npm install adbkit --save-dev
```
4. 编写测试代码，参考测试用例
5. 运行测试
```
npm run test:android
```
#### App-iOS测试流程
目前仅支持 iOS 模拟器（需要mac电脑安装xcode）
1. 安装依赖 `node-simctl`
```
npm install node-simctl --save-dev
```
2. 配置模拟器id，参考 `jest.config.js`
3. 配置 `Hbuilder` 调试基座/自定义基座 `Pandora_simulator.app` 目录，参考 `jest.config.js`
4. 编写测试代码，参考测试用例
5. 运行测试
```
npm run test:ios
```
#### 微信小程序测试流程
1. 创建cli项目，同H5平台 (必须配置微信小程序 appid, manifest.json -> mp-weixin -> appid)
2. 运行测试(如果微信开发者工具无法成功打开项目，请手动打开)
```
npm run test:mp-weixin
```
3. 测试结果
```
> cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch "--auto-port" "9520"
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 14.995s, estimated 16s
```
#### 测试示例
使用 hello uni-app 工程测试 H5 平台
1. 创建 `cli` 项目，选择 `hello uni-app`
```
$ vue create -p dcloudio/uni-preset-vue#alpha my-hello-uni-app
# 进入项目目录
$ cd my-hello-uni-app
```
2. 安装 `puppeteer`
```
npm install puppeteer
```
3. 创建测试文件 `src/pages/tabBar/component/component.test.js`，复制下面代码
```
describe('pages/tabBar/component/component.nvue', () => {
let page
beforeAll(async () => {
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
page = await program.reLaunch('/pages/tabBar/component/component')
await page.waitFor(1000)
})
it('u-link', async () => {
// 检测首页u-link的文本内容
expect(await (await page.$('.hello-link')).text()).toBe('https://uniapp.dcloud.io/component/')
})
it('视图容器', async () => {
// 检测首个 panel 是视图容器
expect(await (await page.$('.uni-panel-text')).text()).toBe('视图容器')
// 检测首个 panel 切换展开
const panelH = await page.$('.uni-panel-h');
// 不能做完全匹配，百度小程序会生成额外的class
expect(await panelH.attribute('class')).toContain('uni-panel-h')
await panelH.tap()
await page.waitFor(500)
// 已展开
expect(await panelH.attribute('class')).toContain('uni-panel-h-on')
})
it('.uni-panel', async () => {
const lists = await page.$$('.uni-panel')
expect(lists.length).toBe(9)
})
it('.uni-panel action', async () => {
const listHead = await page.$('.uni-panel-h')
expect(await listHead.attribute('class')).toContain('uni-panel-h-on')
await listHead.tap()
await page.waitFor(200)
expect(await listHead.attribute('class')).toContain(
'uni-panel-h',
)
// 展开第一个 panel，点击第一个 item，验证打开的新页面是否正确
await listHead.tap()
await page.waitFor(200)
const item = await page.$('.uni-navigate-item')
await item.tap()
await page.waitFor(500)
expect((await program.currentPage()).path).toBe('pages/component/view/view')
await page.waitFor(500)
// 执行 navigateBack 验证是否返回
expect((await program.navigateBack()).path).toBe('pages/tabBar/component/component')
})
})
```
4. 运行测试
```
npm run test:h5
```
5. 测试结果
```
> cross-env UNI_PLATFORM=h5 jest -i
PASS src/pages/tabBar/component/component.test.js (14.789s)
pages/tabBar/component/component.nvue
√ u-link (8ms)
√ 视图容器 (518ms)
√ .uni-panel (2ms)
√ .uni-panel action (4447ms)
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 14.995s, estimated 16s
```
##### 屏幕截图示例
```
describe('pages/API/set-navigation-bar-title/set-navigation-bar-title.vue', () => {
let page
beforeAll(async () => {
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
page = await program.reLaunch('/pages/API/set-navigation-bar-title/set-navigation-bar-title')
await page.waitFor(3000)
})
it('.uni-hello-text', async () => {
var image = await program.screenshot({
path: "set-navigation-bar-title.png" // 默认项目根目录
})
console.log(image)
})
})
```
更多测试示例见： hello uni-app
GitHub： [https://github.com/dcloudio/hello-uniapp](https://github.com/dcloudio/hello-uniapp)
#### jest.config.js
```
module.exports = {
globalTeardown: '@dcloudio/uni-automator/dist/teardown.js',
testEnvironment: '@dcloudio/uni-automator/dist/environment.js',
testEnvironmentOptions: {
compile: true,
h5: { // 为了节省测试时间，可以指定一个 H5 的 url 地址，若不指定，每次运行测试，会先 npm run dev:h5
url: "http://192.168.x.x:8080/h5/",
options: {
headless: false // 配置是否显示 puppeteer 测试窗口
}
},
"app-plus": { // 需要安装 HBuilderX
android: {
executablePath: "HBuilderX/plugins/launcher/base/android_base.apk" // apk 目录
},
ios: {
// uuid 必须配置，目前仅支持模拟器，可以（xcrun simctl list）查看要使用的模拟器 uuid
id: "",
executablePath: "HBuilderX/plugins/launcher/base/Pandora_simulator.app" // ipa 目录
}
},
"mp-weixin": {
port: 9420, // 默认 9420
account: "", // 测试账号
args: "", // 指定开发者工具参数
cwd: "", // 指定开发者工具工作目录
launch: true, // 是否主动拉起开发者工具
teardown: "disconnect", // 可选值 "disconnect"|"close" 运行测试结束后，断开开发者工具或关闭开发者工具
remote: false, // 是否真机自动化测试
executablePath: "", // 开发者工具cli路径，默认会自动查找, windows: C:/Program Files (x86)/Tencent/微信web开发者工具/cli.bat", mac: /Applications/wechatwebdevtools.app/Contents/MacOS/cli
},
"mp-baidu": {
port: 9430, // 默认 9430
args: "", // 指定开发者工具参数
cwd: "", // 指定开发者工具工作目录
launch: true, // 是否主动拉起开发者工具
teardown: "disconnect", // 可选值 "disconnect"|"close" 运行测试结束后，断开开发者工具或关闭开发者工具
remote: false, // 是否真机自动化测试
executablePath: "", // 开发者工具cli路径，默认会自动查找
}
},
testTimeout: 15000,
reporters: [
'default'
],
watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
moduleFileExtensions: ['js', 'json'],
rootDir: __dirname,
testMatch: ['<rootDir>/src/**/*test.[jt]s?(x)'], // 测试文件目录
testPathIgnorePatterns: ['/node_modules/']
}
```
**注意事项**
1. 如果页面涉及到分包加载问题，`reLaunch` 获取的页面路径可能会出现问题 ，解决方案如下 ：
```javascript
// 重新 reLaunch至首页，并获取 page 对象（其中 program 是 uni-automator 自动注入的全局对象）
page = await program.reLaunch('/pages/extUI/calendar/calendar')
// 微信小程序如果是分包页面，需要延迟大概 7s 以上，保证可以正确获取page对象
await page.waitFor(7000)
page = await program.currentPage()
```
2. 微信小程序 element 不能跨组件选择元素，首先要先获取当前组件，再继续查找
```html
<uni-tag>
<view class="test"></view>
</uni-tag>
```
```javascript
// 错误，取不到元素
await page.$('.test')
// 可以取到元素
let tag = await page.$('uni-tag')
await tag.$('.test')
```
3. 微信小程序暂不支持父子选择器
4. 百度小程序选择元素必须有事件的元素才能被选中，否则提示元素不存在
5. 分包中的页面，打开之后要延迟时间长一点，否则不能正确获取到页面信息
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或