xiaoe/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
温若烈酒慕茶凉
2025-04-23 17:28:38 +08:00
committed by 温若烈酒慕茶凉丷
parent 5ae19a8847
commit c5e18b985f
5 changed files with 356 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
test-ui/src/api/uiTest/automationTest.js Normal file
View File

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

37
test-ui/src/components/FolderPage/index.vue
View File

@@ -2,41 +2,42 @@
<div class="app-container">
<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-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]">
<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">
<el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input"/>
<el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input" />
</el-form>
</span>
<span>
<el-button type="text" size="mini"><i class="el-icon-check" @click="submitNode(node)"/></el-button>
<el-button type="text" size="mini"><i class="el-icon-close" @click="cancelNode(node)"/></el-button>
<el-button type="text" size="mini"><i class="el-icon-check" @click="submitNode(node)" /></el-button>
<el-button type="text" size="mini"><i class="el-icon-close" @click="cancelNode(node)" /></el-button>
</span>
</span>
<span class="custom-tree-node" slot-scope="{ node, data }" v-else>
<span @click="nodeSelected(data)" style="width: 100%;">{{ node.label }}</span>
<span v-if="data.id === 0">
<el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
<el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus" /></el-button>
</span>
<span class="custom-tree-node-option" v-else>
<el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
<el-button type="text" size="mini"><i class="el-icon-edit" @click="nodeEdit(node)"/></el-button>
<el-button type="text" size="mini"><i class="el-icon-delete" @click="nodeDelete(node)"/></el-button>
<el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus" /></el-button>
<el-button type="text" size="mini"><i class="el-icon-edit" @click="nodeEdit(node)" /></el-button>
<el-button type="text" size="mini"><i class="el-icon-delete" @click="nodeDelete(node)" /></el-button>
</span>
</span>
</el-tree>
</el-aside>
<el-main>
<slot/>
<slot />
</el-main>
</el-container>
</div>
</template>
<script>
import {addGroup, delGroup, listGroup, updateGroup} from "@/api/test/group";
import { addGroup, delGroup, listGroup, updateGroup } from "@/api/test/group";
export default {
name: "FolderPage",
@@ -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)
}
}
},
@@ -62,7 +63,7 @@ export default {
},
rules: {
name: [
{required: true, message: "节点名不能为空", trigger: "blur"}
{ required: true, message: "节点名不能为空", trigger: "blur" }
],
},
};
@@ -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 => {
@@ -106,7 +113,7 @@ export default {
this.groupId = res.data[0].id;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.groupId);
if (openList){
if (openList) {
openList.forEach(item => {
this.$refs.tree.store.nodesMap[item].expanded = true;
})
@@ -144,7 +151,7 @@ export default {
},
nodeAdd(node) {
this.groupState = "add";
const newChild = {id: -1, label: '', children: []};
const newChild = { id: -1, label: '', children: [] };
if (!node.data.children) {
this.$set(node.data, 'children', []);
}

133
test-ui/src/views/test/uiTest/automationTest.vue Normal file
View File

@@ -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>

176
test-ui/src/views/test/uiTest/elementLibrary.vue Normal file
View File

@@ -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>

24
test-ui/src/views/test/uiTest/testReport.vue Normal file
View File

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