test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(接口测试): 【接口测试】github#26757 

--bug=1030567 --user=白奇 【接口测试】github#26757，【特定场景脚本必现】浏览器访问接口自动化-编辑接口场景页面，浏览器报错，safari浏览器无法显示场景列表，谷歌浏览器样式存在穿透同时导致上下滚动页面到某处后页面自动上下胡乱滚动 https://www.tapd.cn/55049933/s/1424019
This commit is contained in:
baiqi 2023-10-10 10:50:47 +08:00 committed by fit2-zhao
parent 657b4decf7
commit e2476b7209
4 changed files with 171 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
api-test/frontend/src/business/definition/components/body/ApiBody.vue
View File

@ -107,7 +107,7 @@ import BatchAddParameter from '../basis/BatchAddParameter';
import Convert from '@/business/commons/json-schema/convert/convert';
import { getApiParamsConfigFields } from 'metersphere-frontend/src/utils/custom_field';
import ApiParamsConfig from '@/business/definition/components/request/components/ApiParamsConfig';
import { parse } from 'lossless-json'
import { parse } from 'lossless-json';
import CustomNum from '../../../commons/json-schema/convert/customNum';
export default {
@ -177,18 +177,8 @@ export default {
// 展开动画大概是 300ms 左右，使视觉效果更流畅
if (this.body.format === 'JSON-SCHEMA') {
this.$refs.jsonCodeEdit?.$el.querySelector('.ace_text-input')?.focus();
this.$refs.jsonCodeEdit?.$parent?.$parent?.$parent?.$parent?.$parent.$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'center',
});
} else if (this.codeEditActive) {
this.$refs.codeEdit?.$el.querySelector('.ace_text-input')?.focus();
this.$refs.codeEdit?.$parent?.$parent?.$parent?.$parent?.$parent?.$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'center',
});
}
}, 300);
},
@ -287,8 +277,8 @@ export default {
if (this.body.format === 'JSON-SCHEMA') {
if (this.body.raw) {
try {
const jsonObj = parse(this.body.raw)
this.body.jsonSchema = MsConvert.format(jsonObj);
const jsonObj = parse(this.body.raw);
this.body.jsonSchema = MsConvert.format(jsonObj);
} catch (e) {
this.body.format = 'JSON';
this.$message.error(this.$t('api_definition.body.json_format_error'));

54
api-test/frontend/src/business/definition/components/response/ResponseResult.vue
View File

@ -2,8 +2,9 @@
<div class="text-container" v-if="responseResult">
<el-tabs v-model="activeName" v-show="isActive">
<el-tab-pane :label="$t('api_test.definition.request.response_body')" name="body" class="pane">
<ms-sql-result-table v-if="isSqlType && activeName === 'body' && !responseResult.contentType"
:body="responseResult.body"/>
<ms-sql-result-table
v-if="isSqlType && activeName === 'body' && !responseResult.contentType"
:body="responseResult.body" />
<ms-code-edit
v-if="!isSqlType && isMsCodeEditShow && activeName === 'body' && !isPicture"
:mode="mode"
@ -11,13 +12,12 @@
:modes="modes"
:data.sync="responseResult.body"
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-image :src="srcUrl" fit="contain" style="width: 100%; height: 100%"></el-image>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
@ -26,7 +26,7 @@
:read-only="true"
:data.sync="responseResult.headers"
ref="codeEdit"
v-if="activeName === 'headers'"/>
v-if="activeName === 'headers'" />
</el-tab-pane>
<el-tab-pane v-if="isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
@ -36,7 +36,7 @@
:data.sync="responseResult.console"
ref="codeEdit"
v-if="activeName === 'console'"
height="calc(100vh - 300px)"/>
height="calc(100vh - 300px)" />
</el-tab-pane>
<el-tab-pane v-if="!isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
@ -45,11 +45,11 @@
:read-only="true"
:data.sync="responseResult.console"
ref="codeEdit"
v-if="activeName === 'console'"/>
v-if="activeName === 'console'" />
</el-tab-pane>
<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 :label="$t('api_test.request.extract.label')" name="label" class="pane">
@ -58,7 +58,7 @@
:read-only="true"
:data.sync="responseResult.vars"
v-if="activeName === 'label'"
ref="codeEdit"/>
ref="codeEdit" />
</el-tab-pane>
<el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
@ -67,7 +67,7 @@
:read-only="true"
:data.sync="reqMessages"
v-if="activeName === 'request_body'"
ref="codeEdit"/>
ref="codeEdit" />
</el-tab-pane>
<el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
@ -76,8 +76,8 @@
v-if="currentProtocol === 'SQL'"
:commands="sqlModes"
:default-command="mode"
@command="sqlModeChange"/>
<ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown"/>
@command="sqlModeChange" />
<ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown" />
</template>
</el-tab-pane>
</el-tabs>
@ -88,9 +88,9 @@
import MsAssertionResults from './AssertionResults';
import MsCodeEdit from '../MsCodeEdit';
import MsDropdown from '../../../../business/commons/MsDropdown';
import {BODY_FORMAT} from '../../model/ApiTestModel';
import { BODY_FORMAT } from '../../model/ApiTestModel';
import MsSqlResultTable from './SqlResultTable';
import {downloadByURL} from "fit2cloud-ui/src/tools/utils";
import { downloadByURL } from 'fit2cloud-ui/src/tools/utils';
export default {
name: 'MsResponseResult',
@ -122,7 +122,16 @@ export default {
mode: BODY_FORMAT.TEXT,
isMsCodeEditShow: true,
reqMessages: '',
contentType: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/webp', 'image/svg+xml', 'image/apng', 'image/avif'],
contentType: [
'image/png',
'image/jpeg',
'image/gif',
'image/bmp',
'image/webp',
'image/svg+xml',
'image/apng',
'image/avif',
],
srcUrl: '',
};
},
@ -137,11 +146,6 @@ export default {
setTimeout(() => {
// 展开动画大概是 300ms 左右，使视觉效果更流畅
this.$refs.codeEdit?.$el.querySelector('.ace_text-input')?.focus();
this.$refs.codeEdit?.$parent?.$parent?.$parent?.$parent?.$parent?.$el.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
}, 300);
},
immediate: true,
@ -156,7 +160,7 @@ export default {
},
showPicture() {
if (this.responseResult.contentType && this.contentType.includes(this.responseResult.contentType)) {
this.modes.push('picture')
this.modes.push('picture');
this.srcUrl = 'data:' + this.responseResult.contentType + ';base64,' + this.responseResult.imageUrl;
}
},
@ -239,7 +243,11 @@ export default {
return this.response && this.response.responseResult ? this.response.responseResult : {};
},
isPicture() {
return this.responseResult.contentType && this.contentType.includes(this.responseResult.contentType) && this.mode === 'picture';
return (
this.responseResult.contentType &&
this.contentType.includes(this.responseResult.contentType) &&
this.mode === 'picture'
);
},
},
};

2
framework/sdk-parent/frontend/src/components/environment/assertion/ApiJsonpathSuggest.vue
View File

@ -83,7 +83,7 @@ export default {
this.data = {};
try {
let stringedJSON = objStr.replace(
/(?<=[:\[,])\s*(-?\d+(\.\d+)?)(?=\s*([,\]}]))/g,
/(?:[:\[,])\s*(-?\d+(\.\d+)?)(?=\s*([,\]}]))/g,
'"$1"'
);
let param;

218
performance-test/frontend/src/business/report/components/samples/compnent/ResponseResult.vue
View File

@ -1,67 +1,114 @@
<template>
<div class="text-container" v-if="responseResult">
<el-tabs v-model="activeName" v-show="isActive" class="response-result">
<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"/>
<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-code-edit
v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'"
:mode="mode"
:read-only="true"
:modes="modes"
:data.sync="responseResult.body"
height="250px"
ref="codeEdit"/>
v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'"
:mode="mode"
:read-only="true"
:modes="modes"
:data.sync="responseResult.body"
height="250px"
ref="codeEdit"
/>
</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"
>
<ms-code-edit
:mode="'text'"
:read-only="true"
:data.sync="responseResult.headers"
ref="codeEdit"
v-if="activeName === 'headers'"/>
:mode="'text'"
:read-only="true"
:data.sync="responseResult.headers"
ref="codeEdit"
v-if="activeName === 'headers'"
/>
</el-tab-pane>
<el-tab-pane v-if="responseResult.console" :label="$t('api_test.definition.request.console')" name="console"
class="pane">
<el-tab-pane
v-if="responseResult.console"
:label="$t('api_test.definition.request.console')"
name="console"
class="pane"
>
<ms-code-edit
:mode="'text'"
:read-only="true"
:data.sync="responseResult.console"
ref="codeEdit"
v-if="activeName === 'console'"/>
:mode="'text'"
:read-only="true"
:data.sync="responseResult.console"
ref="codeEdit"
v-if="activeName === 'console'"
/>
</el-tab-pane>
<el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
<ms-assertion-results :assertions="responseResult.assertions" v-if="activeName === 'assertions'"/>
<el-tab-pane
:label="$t('api_report.assertions')"
name="assertions"
class="pane assertions"
>
<ms-assertion-results
:assertions="responseResult.assertions"
v-if="activeName === 'assertions'"
/>
</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"
>
<ms-code-edit
:mode="'text'"
:read-only="true"
:data.sync="responseResult.vars"
v-if="activeName === 'label'"
ref="codeEdit"/>
:mode="'text'"
:read-only="true"
:data.sync="responseResult.vars"
v-if="activeName === 'label'"
ref="codeEdit"
/>
</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"
>
<ms-code-edit
:mode="'text'"
:read-only="true"
:data.sync="reqMessages"
v-if="activeName === 'request_body'"
ref="codeEdit"/>
:mode="'text'"
:read-only="true"
:data.sync="reqMessages"
v-if="activeName === 'request_body'"
ref="codeEdit"
/>
</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"
>
<template v-slot:label>
<ms-dropdown
v-if="currentProtocol === 'SQL'"
:commands="sqlModes"
:default-command="mode"
@command="sqlModeChange"/>
<ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown"/>
v-if="currentProtocol === 'SQL'"
:commands="sqlModes"
:default-command="mode"
@command="sqlModeChange"
/>
<ms-dropdown
v-else
:commands="modes"
:default-command="mode"
@command="modeChange"
ref="modeDropdown"
/>
</template>
</el-tab-pane>
</el-tabs>
@ -69,13 +116,13 @@
</template>
<script>
import MsAssertionResults from './AssertionResults';
import MsCodeEdit from './MsCodeEdit';
import MsDropdown from './MsDropdown';
import MsSqlResultTable from './SqlResultTable';
import MsAssertionResults from "./AssertionResults";
import MsCodeEdit from "./MsCodeEdit";
import MsDropdown from "./MsDropdown";
import MsSqlResultTable from "./SqlResultTable";
export default {
name: 'MsResponseResult',
name: "MsResponseResult",
components: {
MsDropdown,
@ -92,18 +139,18 @@ export default {
data() {
return {
isActive: true,
activeName: 'body',
modes: ['text', 'json', 'xml', 'html'],
sqlModes: ['text', 'table'],
activeName: "body",
modes: ["text", "json", "xml", "html"],
sqlModes: ["text", "table"],
bodyFormat: {
TEXT: 'text',
JSON: 'json',
XML: 'xml',
HTML: 'html',
TEXT: "text",
JSON: "json",
XML: "xml",
HTML: "html",
},
mode: 'text',
mode: "text",
isMsCodeEditShow: true,
reqMessages: '',
reqMessages: "",
};
},
watch: {
@ -115,12 +162,7 @@ export default {
handler() {
setTimeout(() => {
// 展开动画大概是 300ms 左右，使视觉效果更流畅
this.$refs.codeEdit?.$el.querySelector('.ace_text-input')?.focus();
this.$refs.codeEdit?.$parent?.$parent?.$parent?.$parent?.$parent?.$el.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
this.$refs.codeEdit?.$el.querySelector(".ace_text-input")?.focus();
}, 300);
},
immediate: true,
@ -135,10 +177,12 @@ export default {
},
setBodyType() {
if (
this.response &&
this.response.responseResult &&
this.response.responseResult.headers &&
this.response.responseResult.headers.indexOf('Content-Type: application/json') > 0
this.response &&
this.response.responseResult &&
this.response.responseResult.headers &&
this.response.responseResult.headers.indexOf(
"Content-Type: application/json"
) > 0
) {
this.mode = this.bodyFormat.JSON;
this.$nextTick(() => {
@ -158,35 +202,43 @@ export default {
setReqMessage() {
if (this.response) {
if (!this.response.url) {
this.response.url = '';
this.response.url = "";
}
if (!this.response.headers) {
this.response.headers = '';
this.response.headers = "";
}
if (!this.response.cookies) {
this.response.cookies = '';
this.response.cookies = "";
}
if (!this.response.body) {
this.response.body = '';
this.response.body = "";
}
if (!this.response.responseResult) {
this.response.responseResult = {};
}
if (!this.response.responseResult.vars) {
this.response.responseResult.vars = '';
this.response.responseResult.vars = "";
}
this.reqMessages = '';
this.reqMessages = "";
if (this.response.url) {
this.reqMessages += this.$t('api_test.request.address') + ':\n' + this.response.url + '\n';
this.reqMessages +=
this.$t("api_test.request.address") +
":\n" +
this.response.url +
"\n";
}
if (this.response.headers) {
this.reqMessages += this.$t('api_test.scenario.headers') + ':\n' + this.response.headers + '\n';
this.reqMessages +=
this.$t("api_test.scenario.headers") +
":\n" +
this.response.headers +
"\n";
}
if (this.response.cookies) {
this.reqMessages += 'Cookie:' + this.response.cookies + '\n';
this.reqMessages += "Cookie:" + this.response.cookies + "\n";
}
this.reqMessages += 'Body:' + '\n' + this.response.body;
this.reqMessages += "Body:" + "\n" + this.response.body;
if (this.mode === this.bodyFormat.JSON) {
this.msCodeReload();
}
@ -200,15 +252,17 @@ export default {
computed: {
isSqlType() {
return (
this.currentProtocol === 'SQL' &&
this.response &&
this.response.responseResult &&
this.response.responseResult.responseCode === '200' &&
this.mode === 'table'
this.currentProtocol === "SQL" &&
this.response &&
this.response.responseResult &&
this.response.responseResult.responseCode === "200" &&
this.mode === "table"
);
},
responseResult() {
return this.response && this.response.responseResult ? this.response.responseResult : {};
return this.response && this.response.responseResult
? this.response.responseResult
: {};
},
},
};