功能测试测试报告同步和展示

backend/src/main/java/io/metersphere/base/domain/FucTestLog.java

+package io.metersphere.base.domain;
+
+public class FucLog {
+
+    private String seleniumLog;
+    private String browserDriverLog;
+
+    public String getSeleniumLog() {
+        return seleniumLog;
+    }
+
+    public void setSeleniumLog(String seleniumLog) {
+        this.seleniumLog = seleniumLog;
+    }
+
+    public String getBrowserDriverLog() {
+        return browserDriverLog;
+    }
+
+    public void setBrowserDriverLog(String browserDriverLog) {
+        this.browserDriverLog = browserDriverLog;
+    }
+}

backend/src/main/java/io/metersphere/base/domain/ZaleniumTest.java

+package io.metersphere.base.domain;
+
+public class ZaleniumTest {
+}

backend/src/main/java/io/metersphere/config/ProxyServletConfiguration.java

+package io.metersphere.config;
+
+import io.metersphere.proxy.ProxyServlet;
+import org.springframework.boot.web.servlet.ServletRegistrationBean;
+import org.springframework.context.EnvironmentAware;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.core.env.Environment;
+
+@Configuration
+public class SolrProxyServletConfiguration {
+
+  @Bean
+  public ServletRegistrationBean servletRegistrationBean(){
+    ServletRegistrationBean servletRegistrationBean = new ServletRegistrationBean(new ProxyServlet(), "/solr/*");
+//    servletRegistrationBean.addInitParameter("targetUri", "http://localhost:4444");
+//    servletRegistrationBean.addInitParameter(ProxyServlet.P_LOG, "false");
+    return servletRegistrationBean;
+  }
+
+}
\ No newline at end of file

backend/src/main/java/io/metersphere/config/RestTemplateConfig.java

+package io.metersphere.config;
+
+public class RestTemplateConfig {
+}

backend/src/main/java/io/metersphere/job/ZaleniumJob.java

+package io.metersphere.job;
+
+public class ZaleniumJob {
+}

backend/src/main/java/io/metersphere/service/ZaleniumService.java

+package io.metersphere.service;
+
+public class ZaleniumService {
+}

backend/src/test/java/io/metersphere/ZaleniumTest.java

+package io.metersphere;
+
+public class ZaleniumTest {
+}

frontend/package.json

@@ -41,7 +41,8 @@
       "eslint:recommended"
     ],
     "rules": {
-      "vue/no-unused-components": "off"
+      "vue/no-unused-components": "off",
+      "no-console":"off"
     },
     "parserOptions": {
       "parser": "babel-eslint"

frontend/src/business/components/functional/report/FunctionalReportView.vue

@@ -6,9 +6,9 @@
           <el-col :span="16">
             <el-row>
               <el-breadcrumb separator-class="el-icon-arrow-right">
-                <el-breadcrumb-item :to="{ path: '/' }">{{projectName}}</el-breadcrumb-item>
-                <el-breadcrumb-item>{{testName}}</el-breadcrumb-item>
-                <el-breadcrumb-item>{{reportName}}</el-breadcrumb-item>
+                <el-breadcrumb-item :to="{ path: '/' }">{{report.projectName}}</el-breadcrumb-item>
+                <el-breadcrumb-item>{{report.testName}}</el-breadcrumb-item>
+                <el-breadcrumb-item>{{report.name}}</el-breadcrumb-item>
               </el-breadcrumb>
             </el-row>
             <el-row class="ms-report-view-btns">
@@ -34,9 +34,11 @@
         <el-divider></el-divider>
 
         <el-tabs v-model="active" type="border-card" :stretch="true">
-
+          <el-tab-pane :label="$t('report.test_details')">
+            <result-details v-if="isRouterAlive" :video-url="videoUrl" />
+          </el-tab-pane>
           <el-tab-pane :label="$t('report.test_log_details')">
-            <ms-report-log-details />
+            <ms-report-log-details :report-id="report.id"/>
           </el-tab-pane>
         </el-tabs>
 
@@ -47,20 +49,22 @@
 
 <script>
   import MsReportLogDetails from './components/LogDetails';
+  import ResultDetails from './components/ResultDetails';
 
   export default {
     name: "FunctionalReportView",
     components: {
-      MsReportLogDetails
+      MsReportLogDetails,
+      ResultDetails
     },
     data() {
       return {
         result: {},
         active: '0',
-        reportId: '',
-        reportName: '',
-        testName: '',
-        projectName: ''
+        videoPath: '',
+        videoUrl: null,
+        report: {},
+        isRouterAlive: true //控制视图是否显示的变量
       }
     },
     methods: {
@@ -69,31 +73,27 @@
           this.result = this.$get("/functional/report/test/pro/info/" + this.reportId, res => {
             let data = res.data;
             if(data){
-              this.reportName = data.name;
-              this.testName = data.testName;
-              this.projectName = data.projectName;
+              this.report = data;
+              this.report.content = JSON.parse(this.report.content);
+              this.videoUrl = 'proxy/localhost:4444/' + this.report.content.videoUrl;
+              this.reload();//重新渲染组件
             }
-          })
+          });
         }
