From 418b62c009a3513e74cad2e3fbe4624a7e939f1f Mon Sep 17 00:00:00 2001
From: fanniehuang <huangm.ss.sysu@gmail.com>
Date: Tue, 12 Jan 2021 16:38:07 +0800
Subject: [PATCH] feat(e2e): support screenshot

re #80
---
 packages/wxa-cli/src/tester/e2eTester.js      |  6 ++---
 packages/wxa-cli/src/tester/readMe.md         |  7 +++---
 .../tester/wxa-e2eTest/e2eRecord2jsTpl.ejs    | 22 ++++++++++++++++---
 .../src/tester/wxa-e2eTest/e2eRecordBtn.wxa   |  8 ++++---
 .../src/tester/wxa-e2eTest/e2eTestSuite.js    |  8 ++++++-
 packages/wxa-cli/src/wxa.js                   |  1 +
 6 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/packages/wxa-cli/src/tester/e2eTester.js b/packages/wxa-cli/src/tester/e2eTester.js
index bcc53e6e..d628ae47 100644
--- a/packages/wxa-cli/src/tester/e2eTester.js
+++ b/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);
diff --git a/packages/wxa-cli/src/tester/readMe.md b/packages/wxa-cli/src/tester/readMe.md
index 8ffea733..dc51355d 100644
--- a/packages/wxa-cli/src/tester/readMe.md
+++ b/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__`，将按顺序执行所有用例
diff --git a/packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecord2jsTpl.ejs b/packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecord2jsTpl.ejs
index 90807bc5..205ad676 100644
--- a/packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecord2jsTpl.ejs
+++ b/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`)})
     });
 });
diff --git a/packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecordBtn.wxa b/packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecordBtn.wxa
index fb8ee986..896fe77a 100644
--- a/packages/wxa-cli/src/tester/wxa-e2eTest/e2eRecordBtn.wxa
+++ b/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({
diff --git a/packages/wxa-cli/src/tester/wxa-e2eTest/e2eTestSuite.js b/packages/wxa-cli/src/tester/wxa-e2eTest/e2eTestSuite.js
index 613dae86..2cbc78e3 100644
--- a/packages/wxa-cli/src/tester/wxa-e2eTest/e2eTestSuite.js
+++ b/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,
diff --git a/packages/wxa-cli/src/wxa.js b/packages/wxa-cli/src/wxa.js
index 76a806c0..0cff3a68 100644
--- a/packages/wxa-cli/src/wxa.js
+++ b/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();