diff --git a/backend/src/main/java/io/metersphere/xpack b/backend/src/main/java/io/metersphere/xpack
index 356bb744a7..8de0d4e476 160000
--- a/backend/src/main/java/io/metersphere/xpack
+++ b/backend/src/main/java/io/metersphere/xpack
@@ -1 +1 @@
-Subproject commit 356bb744a72304067b9222cb0cb2be01d4ebff2a
+Subproject commit 8de0d4e47675bd1a5a8ea4c99e1a2b76e53ebc08
diff --git a/frontend/src/business/components/api/test/components/processor/BeanShellProcessor.vue b/frontend/src/business/components/api/test/components/processor/BeanShellProcessor.vue
new file mode 100644
index 0000000000..12889d49f4
--- /dev/null
+++ b/frontend/src/business/components/api/test/components/processor/BeanShellProcessor.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="script-content">
+    <ms-code-edit mode="java" :read-only="isReadOnly" :data.sync="beanShellProcessor.script" theme="eclipse" :modes="['java']" ref="codeEdit"/>
+  </div>
+</template>
+
+<script>
+    import MsCodeEdit from "../../../../common/components/MsCodeEdit";
+    export default {
+      name: "MsBeanShellProcessor",
+      components: {MsCodeEdit},
+      data() {
+        return {
+        }
+      },
+      props: {
+        type: {
+          type: String,
+        },
+        isReadOnly: {
+          type: Boolean,
+          default: false
+        },
+        beanShellProcessor: {
+          type: Object,
+          default() {
+            return {}
+          }
+        }
+      },
+    }
+</script>
+
+<style scoped>
+
+  .ace_editor {
+    border-radius: 5px;
+  }
+
+  .script-content {
+    padding: 15px 0;
+    height: 300px;
+  }
+
+</style>
diff --git a/frontend/src/business/components/api/test/components/request/ApiHttpRequestForm.vue b/frontend/src/business/components/api/test/components/request/ApiHttpRequestForm.vue
index 0da2523a54..a3e8ff3c1f 100644
--- a/frontend/src/business/components/api/test/components/request/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/test/components/request/ApiHttpRequestForm.vue
@@ -68,6 +68,12 @@
       <el-tab-pane :label="$t('api_test.request.extract.label')" name="extract">
         <ms-api-extract :is-read-only="isReadOnly" :extract="request.extract"/>
       </el-tab-pane>
+      <el-tab-pane :label="'预执行脚本'" name="beanShellPreProcessor">
+        <ms-bean-shell-processor :is-read-only="isReadOnly" :bean-shell-processor="request.beanShellPreProcessor"/>
+      </el-tab-pane>
+      <el-tab-pane :label="'后执行脚本'" name="beanShellPostProcessor">
+        <ms-bean-shell-processor :is-read-only="isReadOnly" :bean-shell-processor="request.beanShellPostProcessor"/>
+      </el-tab-pane>
     </el-tabs>
   </el-form>
 </template>
@@ -81,10 +87,13 @@ import MsApiExtract from "../extract/ApiExtract";
 import ApiRequestMethodSelect from "../collapse/ApiRequestMethodSelect";
 import {REQUEST_HEADERS} from "@/common/js/constants";
 import MsApiVariable from "@/business/components/api/test/components/ApiVariable";
+import MsBeanShellProcessor from "../processor/BeanShellProcessor";
 
 export default {
   name: "MsApiHttpRequestForm",
-  components: {MsApiVariable, ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiBody, MsApiKeyValue},
+  components: {
+    MsBeanShellProcessor,
+    MsApiVariable, ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiBody, MsApiKeyValue},
   props: {
     request: HttpRequest,
     scenario: Scenario,
diff --git a/frontend/src/business/components/common/components/MsCodeEdit.vue b/frontend/src/business/components/common/components/MsCodeEdit.vue
index 5e50d959db..4c0f1ca14f 100644
--- a/frontend/src/business/components/common/components/MsCodeEdit.vue
+++ b/frontend/src/business/components/common/components/MsCodeEdit.vue
@@ -1,5 +1,5 @@
 <template>
-    <editor v-model="formatData" :lang="mode" @init="editorInit" theme="chrome"/>
+    <editor v-model="formatData" :lang="mode" @init="editorInit" :theme="theme"/>
 </template>
 
 <script>
@@ -15,6 +15,12 @@
         data: {
           type: String
         },
+        theme: {
+          type: String,
+          default() {
+            return 'chrome'
+          }
+        },
         init: {
           type: Function
         },
@@ -54,7 +60,7 @@
           this.modes.forEach(mode => {
             require('brace/mode/' + mode); //language
           });
-          require('brace/theme/chrome')
+          require('brace/theme/' + this.theme)
           require('brace/snippets/javascript') //snippet
           if (this.readOnly) {
             editor.setReadOnly(true);