feat(e2e): support screenshot

re #80

packages/wxa-cli/src/tester/e2eTester.js

@@ -114,7 +114,7 @@ class TesterScheduler extends Schedule {
  ) {
  mdl.code = `
  let $$testSuitePlugin = require('wxa://wxa-e2eTest/e2eTestSuite.js');
- require('@wxa/core').wxa.use($$testSuitePlugin);
+ require('@wxa/core').wxa.use($$testSuitePlugin, {record: ${!!this.cmdOptions.record}});
  ${mdl.code}
  `;
  }
@@ -195,8 +195,8 @@ class TesterBuilder extends Builder {
  try {
  let recordString = await e2eRecord2js(data.record, {cliPath: cli, name: data.name});
  let outputPathBase = path.join(this.current, cmdOptions.outDir, data.name);
- let e2eRecordOutputPath = `${outputPathBase}.test.js`;
- let apiRecordOutputPath = `${outputPathBase}.api.json`;
+ let e2eRecordOutputPath = `${outputPathBase}/index.test.js`;
+ let apiRecordOutputPath = `${outputPathBase}/api.json`;
  // save file;
 
  writeFile(e2eRecordOutputPath, recordString);

packages/wxa-cli/src/tester/readMe.md

@@ -22,7 +22,7 @@
  "skipFiles": [
  "<node_internals>/**"
  ],
- "args": ["test", "--e2e"],
+ "args": ["test", "--e2e", "-r"],
  "program": "${workspaceFolder}/packages/wxa-cli/bin/wxa.js",
  "cwd": "填入你任意小程序dist目录-绝对路径",
  "env": {
@@ -43,7 +43,7 @@
 
 ### 测试脚本录制
 * 微信开发者工具，打开对应项目，勾选`不校验合法域名`
-* 项目目录下执行`wxa test --e2e`
+* 项目目录下执行`wxa2 test --e2e -r`,开启录制模式
 * 开始脚本录制，录制完成后脚本会保存在`__wxa_e2e_test__`目录下
 
 ### 测试脚本回放
@@ -83,4 +83,5 @@ module.exports = {
  }]
 }
 ```
-* 项目根目录下执行`jest __wxa_e2e_test__`
+* `wxa2 test --e2e` 进入测试用例回放模式
+* 项目根目录下执行`jest __wxa_e2e_test__`，将按顺序执行所有用例

packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecord2jsTpl.ejs

@@ -2,11 +2,25 @@
 /* eslint-disable no-undef */
 import automator from 'miniprogram-automator';
 import path from 'path';
-let fileName = path.basename(__filename).replace('.test.js', '')
-const apiMockMap = require(`./${fileName}.api.json`);
+import fs from 'fs';
+
+const apiMockMap = require(`./api.json`);
 
 let miniProgram;
 let page;
+const sleep = t => new Promise(resolve => setTimeout(resolve, t));
+
+// 截图目录
+let timeStamp = new Date();
+function num2Str(num) {
+ if (num >= 10) {
+ return `${num}`;
+ }
+ return `0${num}`
+}
+timeStamp = `${timeStamp.getFullYear()}-${num2Str(timeStamp.getMonth()+1)}-${num2Str(timeStamp.getDate()+1)} ${num2Str(timeStamp.getHours())}:${num2Str(timeStamp.getMinutes())}:${num2Str(timeStamp.getSeconds())}`;
+let count = 0;
+fs.mkdirSync(path.join(__dirname, timeStamp))
 
 beforeAll(async () => {
  jest.setTimeout(300000);
@@ -22,7 +36,6 @@ afterAll(async () => {
  if (miniProgram) await miniProgram.close();
 });
 
-const sleep = t => new Promise(resolve => setTimeout(resolve, t));
 describe('==== <%= name %> ====', () => {
 
  test('<%= name %>', async () => {
@@ -59,6 +72,8 @@ describe('==== <%= name %> ====', () => {
 
  await page.waitFor('.<%= item.id %>');
  element = await page.$('.<%= item.id %>')
+ miniProgram.screenshot({path: path.join(__dirname, timeStamp, `${++count}.png`)})
+
  <% if (!!~['tap', 'longpress'].indexOf(item.event)) { %>
  await element.<%= item.event%>();
  <% } else if (!!~['input'].indexOf(item.event)) { %>
@@ -73,5 +88,6 @@ describe('==== <%= name %> ====', () => {
  <% } %>
  await page.waitFor(300)
  <% }); %>
+ miniProgram.screenshot({path: path.join(__dirname, timeStamp, `${++count}.png`)})
  });
 });

packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecordBtn.wxa

@@ -1,5 +1,5 @@
 <template>
- <view >
+ <view wx:if="{{recordMode}}">
  <button class="e2e-startRecord" style="top: {{top}}px; left: {{left}}px;" data-e2ebtn="true" catchtap="tap" bindtouchstart="touchstart" catchtouchmove="touchmove">{{btnText}}</button>
  <view class="e2e-mask" wx:if="{{showInput}}">
  <view class="e2e-input">
@@ -28,7 +28,8 @@ class e2eBtn {
  diffY: 0,
  btnText: '',
  fileName: '',
- showInput: false
+ showInput: false,
+ recordMode: false
  }
  // 关闭测试用例命名弹框
  closeInput() {
@@ -38,7 +39,8 @@ class e2eBtn {
  }
  attached() {
  this.setData({
- btnText: this.$$e2e_state.recording ? END_BTN_TEXT : START_BTN_TEXT
+ btnText: this.$$e2e_state.recording ? END_BTN_TEXT : START_BTN_TEXT,
+ recordMode: this.$$e2e_state.recordMode
  });
  wx.onAppRouteDone(() => {
  this.setData({

packages/wxa-cli/src/tester/wxa-e2eTest/e2eTestSuite.js

@@ -8,7 +8,8 @@ let lastEventTime = {};
 let state = {
  record: [],
  recording: false,
- apiRecord: new Map()
+ apiRecord: new Map(),
+ recordMode: false
 };
 
 // 获取eventMap中对应事件方法
@@ -125,6 +126,11 @@ let $$testSuitePlugin = (options) => {
  return (vm, type)=>{
  // 劫持wx.request，做apimock
  if (type === 'App') {
+ if (options.record) {
+ // 自动开始录制
+ state.recording = true;
+ state.recordMode = true;
+ }
  const originRequest = wx.request;
  Object.defineProperty(wx, 'request', {
  configurable: true,

packages/wxa-cli/src/wxa.js

@@ -94,6 +94,7 @@ commander
 .option('-p, --port', '监听端口')
 .option('-o, --out-dir [outDir]', '测试用例输出文件夹', '__wxa_e2e_test__')
 .option('--cli-path [cliPath]', '微信开发者工具路径')
+.option('-r, --record', 'e2e测试录制模式')
 .action((cmd)=>{
  logger.info('Hey', `This is ${chalk.keyword('orange')('wxa@'+version)}, Running in ${chalk.keyword('orange')(process.env.NODE_ENV || 'development')}, Tester Mode`);
  let wxaConfigs = getConfigs();