feat(接口测试): 支持返回数据类型为图片格式的接口测试,增加图片展示

--story=1013006 --user=王孝刚 github#26624 支持返回数据类型为图片格式的接口测试
https://www.tapd.cn/55049933/s/1422624
This commit is contained in:
wxg0103 2023-10-07 13:58:32 +08:00 committed by 刘瑞斌
parent 555d3bcc43
commit 46e7557bef
3 changed files with 45 additions and 16 deletions

View File

@ -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>

View File

@ -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<>();
} }

View File

@ -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());