[ISSUE-#3855] Provided a feature to view version comparisons in the configDetails page (#3988)

* add detail previous config history api

* modify the previous config history url

* modify log description

* 详情页面添加“历史对比”按钮，点击可打开对比面板

* 点击“历史对比”按钮，获取上一版本数据

* 在查看历史对比的时候 不显示revert按钮

* append doc info

* Add unit tests for ISSUE#3855

* Add the previous updates to main.js and main.css

Co-authored-by: 赵延 <1060026287@qq.com>

config/src/main/java/com/alibaba/nacos/config/server/controller/HistoryController.java

@@ -28,9 +28,6 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
-import javax.servlet.http.HttpServletRequest;
-import javax.servlet.http.HttpServletResponse;
-
 /**
  * History management controller.
  *
@@ -46,11 +43,11 @@ public class HistoryController {
     /**
      * Query the list history config.
      *
-     * @param dataId dataId string value.
+     * @param dataId   dataId string value.
-     * @param group group string value.
+     * @param group    group string value.
-     * @param tenant tenant string value.
+     * @param tenant   tenant string value.
-     * @param appName appName string value.
+     * @param appName  appName string value.
-     * @param pageNo pageNo string value.
+     * @param pageNo   pageNo string value.
      * @param pageSize pageSize string value.
      * @param modelMap modeMap.
      * @return
@@ -72,12 +69,26 @@ public class HistoryController {
     }
     
     /**
-     * Query the detailed configuration history informations.
+     * Query the detailed configuration history information.
+     *
+     * @param nid history_config_info nid
+     * @return history config info
      */
     @GetMapping
-    public ConfigHistoryInfo getConfigHistoryInfo(HttpServletRequest request, HttpServletResponse response,
+    public ConfigHistoryInfo getConfigHistoryInfo(@RequestParam("nid") Long nid) {
-            @RequestParam("nid") Long nid, ModelMap modelMap) {
         return persistService.detailConfigHistory(nid);
     }
     
+    /**
+     * Query previous config history information.
+     *
+     * @param id config_info id
+     * @return history config info
+     * @since 1.4.0
+     */
+    @GetMapping(value = "/previous")
+    public ConfigHistoryInfo getPreviousConfigHistoryInfo(@RequestParam("id") Long id) {
+        return persistService.detailPreviousConfigHistory(id);
+    }
+    
 }

config/src/main/java/com/alibaba/nacos/config/server/service/repository/PersistService.java

@@ -1077,6 +1077,15 @@ public interface PersistService {
      */
     ConfigHistoryInfo detailConfigHistory(Long nid);
     
+    /**
+     * Get previous config detail.
+     *
+     * @param id id
+     * @return {@link ConfigHistoryInfo}
+     */
+    ConfigHistoryInfo detailPreviousConfigHistory(Long id);
+    
+    
     /**
      * insert tenant info.
      *
@@ -1229,4 +1238,5 @@ public interface PersistService {
      * @return count by tenantId
      */
     int tenantInfoCountByTenantId(String tenantId);
+    
 }

config/src/main/java/com/alibaba/nacos/config/server/service/repository/embedded/EmbeddedStoragePersistServiceImpl.java

@@ -2059,6 +2059,12 @@ public class EmbeddedStoragePersistServiceImpl implements PersistService {
         return databaseOperate.queryOne(sqlFetchRows, new Object[] {nid}, HISTORY_DETAIL_ROW_MAPPER);
     }
     
+    @Override
+    public ConfigHistoryInfo detailPreviousConfigHistory(Long id) {
+        String sqlFetchRows = "SELECT nid,data_id,group_id,tenant_id,app_name,content,md5,src_user,src_ip,op_type,gmt_create,gmt_modified FROM his_config_info WHERE nid = (select max(nid) from his_config_info where id = ?)";
+        return databaseOperate.queryOne(sqlFetchRows, new Object[] {id}, HISTORY_DETAIL_ROW_MAPPER);
+    }
+    
     @Override
     public void insertTenantInfoAtomic(String kp, String tenantId, String tenantName, String tenantDesc,
             String createResoure, final long time) {
@@ -2299,7 +2305,7 @@ public class EmbeddedStoragePersistServiceImpl implements PersistService {
         int skipCount = 0;
         List<Map<String, String>> failData = null;
         List<Map<String, String>> skipData = null;
-    
+        
         final BiConsumer<Boolean, Throwable> callFinally = (result, t) -> {
             if (t != null) {
                 throw new NacosRuntimeException(0, t);

config/src/main/java/com/alibaba/nacos/config/server/service/repository/extrnal/ExternalStoragePersistServiceImpl.java

@@ -2297,6 +2297,19 @@ public class ExternalStoragePersistServiceImpl implements PersistService {
         }
     }
     
+    @Override
+    public ConfigHistoryInfo detailPreviousConfigHistory(Long id) {
+        String sqlFetchRows = "SELECT nid,data_id,group_id,tenant_id,app_name,content,md5,src_user,src_ip,op_type,gmt_create,gmt_modified FROM his_config_info WHERE nid = (select max(nid) from his_config_info where id = ?) ";
+        try {
+            ConfigHistoryInfo historyInfo = jt
+                    .queryForObject(sqlFetchRows, new Object[] {id}, HISTORY_DETAIL_ROW_MAPPER);
+            return historyInfo;
+        } catch (DataAccessException e) {
+            LogUtil.FATAL_LOG.error("[detail-previous-config-history] error, id:{}", new Object[] {id}, e);
+            throw e;
+        }
+    }
+    
     @Override
     public void insertTenantInfoAtomic(String kp, String tenantId, String tenantName, String tenantDesc,
             String createResoure, final long time) {

console/src/main/resources/static/console-fe/src/components/DiffEditorDialog/DiffEditorDialog.js

@@ -32,6 +32,9 @@ class DiffEditorDialog extends React.Component {
 
   static propTypes = {
     publishConfig: PropTypes.func,
+    title: PropTypes.string,
+    currentArea: PropTypes.string,
+    originalArea: PropTypes.string,
   };
 
   constructor(props) {
@@ -71,6 +74,7 @@ class DiffEditorDialog extends React.Component {
       highlightDifferences: true,
       connect: 'align',
       collapseIdentical: false,
+      revertButtons: typeof this.props.publishConfig === 'function',
     });
   }
 
@@ -80,19 +84,29 @@ class DiffEditorDialog extends React.Component {
   }
 
   render() {
-    const { locale = {} } = this.props;
+    const { locale = {}, title, currentArea, originalArea } = this.props;
+    const publishButton = (
+      <Button type="primary" onClick={this.confirmPub.bind(this)}>
+        {locale.publish}
+      </Button>
+    );
     const footer = (
       <div>
         {' '}
-        <Button type="primary" onClick={this.confirmPub.bind(this)}>
+        {typeof this.props.publishConfig === 'function' ? (
-          {locale.publish}
+          publishButton
-        </Button>
+        ) : (
+          <Button type="primary" onClick={this.closeDialog.bind(this)}>
+            {locale.back}
+          </Button>
+        )}
       </div>
     );
+    console.log(footer);
     return (
       <div>
         <Dialog
-          title={locale.contents}
+          title={title}
           style={{ width: '80%' }}
           visible={this.state.dialogvisible}
           footer={footer}
@@ -101,8 +115,8 @@ class DiffEditorDialog extends React.Component {
           <div style={{ height: 400 }}>
             <div>
               <Row>
-                <Col style={{ textAlign: 'center' }}>{locale.currentArea}</Col>
+                <Col style={{ textAlign: 'center' }}>{currentArea}</Col>
-                <Col style={{ textAlign: 'center' }}>{locale.originalValue}</Col>
+                <Col style={{ textAlign: 'center' }}>{originalArea}</Col>
               </Row>
             </div>
             <div style={{ clear: 'both', height: 480 }} ref={this.diffeditor} />

console/src/main/resources/static/console-fe/src/locales/en-US.js

@@ -378,9 +378,7 @@ const I18N_CONF = {
   },
   DiffEditorDialog: {
     publish: 'Publish',
-    contents: 'Content Comparison',
+    back: 'Back',
-    currentArea: 'Current Value',
-    originalValue: 'Original Value',
   },
   ConfigEditor: {
     official: 'Official',
@@ -411,6 +409,9 @@ const I18N_CONF = {
     publish: 'Publish',
     back: 'Back',
     codeValErrorPrompt: 'Configuration information may have syntax errors. Are you sure to submit?',
+    dialogTitle: 'Content Comparison',
+    dialogCurrentArea: 'Current Value',
+    dialogOriginalArea: 'Original Value',
   },
   EditorNameSpace: {
     notice: 'Notice',
@@ -498,6 +499,9 @@ const I18N_CONF = {
     betaRelease: 'Beta Publish:',
     configuration: 'Configuration Content:',
     back: 'Back',
+    versionComparison: 'Version Comparison',
+    dialogCurrentArea: 'Current Version',
+    dialogOriginalArea: 'Previous Version',
   },
   ConfigRollback: {
     rollBack: 'Roll Back',

console/src/main/resources/static/console-fe/src/locales/zh-CN.js

@@ -376,9 +376,7 @@ const I18N_CONF = {
   },
   DiffEditorDialog: {
     publish: '确认发布',
-    contents: '内容比较',
+    back: '返回',
-    currentArea: '当前值',
-    originalValue: '原始值',
   },
   ConfigEditor: {
     official: '正式',
@@ -409,6 +407,9 @@ const I18N_CONF = {
     publish: '发布',
     back: '返回',
     codeValErrorPrompt: '配置信息可能有语法错误, 确定提交吗?',
+    dialogTitle: '内容比较',
+    dialogCurrentArea: '当前值',
+    dialogOriginalArea: '原始值',
   },
   EditorNameSpace: {
     notice: '提示',
@@ -495,6 +496,9 @@ const I18N_CONF = {
     betaRelease: 'Beta发布：',
     configuration: '配置内容：',
     back: '返回',
+    versionComparison: '版本对比',
+    dialogCurrentArea: '当前版本',
+    dialogOriginalArea: '上一版本',
   },
   ConfigRollback: {
     rollBack: '回滚配置',

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js

@@ -15,15 +15,27 @@
  */
 
 import React from 'react';
-import { Button, ConfigProvider, Dialog, Field, Form, Input, Loading, Tab } from '@alifd/next';
+import {
+  Button,
+  ConfigProvider,
+  Dialog,
+  Field,
+  Form,
+  Input,
+  Loading,
+  Tab,
+  Grid,
+} from '@alifd/next';
 import { getParams, request } from '../../../globalLib';
 import { generateUrl } from '../../../utils/nacosutil';
+import DiffEditorDialog from '../../../components/DiffEditorDialog';
 
 import './index.scss';
 import PropTypes from 'prop-types';
 
 const TabPane = Tab.Item;
 const FormItem = Form.Item;
+const { Row, Col } = Grid;
 
 @ConfigProvider.config
 class ConfigDetail extends React.Component {
@@ -56,6 +68,7 @@ class ConfigDetail extends React.Component {
     this.searchGroup = getParams('searchGroup') || '';
     this.pageSize = getParams('pageSize');
     this.pageNo = getParams('pageNo');
+    this.diffEditorDialog = React.createRef();
     // this.params = window.location.hash.split('?')[1]||'';
   }
 
@@ -188,6 +201,32 @@ class ConfigDetail extends React.Component {
     }
   }
 
+  openDiff() {
+    let self = this;
+    const { locale = {} } = this.props;
+    let leftvalue = this.monacoEditor.getValue();
+    let url = `v1/cs/history/previous?id=${this.valueMap.normal.id}`;
+    request({
+      url,
+      beforeSend() {
+        self.openLoading();
+      },
+      success(result) {
+        if (result != null) {
+          let rightvalue = result.content;
+          leftvalue = leftvalue.replace(/\r\n/g, '\n').replace(/\n/g, '\r\n');
+          rightvalue = rightvalue.replace(/\r\n/g, '\n').replace(/\n/g, '\r\n');
+          self.diffEditorDialog.current.getInstance().openDialog(leftvalue, rightvalue);
+        } else {
+          Dialog.alert({ title: locale.error, content: result.message });
+        }
+      },
+      complete() {
+        self.closeLoading();
+      },
+    });
+  }
+
   render() {
     const { locale = {} } = this.props;
     const { init } = this.field;
@@ -276,12 +315,23 @@ class ConfigDetail extends React.Component {
             <FormItem label={locale.configuration} required {...formItemLayout}>
               <div style={{ clear: 'both', height: 300 }} id="container" />
             </FormItem>
-            <FormItem label={' '} {...formItemLayout}>
+          </Form>
-              <Button type={'primary'} onClick={this.goList.bind(this)}>
+          <Row>
+            <Col span="24" className="button-list">
+              <Button size="large" type="primary" onClick={this.openDiff.bind(this)}>
+                {locale.versionComparison}
+              </Button>{' '}
+              <Button size="large" type="normal" onClick={this.goList.bind(this)}>
                 {locale.back}
               </Button>
-            </FormItem>
+            </Col>
-          </Form>
+          </Row>
+          <DiffEditorDialog
+            ref={this.diffEditorDialog}
+            title={locale.versionComparison}
+            currentArea={locale.dialogCurrentArea}
+            originalArea={locale.dialogOriginalArea}
+          />
         </Loading>
       </div>
     );

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigDetail/index.scss

@@ -13,3 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+ .button-list {
+  text-align: right;
+  button {
+    margin-left: 1em;
+    font-size: 14px;
+  }
+}

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigEditor/NewConfigEditor.js

@@ -605,6 +605,9 @@ class ConfigEditor extends React.Component {
                 });
               });
             }}
+            title={locale.dialogTitle}
+            currentArea={locale.dialogCurrentArea}
+            originalArea={locale.dialogOriginalArea}
           />
           <SuccessDialog ref={this.successDialog} />
         </Loading>

console/src/main/resources/static/console-fe/test/sample/configDetail.spec.js

@@ -0,0 +1,428 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const chai = require('chai');
+const should = chai.should();
+const JWebDriver = require('jwebdriver');
+chai.use(JWebDriver.chaiSupportChainPromise);
+const resemble = require('resemblejs-node');
+resemble.outputSettings({
+  errorType: 'flatDifferenceIntensity',
+});
+
+const rootPath = getRootPath();
+
+module.exports = function() {
+  let driver, testVars;
+
+  before(function() {
+    let self = this;
+    driver = self.driver;
+    testVars = self.testVars;
+  });
+
+  it('url: http://localhost:8000', async function() {
+    await driver.url(_(`http://localhost:8000`));
+  });
+
+  it('waitBody: ', async function() {
+    await driver
+      .sleep(500)
+      .wait('body', 30000)
+      .html()
+      .then(function(code) {
+        isPageError(code).should.be.false;
+      });
+  });
+
+  it('click: #username, 126, 37, 0', async function() {
+    await driver
+      .sleep(300)
+      .wait('#username', 30000)
+      .sleep(300)
+      .mouseMove(126, 37)
+      .click(0);
+  });
+
+  it('sendKeys: nacos{TAB}nacos{ENTER}', async function() {
+    await driver.sendKeys('nacos{TAB}nacos{ENTER}');
+  });
+
+  it('click: 详情 ( #root tr.first > td[role="gridcell"].last > div.next-table-cell-wrapper > div > a:nth-child(1), 11, 3, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait(
+        '#root tr.first > td[role="gridcell"].last > div.next-table-cell-wrapper > div > a:nth-child(1)',
+        30000
+      )
+      .sleep(300)
+      .mouseMove(11, 3)
+      .click(0);
+  });
+
+  it('click: 版本对比 ( //span[text()="版本对比"], 41, 0, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('//span[text()="版本对比"]', 30000)
+      .sleep(300)
+      .mouseMove(41, 0)
+      .click(0);
+  });
+
+  it('click: i.next-icon-close, 1, 2, 0', async function() {
+    await driver
+      .sleep(300)
+      .wait('i.next-icon-close', 30000)
+      .sleep(300)
+      .mouseMove(1, 2)
+      .click(0);
+  });
+
+  it('click: 返回 ( #root button.next-btn-normal, 36, 9, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('#root button.next-btn-normal', 30000)
+      .sleep(300)
+      .mouseMove(36, 9)
+      .click(0);
+  });
+
+  it('click: 详情 ( #root tr.first > td[role="gridcell"].last > div.next-table-cell-wrapper > div > a:nth-child(1), 10, 2, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait(
+        '#root tr.first > td[role="gridcell"].last > div.next-table-cell-wrapper > div > a:nth-child(1)',
+        30000
+      )
+      .sleep(300)
+      .mouseMove(10, 2)
+      .click(0);
+  });
+
+  it('click: 版本对比 ( //span[text()="版本对比"], 20, -1, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('//span[text()="版本对比"]', 30000)
+      .sleep(300)
+      .mouseMove(20, -1)
+      .click(0);
+  });
+
+  it('click: i.next-icon-close, 5, 5, 0', async function() {
+    await driver
+      .sleep(300)
+      .wait('i.next-icon-close', 30000)
+      .sleep(300)
+      .mouseMove(5, 5)
+      .click(0);
+  });
+
+  it('click: En ( //span[text()="En"], 13, 13, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('//span[text()="En"]', 30000)
+      .sleep(300)
+      .mouseMove(13, 13)
+      .click(0);
+  });
+
+  it('click: Version Comparison ( #root button.next-btn-primary > span.next-btn-helper, 67, 4, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('#root button.next-btn-primary > span.next-btn-helper', 30000)
+      .sleep(300)
+      .mouseMove(67, 4)
+      .click(0);
+  });
+
+  it('click: Back ( button.next-medium, 11, 21, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('button.next-medium', 30000)
+      .sleep(300)
+      .mouseMove(11, 21)
+      .click(0);
+  });
+
+  it('click: Version Comparison ( #root button.next-btn-primary > span.next-btn-helper, 128, 0, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('#root button.next-btn-primary > span.next-btn-helper', 30000)
+      .sleep(300)
+      .mouseMove(128, 0)
+      .click(0);
+  });
+
+  it('click: i.next-icon-close, 7, 9, 0', async function() {
+    await driver
+      .sleep(300)
+      .wait('i.next-icon-close', 30000)
+      .sleep(300)
+      .mouseMove(7, 9)
+      .click(0);
+  });
+
+  it('click: Back ( //span[text()="Back"], 11, -1, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('//span[text()="Back"]', 30000)
+      .sleep(300)
+      .mouseMove(11, -1)
+      .click(0);
+  });
+
+  it('click: Details ( #root tr.first > td[role="gridcell"].last > div.next-table-cell-wrapper > div > a:nth-child(1), 25, 8, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait(
+        '#root tr.first > td[role="gridcell"].last > div.next-table-cell-wrapper > div > a:nth-child(1)',
+        30000
+      )
+      .sleep(300)
+      .mouseMove(25, 8)
+      .click(0);
+  });
+
+  it('click: Version Comparison ( #root button.next-btn-primary > span.next-btn-helper, 104, 3, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('#root button.next-btn-primary > span.next-btn-helper', 30000)
+      .sleep(300)
+      .mouseMove(104, 3)
+      .click(0);
+  });
+
+  function _(str) {
+    if (typeof str === 'string') {
+      return str.replace(/\{\{(.+?)\}\}/g, function(all, key) {
+        return testVars[key] || '';
+      });
+    } else {
+      return str;
+    }
+  }
+};
+
+if (module.parent && /mocha\.js/.test(module.parent.id)) {
+  runThisSpec();
+}
+
+function runThisSpec() {
+  // read config
+  let webdriver = process.env['webdriver'] || '';
+  let proxy = process.env['wdproxy'] || '';
+  let config = require(rootPath + '/config.json');
+  let webdriverConfig = Object.assign({}, config.webdriver);
+  let host = webdriverConfig.host;
+  let port = webdriverConfig.port || 4444;
+  let group = webdriverConfig.group || 'default';
+  let match = webdriver.match(/([^\:]+)(?:\:(\d+))?/);
+  if (match) {
+    host = match[1] || host;
+    port = match[2] || port;
+  }
+  let testVars = config.vars;
+  let browsers = webdriverConfig.browsers;
+  browsers = browsers.replace(/^\s+|\s+$/g, '');
+  delete webdriverConfig.host;
+  delete webdriverConfig.port;
+  delete webdriverConfig.group;
+  delete webdriverConfig.browsers;
+
+  // read hosts
+  let hostsPath = rootPath + '/hosts';
+  let hosts = '';
+  if (fs.existsSync(hostsPath)) {
+    hosts = fs.readFileSync(hostsPath).toString();
+  }
+  let specName = path
+    .relative(rootPath, __filename)
+    .replace(/\\/g, '/')
+    .replace(/\.js$/, '');
+
+  browsers.split(/\s*,\s*/).forEach(function(browserName) {
+    let caseName = specName + ' : ' + browserName;
+
+    let browserInfo = browserName.split(' ');
+    browserName = browserInfo[0];
+    let browserVersion = browserInfo[1];
+
+    describe(caseName, function() {
+      this.timeout(600000);
+      this.slow(1000);
+
+      let driver;
+      before(function() {
+        let self = this;
+        let driver = new JWebDriver({
+          host: host,
+          port: port,
+        });
+        let sessionConfig = Object.assign({}, webdriverConfig, {
+          group: group,
+          browserName: browserName,
+          version: browserVersion,
+          'ie.ensureCleanSession': true,
+        });
+        if (proxy) {
+          sessionConfig.proxy = {
+            proxyType: 'manual',
+            httpProxy: proxy,
+            sslProxy: proxy,
+          };
+        } else if (hosts) {
+          sessionConfig.hosts = hosts;
+        }
+
+        try {
+          self.driver = driver
+            .session(sessionConfig)
+            .windowSize(1024, 768)
+            .config({
+              pageloadTimeout: 30000, // page onload timeout
+              scriptTimeout: 5000, // sync script timeout
+              asyncScriptTimeout: 10000, // async script timeout
+            });
+        } catch (e) {
+          console.log(e);
+        }
+
+        self.testVars = testVars;
+        let casePath = path.dirname(caseName);
+        if (config.reporter && config.reporter.distDir) {
+          self.screenshotPath = config.reporter.distDir + '/reports/screenshots/' + casePath;
+          self.diffbasePath = config.reporter.distDir + '/reports/diffbase/' + casePath;
+        } else {
+          self.screenshotPath = rootPath + '/reports/screenshots/' + casePath;
+          self.diffbasePath = rootPath + '/reports/diffbase/' + casePath;
+        }
+        self.caseName = caseName.replace(/.*\//g, '').replace(/\s*[:\.\:\-\s]\s*/g, '_');
+        mkdirs(self.screenshotPath);
+        mkdirs(self.diffbasePath);
+        self.stepId = 0;
+        return self.driver;
+      });
+
+      module.exports();
+
+      beforeEach(function() {
+        let self = this;
+        self.stepId++;
+        if (self.skipAll) {
+          self.skip();
+        }
+      });
+
+      afterEach(async function() {
+        let self = this;
+        let currentTest = self.currentTest;
+        let title = currentTest.title;
+        if (
+          currentTest.state === 'failed' &&
+          /^(url|waitBody|switchWindow|switchFrame):/.test(title)
+        ) {
+          self.skipAll = true;
+        }
+
+        if (
+          (config.screenshots && config.screenshots.captureAll && !/^(closeWindow):/.test(title)) ||
+          currentTest.state === 'failed'
+        ) {
+          const casePath = path.dirname(caseName);
+          const filepath = `${self.screenshotPath}/${self.caseName}_${self.stepId}`;
+          const relativeFilePath = `./screenshots/${casePath}/${self.caseName}_${self.stepId}`;
+          let driver = self.driver;
+          try {
+            // catch error when get alert msg
+            await driver.getScreenshot(filepath + '.png');
+            let url = await driver.url();
+            let html = await driver.source();
+            html = '<!--url: ' + url + ' -->\n' + html;
+            fs.writeFileSync(filepath + '.html', html);
+            let cookies = await driver.cookies();
+            fs.writeFileSync(filepath + '.cookie', JSON.stringify(cookies));
+            appendToContext(self, relativeFilePath + '.png');
+          } catch (e) {}
+        }
+      });
+
+      after(function() {
+        return this.driver.close();
+      });
+    });
+  });
+}
+
+function getRootPath() {
+  let rootPath = path.resolve(__dirname);
+  while (rootPath) {
+    if (fs.existsSync(rootPath + '/config.json')) {
+      break;
+    }
+    rootPath = rootPath.substring(0, rootPath.lastIndexOf(path.sep));
+  }
+  return rootPath;
+}
+
+function mkdirs(dirname) {
+  if (fs.existsSync(dirname)) {
+    return true;
+  } else {
+    if (mkdirs(path.dirname(dirname))) {
+      fs.mkdirSync(dirname);
+      return true;
+    }
+  }
+}
+
+function callSpec(name) {
+  try {
+    require(rootPath + '/' + name)();
+  } catch (e) {
+    console.log(e);
+    process.exit(1);
+  }
+}
+
+function isPageError(code) {
+  return (
+    code == '' ||
+    / jscontent="errorCode" jstcache="\d+"|diagnoseConnectionAndRefresh|dnserror_unavailable_header|id="reportCertificateErrorRetry"|400 Bad Request|403 Forbidden|404 Not Found|500 Internal Server Error|502 Bad Gateway|503 Service Temporarily Unavailable|504 Gateway Time-out/i.test(
+      code
+    )
+  );
+}
+
+function appendToContext(mocha, content) {
+  try {
+    const test = mocha.currentTest || mocha.test;
+
+    if (!test.context) {
+      test.context = content;
+    } else if (Array.isArray(test.context)) {
+      test.context.push(content);
+    } else {
+      test.context = [test.context];
+      test.context.push(content);
+    }
+  } catch (e) {
+    console.log('error', e);
+  }
+}
+
+function catchError(error) {}