Skip to content

Commit

Permalink
feat(e2e): 录制完生成json,执行用例时再动态转成jest脚本,方便后期维护,增加功能修复bug之类的不需要重新录制脚本
Browse files Browse the repository at this point in the history
re #80
  • Loading branch information
fanniehuang committed Jan 22, 2021
1 parent 418b62c commit 92c1c7d
Show file tree
Hide file tree
Showing 12 changed files with 326 additions and 141 deletions.
5 changes: 2 additions & 3 deletions packages/wxa-cli/scripts/buildLib.sh
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
# npx webpack "./lib/shim/promise.finally.js" --mode production --env.platform=node -o ./lib-dist/es/promise.finally.js

rm -f ./dist/tester/wxa-e2eTest/e2eRecord2jsTpl.ejs
rm -f ./dist/tester/wxa-e2eTest/e2eTestCaseTpl.ejs
rm -rf ./lib-dist/wxa-e2eTest
mkdir -p ./lib-dist/wxa-e2eTest
mkdir -p ./dist/tester/wxa-e2eTest
ln ./src/tester/wxa-e2eTest/e2eTestSuite.js ./lib-dist/wxa-e2eTest/e2eTestSuite.js
ln ./src/tester/wxa-e2eTest/e2eRecordBtn.wxa ./lib-dist/wxa-e2eTest/e2eRecordBtn.wxa
ln ./src/tester/wxa-e2eTest/e2eRecord2jsTpl.ejs ./dist/tester/wxa-e2eTest/e2eRecord2jsTpl.ejs

ln ./src/tester/wxa-e2eTest/e2eTestCaseTpl.ejs ./dist/tester/wxa-e2eTest/e2eTestCaseTpl.ejs
echo $MODE;
if test "$MODE" = 'dev'
then
Expand Down
17 changes: 12 additions & 5 deletions packages/wxa-cli/src/tester/e2eTester.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import crypto from 'crypto';
import debugPKG from 'debug';
import path from 'path';
import mkdirp from 'mkdirp';
import runTestCase from './wxa-e2eTest/runTestcase.js'

const debug = debugPKG('WXA:E2ETester');
const E2E_TEST_COMPONENT = 'wxa-e2e-record-btn';
Expand Down Expand Up @@ -174,9 +175,15 @@ class TesterBuilder extends Builder {

console.log('E2ETester work done');

// if (cmd.watch) this.watch(cmd);
if (!cmd.record) {
setTimeout(() => {
runTestCase(cmd, this.wxaConfigs);
}, 3000)

}
}


listen(cmdOptions) {
let {port=9421, cliPath} = cmdOptions;
let server = new Server({port}, logger);
Expand All @@ -193,14 +200,14 @@ class TesterBuilder extends Builder {
let cli = cliPath || path.join(this.wxaConfigs.wechatwebdevtools, clipath[process.platform]);

try {
let recordString = await e2eRecord2js(data.record, {cliPath: cli, name: data.name});
// let recordString = await e2eRecord2js(data.record, {cliPath: cli, name: data.name});
let outputPathBase = path.join(this.current, cmdOptions.outDir, data.name);
let e2eRecordOutputPath = `${outputPathBase}/index.test.js`;
let e2eRecordOutputPath = `${outputPathBase}/record.js`;
let apiRecordOutputPath = `${outputPathBase}/api.json`;
// save file;

writeFile(e2eRecordOutputPath, recordString);
writeFile(apiRecordOutputPath, JSON.stringify(data.apiRecord))
writeFile(e2eRecordOutputPath, `module.exports = ${JSON.stringify(data.record, null, 4)}`);
writeFile(apiRecordOutputPath, JSON.stringify(data.apiRecord, null, 4))
} catch (e) {
logger.error('生成测试案例失败', e);
}
Expand Down
11 changes: 7 additions & 4 deletions packages/wxa-cli/src/tester/readMe.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
* 小程序原生的showModal、showActionSheet上的点击操作,无法录制&回放。虽然可以往wxa/core植入点代码,知道用户点击了哪个,执行了哪个函数。但回放的时候,原生的元素取不到,如果直接执行对应函数的话,modal弹框会一直在界面上,除非用户操作不然都不会消失
* 已知bug:
* tap事件绑定在父元素上,且依赖子元素上data数据的话,会有问题。应该要每个元素都给id编号,然后tap事件找到detail.target真实触发的元素,回放的时候tap detail.target那个元素

* 待优化:
* 不带-r参数时,即回放模式,仅添加元素id(回放测试用例时能找到对应元素),不侵入过多代码(现在会劫持各种tap等事件,植入全局按钮组件)

2019年8月22日

Expand Down Expand Up @@ -41,14 +42,17 @@

# 使用手册


### 测试脚本录制
* 微信开发者工具,打开对应项目,勾选`不校验合法域名`
* windows系统,wxa.config.js里配置wechatwebdevtools: 微信开发者工具目录
* 项目目录下执行`wxa2 test --e2e -r`,开启录制模式
* 开始脚本录制,录制完成后脚本会保存在`__wxa_e2e_test__`目录下
* 脚本都录制完毕后需执行,`wxa2 test --e2e --base ` 回放用例并检查录制内容是否正确,且此次回放的截屏会作为后续回放用例的比较基准,用于判断测试是否通过,`--test=testName`可指定要回放的用例,多个用例逗号分隔

### 测试脚本回放
* `npm i -g jest`
* 项目下执行 `npm i miniprogram-automator`
* 项目下执行 `npm i miniprogram-automator looks-same`
* 开发者工具修改调试基础库 2.7.3以上(src/project.config.json需同步修改libVersion)
* 项目根目录下添加文件`babel.config.js`
```
Expand Down Expand Up @@ -83,5 +87,4 @@ module.exports = {
}]
}
```
* `wxa2 test --e2e` 进入测试用例回放模式
* 项目根目录下执行`jest __wxa_e2e_test__`,将按顺序执行所有用例
* `wxa2 test --e2e` 进入测试用例回放模式,`--test=testName`指定执行用例,多个用例逗号分隔,操作截屏以时间命名保存在测试用例目录中,带参数`--screenshot`则会与`expect_screenshot`的截屏进行diff
28 changes: 0 additions & 28 deletions packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecord2js.js

This file was deleted.

93 changes: 0 additions & 93 deletions packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecord2jsTpl.ejs

This file was deleted.

1 change: 0 additions & 1 deletion packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecordBtn.wxa
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ class e2eBtn {
console.log('e2etest upload fileName:', this.data.fileName);
let apiRecord = this.$$e2e_state.apiRecord;
const apiRecordObj = [...apiRecord.entries()].reduce((obj, [key, value]) => (obj[key] = value, obj), {})
console.log(apiRecord, apiRecordObj)
try {
let result = fetch('http://127.0.0.1:9421/record', {
name: this.data.fileName,
Expand Down
16 changes: 16 additions & 0 deletions packages/wxa-cli/src/tester/wxa-e2eTest/e2eTestCase2js.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const fs = require('fs');
const ejs = require('ejs');
const path = require('path');

const e2eRecord2js = (data) => {
return new Promise((resolve, reject) => {
ejs.renderFile(path.join(__dirname + '/e2eTestCaseTpl.ejs'), data, (err, str) => {
if (err) {
return reject(err);
}
resolve(str);
});
});
};

module.exports = e2eRecord2js;
Loading

0 comments on commit 92c1c7d

Please sign in to comment.