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

--bug=1030567 --user=白奇【接口测试】github#26757，【特定场景脚本必现】浏览器访问接口自动化-编辑接口场景页面，浏览器报错，safari浏览器无法显示场景列表，谷歌浏览器样式存在穿透同时导致上下滚动页面到某处后页面自动上下胡乱滚动 https://www.tapd.cn/55049933/s/1424019
2023-10-10 10:50:47 +08:00 · 2023-10-10 10:50:47 +08:00 · e2476b7209
parent 657b4decf7
commit e2476b7209
4 changed files with 171 additions and 119 deletions
--- a/api-test/frontend/src/business/definition/components/body/ApiBody.vue
+++ b/api-test/frontend/src/business/definition/components/body/ApiBody.vue
@ -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,7 +277,7 @@ export default {
      if (this.body.format === 'JSON-SCHEMA') {
        if (this.body.raw) {
          try {
-              const jsonObj = parse(this.body.raw)
+            const jsonObj = parse(this.body.raw);
            this.body.jsonSchema = MsConvert.format(jsonObj);
          } catch (e) {
            this.body.format = 'JSON';
--- a/api-test/frontend/src/business/definition/components/response/ResponseResult.vue
+++ b/api-test/frontend/src/business/definition/components/response/ResponseResult.vue
@ -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'
+      );
    },
  },
 };
--- a/framework/sdk-parent/frontend/src/components/environment/assertion/ApiJsonpathSuggest.vue
+++ b/framework/sdk-parent/frontend/src/components/environment/assertion/ApiJsonpathSuggest.vue
@ -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;
--- a/performance-test/frontend/src/business/report/components/samples/compnent/ResponseResult.vue
+++ b/performance-test/frontend/src/business/report/components/samples/compnent/ResponseResult.vue
@ -1,8 +1,15 @@
 <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"
@ -10,58 +17,98 @@
          :modes="modes"
          :data.sync="responseResult.body"
          height="250px"
-            ref="codeEdit"/>
+          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'"/>
+          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'"/>
+          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"/>
+          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"/>
+          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"/>
+            @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,
@ -138,7 +180,9 @@ export default {
        this.response &&
        this.response.responseResult &&
        this.response.responseResult.headers &&
-          this.response.responseResult.headers.indexOf('Content-Type: application/json') > 0
+        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.currentProtocol === "SQL" &&
        this.response &&
        this.response.responseResult &&
-          this.response.responseResult.responseCode === '200' &&
-          this.mode === 'table'
+        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
+        : {};
    },
  },
 };