feat(接口测试): 接口测试报告导出

This commit is contained in:
chenjianxing 2020-09-22 21:48:11 +08:00
parent 3674320e9b
commit b0faae20b5
4 changed files with 216 additions and 24 deletions

View File

@ -0,0 +1,136 @@
<template>
<el-card>
<div class="report-title title">接口测试报告</div>
<ms-metric-chart :content="content" :totalTime="totalTime"/>
<div class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario">
<div>
<el-card >
<template v-slot:header>
{{$t('api_report.scenario_name')}}{{scenario.name}}
</template>
<div class="ms-border" v-for="(request, index) in scenario.requestResults" :key="index" :request="request">
<div class="request-left">
<api-report-reqest-header-item :title="request.name">
<span class="url"> {{request.url}}</span>
</api-report-reqest-header-item>
</div>
<div class="request-right">
<api-report-reqest-header-item :title="$t('api_test.request.method')">
<span class="method"> {{request.method}}</span>
</api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.response_time')">
{{request.responseResult.responseTime}}
</api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.latency')">
{{request.responseResult.latency}} ms
</api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.request_size')">
{{request.requestSize}} bytes
</api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.response_size')">
{{request.responseResult.latency}} ms
</api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.error')">
{{request.responseResult.responseSize}} bytes
</api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.assertions')">
{{request.passAssertions + " / " + request.totalAssertions}}
</api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.response_code')">
{{request.responseResult.responseCode}}
</api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.result')">
<el-tag size="mini" type="success" v-if="request.success">
{{$t('api_report.success')}}
</el-tag>
<el-tag size="mini" type="danger" v-else>
{{$t('api_report.fail')}}
</el-tag>
</api-report-reqest-header-item>
</div>
</div>
</el-card>
</div>
</div>
</el-card>
</template>
<script>
import MsScenarioResult from "./components/ScenarioResult";
import MsRequestResultTail from "./components/RequestResultTail";
import ApiReportReqestHeaderItem from "./ApiReportReqestHeaderItem";
import MsMetricChart from "./components/MetricChart";
export default {
name: "MsApiReportExport",
components: {MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult},
props: {
content: Object,
totalTime: Number
},
data() {
return {
}
},
}
</script>
<style scoped>
.scenario-result {
margin-top: 20px;
margin-bottom: 20px;
}
.method {
color: #1E90FF;
font-size: 14px;
font-weight: 500;
}
.request-right {
float: right;
}
.request-left {
float: left;
margin-left: 20px;
}
.ms-border {
height: 60px;
}
.report-title {
font-size: 30px;
font-weight: bold;
height: 50px;
text-align: center;
margin-bottom: 20px;
}
.url {
color: #409EFF;
font-size: 14px;
font-weight: bold;
font-style: italic;
}
.el-card {
padding: 10px;
padding: 30px;
border-style: none;
}
</style>

View File

@ -0,0 +1,31 @@
<template>
<div class="item">
<div class="item-title">
{{title}}
</div>
<div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "ApiReportReqestHeaderItem",
props: {title: String}
}
</script>
<style scoped>
.item {
width: 120px;
height: 50px;
display: inline-block;
}
.item-title {
margin-bottom: 20px;
}
</style>

View File

@ -9,10 +9,10 @@
<span>{{ report.projectName }} / </span>
<router-link :to="path">{{ report.testName }}</router-link>
<span class="time">{{ report.createTime | timestampFormatDate }}</span>
<!--<el-button plain type="primary" size="mini" @click="handleExport(report.name)"
<el-button class="export-button" plain type="primary" size="mini" @click="handleExport(report.name)"
style="margin-left: 1200px">
{{$t('test_track.plan_view.export_report')}}
</el-button>-->
</el-button>
</el-col>
</el-row>
</header>
@ -36,6 +36,7 @@
<ms-request-result-tail v-if="isRequestResult" :request="request" :scenario-name="scenarioName"/>
</el-col>
</el-row>
<ms-api-report-export v-if="reportExportVisible" id="apiTestReport" :content="content" :total-time="totalTime"/>
</main>
</section>
</el-card>
@ -52,10 +53,14 @@ import MsMetricChart from "./components/MetricChart";
import MsScenarioResults from "./components/ScenarioResults";
import MsContainer from "@/business/components/common/components/MsContainer";
import MsMainContainer from "@/business/components/common/components/MsMainContainer";
import MsApiReportExport from "./ApiReportExport";
import {exportPdf} from "../../../../common/js/utils";
import html2canvas from "html2canvas";
export default {
name: "MsApiReportView",
components: {
MsApiReportExport,
MsMainContainer,
MsContainer, MsScenarioResults, MsRequestResultTail, MsMetricChart, MsScenarioResult, MsRequestResult
},
@ -70,6 +75,7 @@ export default {
isRequestResult: false,
request: {},
scenarioName: null,
reportExportVisible: false
}
},
activated() {
@ -139,6 +145,26 @@ export default {
this.request = requestResult.request;
this.scenarioName = requestResult.scenarioName;
});
},
handleExport(name) {
this.loading = true;
this.reportExportVisible = true;
let reset = this.exportReportReset;
this.$nextTick(function () {
setTimeout(() => {
html2canvas(document.getElementById('apiTestReport'), {
scale: 2
}).then(function(canvas) {
exportPdf(name, [canvas]);
reset();
});
}, 1000);
});
},
exportReportReset() {
this.reportExportVisible = false;
this.loading = false;
}
},
@ -170,30 +196,36 @@ export default {
</style>
<style scoped>
.report-container {
.report-container {
height: calc(100vh - 155px);
min-height: 600px;
overflow-y: auto;
}
}
.report-header {
.report-header {
font-size: 15px;
}
}
.report-header a {
.report-header a {
text-decoration: none;
}
}
.report-header .time {
.report-header .time {
color: #909399;
margin-left: 10px;
}
}
.report-container .fail {
.report-container .fail {
color: #F56C6C;
}
}
.report-container .is-active .fail {
.report-container .is-active .fail {
color: inherit;
}
}
.export-button {
float: right;
}
</style>

View File

@ -66,28 +66,21 @@
</div>
<div class="report-export" v-show="reportExportVisible">
<!--<div class="report-export">-->
<el-card id="testOverview">
<template v-slot:header >
<slot name="header">
<span class="title">{{$t('report.test_overview')}}</span>
</slot>
<span class="title">{{$t('report.test_overview')}}</span>
</template>
<ms-report-test-overview :report="report" ref="testOverview"/>
</el-card>
<el-card id="requestStatistics" title="'requestStatistics'">
<template v-slot:header >
<slot name="header">
<span class="title">{{$t('report.test_request_statistics')}}</span>
</slot>
<span class="title">{{$t('report.test_request_statistics')}}</span>
</template>
<ms-report-request-statistics :report="report" ref="requestStatistics"/>
</el-card>
<el-card id="errorLog" title="'errorLog'">
<template v-slot:header >
<slot name="header">
<span class="title">{{$t('report.test_error_log')}}</span>
</slot>
<span class="title">{{$t('report.test_error_log')}}</span>
</template>
<ms-report-error-log :report="report" ref="errorLog"/>
</el-card>