+      },
+      reload () {
+        this.isRouterAlive = false;//先关闭，
+        this.$nextTick(function () {
+          this.isRouterAlive = true;//再打开
+        })
       }
     },
-    created() {
-      this.reportId = this.$route.path.split('/')[4];
+    mounted() {
       this.initBreadcrumb();
     },
-    watch: {
-      '$route'(to) {
-        let reportId = to.path.split('/')[4];
-        if(reportId){
-          this.$get("/functional/report/test/pro/info/" + reportId, response => {
-            let data = response.data;
-            if(data){
-              this.reportName = data.name;
-              this.testName = data.testName;
-              this.projectName = data.projectName;
-            }
-          });
-        }
+    computed: {
+      reportId: function () {
+        return this.$route.params.reportId;
       }
     }
   }

frontend/src/business/components/functional/report/FunctionalTestReport.vue

@@ -131,7 +131,7 @@
       },
       handleEdit(report) {
         this.$router.push({
-          path: '/functional/reportView/' + report.id
+          path: '/functional/report/view/' + report.id
         })
       },
       handleDelete(report) {

frontend/src/business/components/functional/report/components/LogDetails.vue

 <template>
   <div>
-    LogDetails
+    <div>
+      <el-tabs type="border-card">
+        <el-tab-pane label="seleniumLog">
+          <el-input v-model="seleniumLog" rows="15" type="textarea"></el-input>
+        </el-tab-pane>
+        <el-tab-pane label="browserDriverLog">
+          <el-input v-model="browserDriverLog" rows="15" type="textarea"></el-input>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div>
+
+    </div>
   </div>
 </template>
 
 <script>
   export default {
-    name: "LogDetails"
+    name: "LogDetails",
+    data() {
+      return {
+        seleniumLog: '',
+        browserDriverLog: ''
+      }
+    },
+    props: {
+      reportId: {
+        type: String
+      }
+    },
+    mounted() {
+      this.getLogDetails(this.reportId);
+    },
+    watch: {
+      reportId: function (newVal) {
+        this.getLogDetails(newVal);
+      }
+    },
+    methods: {
+      getLogDetails(reportId) {
+        if(reportId){
+          let url = '/functional/report/test/log/' + reportId;
+          this.$get(url, (response) => {
+            this.seleniumLog = response.data.seleniumLog;
+            this.browserDriverLog = response.data.browserDriverLog;
+          });
+        }
+      }
+    }
   }
 </script>
 

frontend/src/business/components/functional/report/components/ResultDetails.vue

+<template>
+  <div>
+    <video id="video" controls="" autoplay="" class="embed-responsive-item">
+      <source id="video-source" :src="videoUrl" type="video/mp4">
+    </video>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "ResultDetails",
+    props: {
+      videoUrl: {
+        type: String
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  #video {
+    height: 50%;
+    width: 50%;
+  }
+
+</style>

frontend/src/i18n/en-US.js

@@ -104,7 +104,8 @@ export default {
     'test_overview': 'Test Overview',
     'test_request_statistics': 'Test Request Statistics',
     'test_error_log': 'Test Error Log',
-    'test_log_details': 'Test Log Details'
+    'test_log_details': 'Test Log Details',
+    'test_details': 'Test Details',
   },
   load_test: {
     'recent': 'Recent Tests',
@@ -159,9 +160,9 @@ export default {
     'create': 'Create Test',
   },
   fuc_test: {
-    'select_resource_pool': 'Please select resource pool',
+    'select_resource_pool': 'Please select resource pool'
   },
   i18n: {
-    'home': 'Home',
+    'home': 'Home'
   }
 };

frontend/src/i18n/zh-CN.js

@@ -104,7 +104,8 @@ export default {
     'test_overview': '测试概览',
     'test_request_statistics': '请求统计',
     'test_error_log': '错误记录',
-    'test_log_details': '日志详情'
+    'test_log_details': '日志详情',
+    'test_details': '测试详情',
   },
   load_test: {
     'recent': '最近的测试',
@@ -159,7 +160,7 @@ export default {
     'create': '创建测试',
   },
   fuc_test: {
-    'select_resource_pool': '请选择资源池',
+    'select_resource_pool': '请选择资源池'
   },
   i18n: {
     'home': '首页',