feat(接口测试): 支持返回数据类型为图片格式的接口测试,增加图片展示
--story=1013006 --user=王孝刚 github#26624 支持返回数据类型为图片格式的接口测试 https://www.tapd.cn/55049933/s/1422624
This commit is contained in:
parent
555d3bcc43
commit
46e7557bef
|
@ -2,15 +2,22 @@
|
||||||
<div class="text-container" v-if="responseResult">
|
<div class="text-container" v-if="responseResult">
|
||||||
<el-tabs v-model="activeName" v-show="isActive">
|
<el-tabs v-model="activeName" v-show="isActive">
|
||||||
<el-tab-pane :label="$t('api_test.definition.request.response_body')" name="body" class="pane">
|
<el-tab-pane :label="$t('api_test.definition.request.response_body')" name="body" class="pane">
|
||||||
<ms-sql-result-table v-if="isSqlType && activeName === 'body'" :body="responseResult.body" />
|
<ms-sql-result-table v-if="isSqlType && activeName === 'body' && !responseResult.contentType"
|
||||||
|
:body="responseResult.body"/>
|
||||||
<ms-code-edit
|
<ms-code-edit
|
||||||
v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'"
|
v-if="!isSqlType && isMsCodeEditShow && activeName === 'body' && !isPicture"
|
||||||
:mode="mode"
|
:mode="mode"
|
||||||
:read-only="true"
|
:read-only="true"
|
||||||
:modes="modes"
|
:modes="modes"
|
||||||
:data.sync="responseResult.body"
|
:data.sync="responseResult.body"
|
||||||
height="250px"
|
height="250px"
|
||||||
ref="codeEdit" />
|
ref="codeEdit"/>
|
||||||
|
<el-row v-if="isPicture && activeName === 'body'">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-image :src="srcUrl" fit="contain" style="width: 100%;height: 100%;"></el-image>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
|
<el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
|
||||||
|
@ -19,7 +26,7 @@
|
||||||
:read-only="true"
|
:read-only="true"
|
||||||
:data.sync="responseResult.headers"
|
:data.sync="responseResult.headers"
|
||||||
ref="codeEdit"
|
ref="codeEdit"
|
||||||
v-if="activeName === 'headers'" />
|
v-if="activeName === 'headers'"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane v-if="isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
|
<el-tab-pane v-if="isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
|
||||||
|
@ -29,7 +36,7 @@
|
||||||
:data.sync="responseResult.console"
|
:data.sync="responseResult.console"
|
||||||
ref="codeEdit"
|
ref="codeEdit"
|
||||||
v-if="activeName === 'console'"
|
v-if="activeName === 'console'"
|
||||||
height="calc(100vh - 300px)" />
|
height="calc(100vh - 300px)"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane v-if="!isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
|
<el-tab-pane v-if="!isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
|
||||||
|
@ -38,11 +45,11 @@
|
||||||
:read-only="true"
|
:read-only="true"
|
||||||
:data.sync="responseResult.console"
|
:data.sync="responseResult.console"
|
||||||
ref="codeEdit"
|
ref="codeEdit"
|
||||||
v-if="activeName === 'console'" />
|
v-if="activeName === 'console'"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
|
<el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
|
||||||
<ms-assertion-results :assertions="responseResult.assertions" v-if="activeName === 'assertions'" />
|
<ms-assertion-results :assertions="responseResult.assertions" v-if="activeName === 'assertions'"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
|
<el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
|
||||||
|
@ -51,7 +58,7 @@
|
||||||
:read-only="true"
|
:read-only="true"
|
||||||
:data.sync="responseResult.vars"
|
:data.sync="responseResult.vars"
|
||||||
v-if="activeName === 'label'"
|
v-if="activeName === 'label'"
|
||||||
ref="codeEdit" />
|
ref="codeEdit"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
|
<el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
|
||||||
|
@ -60,7 +67,7 @@
|
||||||
:read-only="true"
|
:read-only="true"
|
||||||
:data.sync="reqMessages"
|
:data.sync="reqMessages"
|
||||||
v-if="activeName === 'request_body'"
|
v-if="activeName === 'request_body'"
|
||||||
ref="codeEdit" />
|
ref="codeEdit"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
|
<el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
|
||||||
|
@ -69,8 +76,8 @@
|
||||||
v-if="currentProtocol === 'SQL'"
|
v-if="currentProtocol === 'SQL'"
|
||||||
:commands="sqlModes"
|
:commands="sqlModes"
|
||||||
:default-command="mode"
|
:default-command="mode"
|
||||||
@command="sqlModeChange" />
|
@command="sqlModeChange"/>
|
||||||
<ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown" />
|
<ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown"/>
|
||||||
</template>
|
</template>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
@ -81,8 +88,9 @@
|
||||||
import MsAssertionResults from './AssertionResults';
|
import MsAssertionResults from './AssertionResults';
|
||||||
import MsCodeEdit from '../MsCodeEdit';
|
import MsCodeEdit from '../MsCodeEdit';
|
||||||
import MsDropdown from '../../../../business/commons/MsDropdown';
|
import MsDropdown from '../../../../business/commons/MsDropdown';
|
||||||
import { BODY_FORMAT } from '../../model/ApiTestModel';
|
import {BODY_FORMAT} from '../../model/ApiTestModel';
|
||||||
import MsSqlResultTable from './SqlResultTable';
|
import MsSqlResultTable from './SqlResultTable';
|
||||||
|
import {downloadByURL} from "fit2cloud-ui/src/tools/utils";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'MsResponseResult',
|
name: 'MsResponseResult',
|
||||||
|
@ -114,12 +122,15 @@ export default {
|
||||||
mode: BODY_FORMAT.TEXT,
|
mode: BODY_FORMAT.TEXT,
|
||||||
isMsCodeEditShow: true,
|
isMsCodeEditShow: true,
|
||||||
reqMessages: '',
|
reqMessages: '',
|
||||||
|
contentType: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/webp', 'image/svg+xml', 'image/apng', 'image/avif'],
|
||||||
|
srcUrl: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
response() {
|
response() {
|
||||||
this.setBodyType();
|
this.setBodyType();
|
||||||
this.setReqMessage();
|
this.setReqMessage();
|
||||||
|
this.showPicture();
|
||||||
},
|
},
|
||||||
activeName: {
|
activeName: {
|
||||||
handler() {
|
handler() {
|
||||||
|
@ -143,6 +154,12 @@ export default {
|
||||||
sqlModeChange(mode) {
|
sqlModeChange(mode) {
|
||||||
this.mode = mode;
|
this.mode = mode;
|
||||||
},
|
},
|
||||||
|
showPicture() {
|
||||||
|
if (this.responseResult.contentType && this.contentType.includes(this.responseResult.contentType)) {
|
||||||
|
this.modes.push('picture')
|
||||||
|
this.srcUrl = 'data:' + this.responseResult.contentType + ';base64,' + this.responseResult.imageUrl;
|
||||||
|
}
|
||||||
|
},
|
||||||
setBodyType() {
|
setBodyType() {
|
||||||
if (
|
if (
|
||||||
this.response &&
|
this.response &&
|
||||||
|
@ -206,6 +223,7 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.setBodyType();
|
this.setBodyType();
|
||||||
this.setReqMessage();
|
this.setReqMessage();
|
||||||
|
this.showPicture();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isSqlType() {
|
isSqlType() {
|
||||||
|
@ -220,6 +238,9 @@ export default {
|
||||||
responseResult() {
|
responseResult() {
|
||||||
return this.response && this.response.responseResult ? this.response.responseResult : {};
|
return this.response && this.response.responseResult ? this.response.responseResult : {};
|
||||||
},
|
},
|
||||||
|
isPicture() {
|
||||||
|
return this.responseResult.contentType && this.contentType.includes(this.responseResult.contentType) && this.mode === 'picture';
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -27,6 +27,10 @@ public class ResponseResult {
|
||||||
|
|
||||||
private String console;
|
private String console;
|
||||||
|
|
||||||
|
private String contentType;
|
||||||
|
|
||||||
|
private byte[] imageUrl;
|
||||||
|
|
||||||
private final List<ResponseAssertionResult> assertions = new ArrayList<>();
|
private final List<ResponseAssertionResult> assertions = new ArrayList<>();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,10 +19,7 @@ import org.apache.jmeter.visualizers.backend.BackendListener;
|
||||||
import org.apache.jorphan.collections.HashTree;
|
import org.apache.jorphan.collections.HashTree;
|
||||||
|
|
||||||
import java.lang.reflect.Field;
|
import java.lang.reflect.Field;
|
||||||
import java.util.ArrayList;
|
import java.util.*;
|
||||||
import java.util.LinkedList;
|
|
||||||
import java.util.List;
|
|
||||||
import java.util.Map;
|
|
||||||
|
|
||||||
public class JMeterBase {
|
public class JMeterBase {
|
||||||
private final static String THREAD_SPLIT = " ";
|
private final static String THREAD_SPLIT = " ";
|
||||||
|
@ -30,6 +27,8 @@ public class JMeterBase {
|
||||||
private final static String SPLIT_EQ = "split==";
|
private final static String SPLIT_EQ = "split==";
|
||||||
private final static String SPLIT_AND = "split&&";
|
private final static String SPLIT_AND = "split&&";
|
||||||
|
|
||||||
|
private static final List<String> imageList = Arrays.asList("image/png", "image/jpeg", "image/gif", "image/bmp", "image/webp", "image/svg+xml", "image/apng", "image/avif");
|
||||||
|
|
||||||
public static HashTree getHashTree(Object scriptWrapper) throws Exception {
|
public static HashTree getHashTree(Object scriptWrapper) throws Exception {
|
||||||
Field field = scriptWrapper.getClass().getDeclaredField("testPlan");
|
Field field = scriptWrapper.getClass().getDeclaredField("testPlan");
|
||||||
field.setAccessible(true);
|
field.setAccessible(true);
|
||||||
|
@ -105,6 +104,11 @@ public class JMeterBase {
|
||||||
&& result.getResponseDataAsString().length() > size) {
|
&& result.getResponseDataAsString().length() > size) {
|
||||||
requestResult.setBody("");
|
requestResult.setBody("");
|
||||||
} else {
|
} else {
|
||||||
|
//判断返回的类型是否是图片
|
||||||
|
if (StringUtils.isNotEmpty(result.getContentType()) && imageList.contains(result.getContentType())) {
|
||||||
|
responseResult.setContentType(result.getContentType());
|
||||||
|
responseResult.setImageUrl(result.getResponseData());
|
||||||
|
}
|
||||||
responseResult.setBody(result.getResponseDataAsString());
|
responseResult.setBody(result.getResponseDataAsString());
|
||||||
}
|
}
|
||||||
responseResult.setHeaders(result.getResponseHeaders());
|
responseResult.setHeaders(result.getResponseHeaders());
|
||||||
|
|
Loading…
Reference in New Issue