wxa小程序e2e自动化测试

• 支持事件
  • bindtap、bindlongpress、bindchange、input、touchstart、touchmove、touchend
  • showModal、showActionSheet 回放过程会直接mock掉，界面上不会弹出交互
• 目前无法支持：
  • catchtap、catchlongpress等阻止冒泡事件（自动化element.tap、element.longpress等方法无法阻止冒泡）
  • 主动操作返回（因无法监听返回事件，所以录制过程中 点击物理返回键、小程序titlebar返回键、ios手势返回等返回操作，暂无法支持）
• 已知bug：
  • 暂无
• 待优化&计划：
  • 截屏用的图片比对条件过于苛刻，稍微有些偏移就报错；理想情况：整体页面稍微有些偏移不应报错，因小程序rpx单位渲染，有小数点的时候，每次渲染不能保证位置一致，导致整体页面有位移，需调整图片比对参数，试下能不能忽略偏移。
  • ~~-r录制模式也自动用开发者工具打开当前项目，每次录制完生成用例后，自动回到小程序首页~~
  • 不带-r参数时，即回放模式，仅添加元素id（回放测试用例时能找到对应元素），不侵入过多代码（现在会劫持各种tap等事件，植入全局按钮组件）
  • 高大上网页版测试报告
  • 【用例复用】：支持用例复用-公共用例不用重复录制（如：登陆模块只需要录制一次，其他用例复用，当登录模块更改时，只需要重新录制一次登录，不需要每个用例都重新录制）
  • 简化配置步骤，对测试更友好点
  • 【真机】：支持真机
  • 【服务器】：有个公共服务器解决用例执行的问题
  • 各种未知bug

2020年3月11日

使用手册

安装

• 先安装项目依赖 wnpm i
• 项目目录下执行命令 wnpm i @webank/wxa-cli2-apple -D

python 及依赖安装(可选，带参数--py-diff时需要安装)

• Python官网下载Python安装包(python-3.X.X.exe)
• 全局安装PIL pip install pillow

测试脚本录制

1. 微信开发者工具 - 设置 - 安全设置 - 打开服务端口

2. 微信开发者工具，打开对应项目，勾选不校验合法域名（src/project.config.json需同步修改urlCheck:false）

3. windows系统，wxa.config.js里增加属性wechatwebdevtools ，配置微信开发者工具的安装目录

   module.exports = {
   	wechatwebdevtools: "C:/Program Files (x86)/Tencent/微信web开发者工具"
   	.....
   }
   

4. 开发者工具修改调试基础库 2.7.3以上（src/project.config.json需同步修改libVersion）

5. 项目根目录下添加文件babel.config.js(如果根目录下已有.babelrc，会有冲突，需将.babelrc中的配置合并到babel.config.js里)

   const path = require('path');
   const existsSync = require('fs').existsSync;
   
   
   // try to find @babel/runtime to decide whether add @babel/plugin-transform-runtime.
   const cwd = process.cwd();
   const babelRuntime = path.join(cwd, 'node_modules', '@babel/runtime/package.json');
   let hasRuntime = existsSync(babelRuntime);
   
   const commonConfigs = {
   
       'plugins': [
           ['@babel/plugin-proposal-decorators', {'decoratorsBeforeExport': true}],
           ['@babel/plugin-proposal-class-properties'],
       ],
       'presets': ['@babel/preset-env'],
   
   };
   if (hasRuntime) {
       const pkg = require(babelRuntime);
   
       commonConfigs.plugins.unshift(['@babel/plugin-transform-runtime', {'version': pkg.version || '7.2.0'}]);
   }
   
   module.exports = {
       'sourceMap': false,
       'ignore': [],
       overrides: [{
           exclude: [/node_modules/, /wxa-cli/],
           ...commonConfigs
       },
       {
           test: /wxa-e2eTest/,
           ...commonConfigs
       }
   ]
   };
   

6. 项目目录下执行npx wxa2-apple test --e2e -r,开启录制模式

• 用开发者工具打开项目，页面左上角有结束录制button，说明已成功开启录制模式
• 此时与小程序的每一步交互都会录制为脚本，完成操作后，点击结束录制，输入用例名，对应脚本保存在__wxa_e2e_test__目录下

进行基准截屏

脚本录制过程中不会截屏，需要跑一次case脚本，完成基准截屏。若无基准截屏，用例回归时就不知道测试结果是否正确，所以这一步骤是必须的

• 脚本录制完毕后，需执行npx wxa2-apple test --e2e --base 回放用例，检查录制操作是否正确，且此次回放的截屏会作为后续回放用例的比较基准,用于判断测试是否通过
• 基准截屏存放在__wxa_e2e_test__/用例名/base_screenshot中（--test=test1,test2可指定要回放的用例，多个用例逗号分隔）

测试脚本回放

• npx wxa2-apple test --e2e 进入测试用例回放模式，操作截屏以时间命名保存在测试用例目录中（--test=test1,test2指定执行用例，多个用例逗号分隔）
• npx wxa2-apple test --e2e --py-diff 结果截屏进行相似度比对，不需要每个像素点一摸一样，需安装python3

二次开发录制好的测试用例

通过修改测试用例/record.js，可以进行用例二次开发 record.js是一个数组，每一项Object对应用户一次操作（点击、输入or删除一个字符）

|key|类型|默认值|备注| | :-----| :---- | :---- | :---- | | action | Object| 本次操作信息,小程序包装好的事件信息，可查看文档 | 【type：操作类型，tap touchstart点击，input输入】 【currentTarget.dataset._wxatestuniqueid：触发事件的页面元素id】| | screenshotDiff | Boolean| true | 此次交互后的截屏，是否要和base_screenshot目录下的首次截屏进行差异比对| | coustomExpect | Function| - | 编写自定义期望条件 |

wxa2-apple可支持的参数

• --no-mock wxa2-apple test --e2e --no-mock此次用例回归，不mock api，直连真实接口（默认会用录制时的api数据来mock）
• --screenshot-diff wxa2-apple test --e2e --screenshot-diff=fasle 此次用例回归，截屏是否要和base_screenshot目录下的首次截屏进行比对（不传值默认会比对，false不比对）
• --custom-expect 进行自定义期望匹配，需要record.js里每一步的customExpect函数编写期望代码
• --py-diff 结果截屏进行相似度比对，不需要每个像素点一摸一样，需安装python3

module.exports = [
    {
        "action": {
        	.....
        },
        customExpect() {
       	//自定义期望匹配函数
        }
    },{
    ...

开发文档

• wxa下增加.vscode/launch.json文件

{
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "args": ["test", "--e2e", "-r"],
            "program": "${workspaceFolder}/packages/wxa-cli/bin/wxa.js",
            "cwd": "填入你任意小程序dist目录-绝对路径",
            "env": {
                "NODE_ENV": "可选，一般为dev或build，根据你的项目写"
            },
            "runtimeExecutable": "可选，node位置，我的是/usr/local/opt/nvm/versions/node/v12.13.1/bin/node"
        }
    ]
}

• wxa目录下执行 npx lerna bootstrap
• pacakages/wxa-core，执行npm run dev,yarn link
• 小程序目录执行yarn link @wxa/core
• pacakages/wxa-cli，执行npm run dev
• vscode启动程序，开始调试开发