add：UI测试-元素库，自动化列表

test-ui/src/api/uiTest/automationTest.js

@@ -0,0 +1 @@
+// 

test-ui/src/components/FolderPage/index.vue

@@ -3,7 +3,8 @@
     <el-container>
       <el-aside v-loading="loading" :visible.sync="loading">
         <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom: 10px" clearable />
-        <el-tree class="filter-tree" :data="groupList" @node-click="nodeClick" node-key="id" highlight-current :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
+        <el-tree class="filter-tree" :data="groupList" @node-click="nodeClick" node-key="id" highlight-current
+          :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
           <span class="custom-tree-node" slot-scope="{ node, data }" v-if="groupState !== 'list' && editId === data.id">
             <span>
               <el-form ref="form" :model="form" :rules="rules">
@@ -45,7 +46,7 @@ export default {
       type: String,
       required: true,
       validator: function (value) {
-        return ['api', 'task', 'case'].includes(value)
+        return ['api', 'task', 'case', 'element', 'automation'].includes(value)
       }
     }
   },
@@ -93,6 +94,12 @@ export default {
         case "case":
           this.groupList[0].label = "用例管理";
           break;
+        case 'element':
+          this.groupList[0].label = "元素库";
+          break;
+        case 'automation':
+          this.groupList[0].label = "UI自动化";
+          break;
       }
       listGroup(this.type).then(res => {
         res.data.filter(item => item.parentId === 0).map(item => {

test-ui/src/views/test/uiTest/automationTest.vue

@@ -0,0 +1,133 @@
+<template>
+  <folder-page type="automation" @click="folderHandleSelected" ref="folder">
+    <div class="header">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          <i style="border: 1px solid #DCDFE6; padding: 5px 15px; border-radius: 4px;" class="el-icon-plus"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="1">创建场景</el-dropdown-item>
+          <el-dropdown-item command="2">创建指令</el-dropdown-item>
+          <el-dropdown-item command="3">关闭所有标签</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <div class="searchInput">
+        <i class="el-icon-search"></i>
+        <el-input class="input" v-model="search" placeholder="根据名称搜索"></el-input>
+      </div>
+    </div>
+    <div class="list">
+      <el-table :data="automationList">
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="id" label="ID" width="50" align="center" />
+        <el-table-column prop="performanceName" label="场景名称" width="150" align="center" sortable />
+        <el-table-column prop="createBy" label="用例等级" width="150" align="center" sortable />
+        <el-table-column prop="createTime" label="状态" width="150" align="center" sortable />
+        <el-table-column prop="updateTime" label="标签" width="150" align="center" />
+        <el-table-column prop="status" label="创建人" width="150" align="center" sortable />
+        <el-table-column prop="status" label="责任人" width="150" align="center" sortable />
+        <el-table-column prop="status" label="最后更新时间" width="150" align="center" sortable />
+        <el-table-column prop="status" label="步骤数" width="80" align="center" />
+        <el-table-column prop="status" label="执行结果" width="150" align="center" sortable />
+        <el-table-column prop="status" label="通过率" width="150" align="center" sortable />
+        <el-table-column prop="action" label="操作" align="center" fixed="right" width="200px">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit-outline" @click="hadleClickEdit(scope.row)">编辑</el-button>
+            <el-button type="text" icon="el-icon-view" @click="handleClickDetail(scope.row)"
+              style="color: green;">查看</el-button>
+            <el-button type="text" icon="el-icon-delete" style="color: red;"
+              @click="hadleClickDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
+      </div>
+    </div>
+  </folder-page>
+</template>
+
+<script>
+import FolderPage from "@/components/FolderPage/index.vue"
+
+export default {
+  name: "AutomationTest",
+  components: { FolderPage },
+  data() {
+    return {
+      automationList: [{}],
+      search: '',
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+      },
+      total: 0,
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    folderHandleSelected(id) {
+      if (id) {
+        // 获取列表
+      } else {
+        this.elementList = [];
+      }
+    },
+    // 创建元素
+    handleCommand(command) {
+      this.$message('click on item ' + command);
+    },
+    // 编辑
+    hadleClickEdit() { },
+    // 删除
+    hadleClickDelete(val) {
+      this.$modal.confirm('确认删除元素' + '？').then(() => {
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => { })
+    },
+    // 查看
+    handleClickDetail() { },
+    handleSizeChange() { },
+    handleCurrentChange() { },
+  }
+
+}
+
+</script>
+
+
+
+<style scoped lang="scss">
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .searchInput {
+    display: flex;
+    align-items: center;
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    padding: 0 10px;
+
+    .input {
+      width: 200px;
+    }
+
+    /* 去除 el-input 的边框 */
+    ::v-deep .el-input__inner {
+      border: none !important;
+    }
+  }
+}
+
+.list {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: flex-end;
+}
+</style>

test-ui/src/views/test/uiTest/elementLibrary.vue

@@ -0,0 +1,176 @@
+<template>
+  <folder-page type="element" @click="folderHandleSelected" ref="folder">
+    <div class="header">
+      <el-button icon="el-icon-circle-plus-outline" size="mini" @click="addElement">创建元素</el-button>
+      <div class="searchInput">
+        <i class="el-icon-search"></i>
+        <el-input class="input" v-model="search" placeholder="根据名称搜索"></el-input>
+      </div>
+    </div>
+    <div class="list">
+      <el-table :data="elementList">
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="id" label="ID" width="50" align="center" />
+        <el-table-column prop="name" label="元素名称" width="150" align="center" />
+        <el-table-column prop="createBy" label="定位类型" width="150" align="center" />
+        <el-table-column prop="createTime" label="元素定位" width="150" align="center" />
+        <el-table-column prop="updateTime" label="创建人" width="150" sortable align="center" />
+        <el-table-column prop="status" label="创建时间" width="150" align="center" sortable />
+        <el-table-column prop="action" label="操作" align="center" fixed="right" width="200px">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit-outline" @click="hadleClickEdit(scope.row)">编辑</el-button>
+            <el-button type="text" icon="el-icon-view" @click="handleClickDetail(scope.row)"
+              style="color: green;">查看</el-button>
+            <el-button type="text" icon="el-icon-delete" style="color: red;"
+              @click="hadleClickDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
+      </div>
+    </div>
+    <!-- 创建元素、编辑元素 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
+      <div class="form">
+        <el-form :model="editForm" :rules="rules" label-position="right" label-width="80px">
+          <el-form-item label="元素名称" prop="name1">
+            <el-input v-model="editForm.name1" placeholder="请输入元素名称"></el-input>
+          </el-form-item>
+          <el-form-item label="所属模块" prop="name2">
+            <el-select v-model="editForm.name2" placeholder="请选择">
+              <el-option key='1' label="模块1" value="1"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="定位类型" prop="name3">
+            <el-select v-model="editForm.name3" placeholder="请选择">
+              <el-option v-for="(item, index) in typeList" :key="index" :label="item" :value="index"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="元素定位" prop="name4">
+            <el-input v-model="editForm.name4" placeholder="请输入元素定位"></el-input>
+          </el-form-item>
+          <el-form-item label="备注" prop="name5">
+            <el-input v-model="editForm.name5" placeholder="请输入备注" type="textarea" :rows="2"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleWithAdd()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </folder-page>
+</template>
+
+<script>
+import FolderPage from "@/components/FolderPage/index.vue";
+
+export default {
+  name: "ElementLibrary.vue",
+  components: { FolderPage },
+  data() {
+    return {
+      search: '',
+      elementList: [{ name1: '名称1' }],
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      dialogTitle: '',
+      dialogVisible: false,
+      editForm: {
+        name1: null,
+        name2: null,
+        name3: null,
+        name4: null,
+        name5: null,
+      },
+      typeList: ['id', 'name', 'class', 'tag', 'link', 'plink', 'css', 'xpath', 'lable', 'value', 'index'],
+      rules: {
+        name1: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
+        name2: [{ required: true, message: '请选择所属模块', trigger: 'blur' }],
+        name3: [{ required: true, message: '请选择定位类型', trigger: 'blur' }],
+        name4: [{ required: true, message: '请输入元素定位', trigger: 'blur' }],
+      },
+      deleteVisible: false,
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    folderHandleSelected(id) {
+      if (id) {
+        // 获取列表
+      } else {
+        this.elementList = [];
+      }
+    },
+    // 创建元素
+    addElement() {
+      this.dialogTitle = '创建元素'
+      this.dialogVisible = true
+      for (let key in this.editForm) {
+        this.editForm[key] = null
+      }
+    },
+    // 编辑
+    hadleClickEdit(val) {
+      this.dialogTitle = '编辑元素'
+      this.dialogVisible = true
+      this.editForm = val
+    },
+    // 删除
+    hadleClickDelete(val) {
+      this.$modal.confirm('确认删除元素' + '？').then(() => {
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => { })
+    },
+    // 查看
+    handleClickDetail() { },
+    handleSizeChange() { },
+    // 确定
+    handleWithAdd() {
+      console.log(this.editForm)
+    },
+    handleCurrentChange() { },
+  },
+}
+
+</script>
+
+
+
+<style scoped lang="scss">
+.header {
+  display: flex;
+  justify-content: space-between;
+
+  .searchInput {
+    display: flex;
+    align-items: center;
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    padding: 0 10px;
+
+    .input {
+      width: 200px;
+    }
+
+    /* 去除 el-input 的边框 */
+    ::v-deep .el-input__inner {
+      border: none !important;
+    }
+  }
+}
+
+.list {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: flex-end;
+}
+</style>

test-ui/src/views/test/uiTest/testReport.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>测试报告</div>
+</template>
+<script>
+
+export default {
+  name: "TestReport",
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+
+}
+
+</script>
+
+
+
+<style scoped lang="scss"></style>