fix: 增加部分模糊查询，防止创建相同名称的测试所导致的问题

src/components/Tutorial.vue

@@ -37,7 +37,6 @@ export default {
       showStep: false,
       // status 表示某一个任务是否被完成，0表示未开始，1表示进行中，2表示已完成
       taskList: [
-        { name: 'display', description: 'Developer界面介绍', status: 0 },
         { name: 'taskList', description: '学习使用任务列表模块', status: 0 },
         { name: 'git', description: '学习使用提交记录模块', status: 0 },
         { name: 'pipeline', description: '学习使用流水线模块', status: 0 },
@@ -47,7 +46,6 @@ export default {
         { name: 'codereview', description: '学习开展分支评审任务', status: 0 },
       ],
       instructions: {
-        display: [],
         taskList: [
           {
             id: 'taskList', popUpId: 'sidebar', description: 'Developer系统提供了任务列表模块，用户可以管理项目开发过程中的所有任务。', action: '点击左边栏中的"任务列表"按钮', type: 'click',
@@ -102,7 +100,7 @@ export default {
             id: 'pipelineTable', popUpId: 'pipelineTabs', description: '在此表中可以看到所有的流水线信息', action: '查看流水线列表', type: 'display',
           },
           {
-            id: 'pipelineEditButton-springboot', popUpId: 'pipelineElTable', description: '为了使用流水线任务，我们还需要配置一些必要信息，比如代码仓库地址、端口等', action: '点击编辑按钮', type: 'click',
+            id: 'pipelineEditButton-springboot', popUpId: 'pipelineElTable', description: '为了使用流水线任务，我们还需要配置一些必要信息，比如代码仓库地址、端口等', action: '点击编辑按钮', type: 'click', selectBy: 'name',
           },
           {
             id: 'pipelineEditInput-branchOrHash', popUpId: 'pipelineEditInput-branchOrHash', description: '代码检查镜像会在构建前检查指定的分支或提交的代码', action: '输入需要生成检查镜像的分支或hash', type: 'input',
@@ -132,7 +130,13 @@ export default {
             id: 'pipelineEditFinish', popUpId: 'pipelineEditFinish', description: '', action: '点击按钮完成配置', type: 'click',
           },
           {
-            id: 'pipelineActivateButton-springboot', popUpId: 'pipelineActivateButton-springboot', description: '点击触发按钮后，系统会根据配置拉取代码并进行构建', action: '点击触发按钮', type: 'click',
+            id: 'pipelineActivateButton-springboot', popUpId: 'pipelineActivateButton-springboot', description: '点击触发按钮后，系统会根据配置拉取代码并进行构建', action: '点击触发按钮', type: 'click', selectBy: 'name',
+          },
+          {
+            id: 'tab-production', popUpId: 'projectContainer', description: '可以在"部署产物"标签页中查看所有的部署产物', action: '点击切换标签页', type: 'click',
+          },
+          {
+            id: 'productTable', popUpId: 'productTable', description: '此处以表格形式展示了所有的部署产物，可以看到其URL以及部署状态', action: '无需进行操作', type: 'display',
           },
         ],
         database: [
@@ -197,10 +201,10 @@ export default {
             id: 'testCreateConfirm', popUpId: 'testCreateConfirm', description: '', action: '点击按钮创建测试', type: 'click',
           },
           {
-            id: 'testExec-tutorial', popUpId: 'testElTable', description: '触发测试后，系统会按照配置发送Http请求并返回结果', action: '点击按钮触发测试', type: 'click',
+            id: 'testExec-tutorial', popUpId: 'testElTable', description: '触发测试后，系统会按照配置发送Http请求并返回结果', action: '点击按钮触发测试', type: 'click', selectBy: 'name',
           },
           {
-            id: 'testDetail-tutorial', popUpId: 'testElTable', description: '用户可以查看测试的执行历史等信息', action: '点击按钮查看详情', type: 'click',
+            id: 'testDetail-tutorial', popUpId: 'testElTable', description: '用户可以查看测试的执行历史等信息', action: '点击按钮查看详情', type: 'click', selectBy: 'name',
           },
           {
             id: 'testExecHistory', popUpId: 'testExecHistory', description: '', action: '查看接口测试的执行历史，点击前面的按钮可以查看测试执行返回结果', type: 'display',
@@ -287,11 +291,19 @@ export default {
     nextStep() {
       if (this.stepIndex !== -1) {
         // 存在前一个步骤，需要先消除之前的闪烁边框以及z-index提前
-        document.getElementById(this.currentSteps[this.stepIndex].id).classList.remove('border-glow');
+        let preElement;
+        if (this.currentSteps[this.stepIndex].selectBy === 'name') {
+          // eslint-disable-next-line prefer-destructuring
+          preElement = document.getElementsByName(this.currentSteps[this.stepIndex].id)[0];
+        } else {
+          preElement = document.getElementById(this.currentSteps[this.stepIndex].id);
+        }
+        preElement.classList.remove('border-glow');
         document.getElementById(this.currentSteps[this.stepIndex].popUpId).classList.remove('pop-up');
         // 去除事件监听器
         if (this.eventListeners[this.stepIndex] !== null) {
-          document.getElementById(this.currentSteps[this.stepIndex].id).removeEventListener(this.eventListeners[this.stepIndex].type, this.eventListeners[this.stepIndex].func);
+          preElement.removeEventListener(this.eventListeners[this.stepIndex].type, this.eventListeners[this.stepIndex].func);
+          // document.getElementById(this.currentSteps[this.stepIndex].id).removeEventListener(this.eventListeners[this.stepIndex].type, this.eventListeners[this.stepIndex].func);
         }
       }
       if (this.stepIndex === this.currentSteps.length - 1) {
@@ -307,7 +319,15 @@ export default {
       this.stepIndex += 1;
       this.stepFinish = false;
       // 更改元素的样式，增加闪烁边框以及增加z-index
-      document.getElementById(this.currentSteps[this.stepIndex].id).classList.add('border-glow');
+      let curElement;
+      if (this.currentSteps[this.stepIndex].selectBy === 'name') {
+        // eslint-disable-next-line prefer-destructuring
+        curElement = document.getElementsByName(this.currentSteps[this.stepIndex].id)[0];
+      } else {
+        curElement = document.getElementById(this.currentSteps[this.stepIndex].id);
+      }
+      curElement.classList.add('border-glow');
+      // document.getElementById(this.currentSteps[this.stepIndex].id).classList.add('border-glow');
       document.getElementById(this.currentSteps[this.stepIndex].popUpId).classList.add('pop-up');
       const { type } = this.currentSteps[this.stepIndex];
       let event;
@@ -322,7 +342,8 @@ export default {
           that.stepFinish = true;
           document.getElementById(that.currentSteps[that.stepIndex].popUpId).classList.remove('pop-up');
         };
-        document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('click', event);
+        curElement.addEventListener('click', event);
+        // document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('click', event);
         this.eventListeners.push({ type: 'click', func: event });
       } else if (type === 'select') {
         event = function () {
@@ -334,7 +355,8 @@ export default {
             that.stepFinish = expectedV === actualV;
           }
         };
-        document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('focus', event);
+        curElement.addEventListener('focus', event);
+        // document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('focus', event);
         this.eventListeners.push({ type: 'focus', func: event });
       } else if (type === 'input') {
         event = function () {
@@ -346,14 +368,16 @@ export default {
             that.stepFinish = expectedV === actualV;
           }
         };
-        document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('change', event);
+        curElement.addEventListener('change', event);
+        // document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('change', event);
         this.eventListeners.push({ type: 'change', func: event });
       } else if (type === 'row-click') {
         event = function () {
           that.stepFinish = true;
           document.getElementById(that.currentSteps[that.stepIndex].popUpId).classList.remove('pop-up');
         };
-        document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('row-click', event);
+        curElement.addEventListener('row-click', event);
+        // document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('row-click', event);
         this.eventListeners.push({ type: 'row-click', func: event });
       }
     },

src/views/Project/InterfaceTest.vue

@@ -63,7 +63,7 @@
           label="详情"
           align="center">
           <template #default="scope">
-            <el-button :id="'testDetail-'+scope.row.name" style="padding: 5px"
+            <el-button :name="'testDetail-'+scope.row.name" style="padding: 5px"
               @click="handleClick('detail', scope.row.id)"
               type="text"
               size="small">查看详情</el-button>
@@ -76,7 +76,7 @@
             <el-button id="testCreateButton" style="padding: 5px" @click="handleClick('create')" type="text" class="add-button">新建</el-button>
           </template>
           <template #default="scope">
-            <el-button :id="'testExec-'+scope.row.name" style="padding: 5px" @click="handleClick('trigger', scope.row.id)" type="text" size="small">触发</el-button>
+            <el-button :name="'testExec-'+scope.row.name" style="padding: 5px" @click="handleClick('trigger', scope.row.id)" type="text" size="small">触发</el-button>
             <el-button @click="handleClick('delete', scope.row.id)" type="text" size="small">删除</el-button>
           </template>
         </el-table-column>

src/views/Project/Pipeline.vue

@@ -82,8 +82,8 @@
               <ElButton id="pipelineCreateButton" style="padding: 5px" @click="handleClick('create')" type="text" class="add-button">新建</ElButton>
             </template>
             <template #default="scope">
-              <ElButton :id="'pipelineActivateButton-'+scope.row.name" style="padding: 5px" @click="handleClick('trigger', scope.row.id)" type="text" size="small">触发</ElButton>
-              <ElButton :id="'pipelineEditButton-'+scope.row.name" style="padding: 5px" @click="handleClick('edit', scope.row.id)" type="text" size="small">编辑</ElButton>
+              <ElButton :name="'pipelineActivateButton-'+scope.row.name" style="padding: 5px" @click="handleClick('trigger', scope.row.id)" type="text" size="small">触发</ElButton>
+              <ElButton :name="'pipelineEditButton-'+scope.row.name" style="padding: 5px" @click="handleClick('edit', scope.row.id)" type="text" size="small">编辑</ElButton>
               <ElButton @click="handleClick('delete', scope.row.id)" type="text" size="small">删除</ElButton>
             </template>
           </ElTableColumn>
@@ -281,7 +281,7 @@
       </ElDialog>
     </ElTabPane>
     <ElTabPane label="部署产物" name="production">
-      <ElTable :data="productions" width="100%" :default-sort="{prop: 'id', order: 'descending'}">
+      <ElTable id="productTable" style="padding: 5px" :data="productions" width="100%" :default-sort="{prop: 'id', order: 'descending'}">
         <ElTableColumn
           prop="id"
           label="ID"