ui自动化编辑回到列表不刷新列表

This commit is contained in:
2025-05-28 18:02:10 +08:00
parent 080a80d53d
commit e5dc3bab05
3 changed files with 284 additions and 152 deletions

View File

@@ -223,11 +223,23 @@ export const constantRoutes = [
path: '',
component: () => import('@/views/test/uiTest/editScene'),
name: 'EditScene',
noCache: true,
meta: { title: '编辑场景', activeMenu: '/ui-test' }
}
]
},
{
path: '/ui-test/automation-test',
component: Layout,
hidden: true,
children: [
{
path: '',
component: () => import('@/views/test/uiTest/automationTest'),
name: 'AutomationTestView',
meta: { title: 'UI自动化测试', activeMenu: '/ui-test' }
}
]
},
{
path: '/testplan/overview',
component: Layout,

View File

@@ -79,7 +79,7 @@
</div>
<!-- 数据提取 -->
<div v-if="item.operateType === '3'">
<el-collapse v-model="index" accordion>
<el-collapse v-model="item.activeCollapse" accordion>
<el-collapse-item name="1">
<template slot="title">
<div class="time">
@@ -234,7 +234,7 @@
</div>
<!-- 数据提取 -->
<div v-if="item.operateType === '3'">
<el-collapse v-model="index" accordion>
<el-collapse v-model="item.activeCollapse" accordion>
<el-collapse-item name="1">
<template slot="title">
<div class="time">
@@ -365,7 +365,7 @@
</div>
<!-- 断言 -->
<div v-if="item.operateType === '2'">
<el-collapse v-model="index" accordion>
<el-collapse v-model="item.activeCollapse" accordion>
<el-collapse-item name="1">
<template slot="title">
<div class="time">
@@ -399,7 +399,7 @@
<el-option key="1" label="是" value="1"></el-option>
<el-option key="2" label="否" value="2"></el-option>
</el-select>
<el-input v-model="content.expectations" placeholder="请输入期望弹窗文本"></el-input>
<el-input v-model="content.expectations" placeholder="请输入期望弹窗文本" style="width: 300px;"></el-input>
</div>
<div class="time-right">
<el-switch v-model="content.isDisabled" :active-value="1" :inactive-value="0"></el-switch>
@@ -410,7 +410,9 @@
<!-- 元素断言 -->
<div v-if="item.assertionQOList && item.assertionQOList.elementAssertions && item.assertionQOList.elementAssertions.length > 0" class="information">
<div>元素断言</div>
<div v-for="(content, index2) in item.assertionQOList.elementAssertions" class="time">
<div v-for="(content, index2) in item.assertionQOList.elementAssertions" class="assertion-block">
<!-- 元素选择部分 -->
<div class="time">
<div class="time-left">
<div class="operateObject-wrap">
<el-select v-model="content.operateObject" class="select" @change="() => handleOperateObjectChange(content)">
@@ -449,8 +451,10 @@
<el-switch v-model="content.isDisabled" :active-value="1" :inactive-value="0"></el-switch>
<el-button type="text" icon="el-icon-delete" style="color: red;" @click="deleteAssertion('2', index, index2)"></el-button>
</div>
<div class="time-left">
<el-select v-model="content.assertionMode">
</div>
<!-- 断言方式和期望值部分 -->
<div class="assertion-content">
<el-select v-model="content.assertionMode" class="select" style="width: 100%; margin-bottom: 10px;">
<el-option key="1" label="元素被选中(Checked)" value="1"></el-option>
<el-option key="2" label="元素可编辑(Editable)" value="2"></el-option>
<el-option key="3" label="元素存在(ElementPresent)" value="3"></el-option>
@@ -463,14 +467,22 @@
<el-option key="10" label="元素文本包含期望(InText)" value="10"></el-option>
<el-option key="11" label="元素文本不包含期望(NotInText)" value="11"></el-option>
</el-select>
<el-input v-model="content.expectations" placeholder="请输入期望值"></el-input>
<el-input
v-model="content.expectations"
placeholder="请输入期望值"
class="select"
:disabled="['1','2','3','4','5','6'].includes(content.assertionMode)"
style="width: 100%;">
</el-input>
</div>
</div>
</div>
<!-- 下拉框 -->
<div v-if="item.assertionQOList && item.assertionQOList.dropdownBoxes && item.assertionQOList.dropdownBoxes.length > 0" class="information">
<div>下拉框</div>
<div v-for="(content, index2) in item.assertionQOList.dropdownBoxes" class="time">
<div v-for="(content, index2) in item.assertionQOList.dropdownBoxes" class="assertion-block">
<!-- 元素选择部分 -->
<div class="time">
<div class="time-left">
<div class="operateObject-wrap">
<el-select v-model="content.operateObject" class="select" @change="() => handleOperateObjectChange(content)">
@@ -509,13 +521,15 @@
<el-switch v-model="content.isDisabled" :active-value="1" :inactive-value="0"></el-switch>
<el-button type="text" icon="el-icon-delete" style="color: red;" @click="deleteAssertion('3', index, index2)"></el-button>
</div>
<div class="time-left">
<el-select v-model="content.assertionMode">
</div>
<!-- 断言方式和期望值部分 -->
<div class="assertion-content">
<el-select v-model="content.assertionMode" class="select" style="width: 100%; margin-bottom: 10px;">
<el-option key="1" label="所选元素的值等于期望(SelectedValue)" value="1"></el-option>
<el-option key="2" label="下拉框选项显示的文本等于期望(SelectedLabel) " value="2"></el-option>
<el-option key="3" label="所选元素的值不等于期望(NotSelectedValue) " value="3"></el-option>
</el-select>
<el-input v-model="content.expectations" placeholder="请输入期望值"></el-input>
<el-input v-model="content.expectations" placeholder="请输入期望值" class="select" style="width: 100%;"></el-input>
</div>
</div>
</div>
@@ -524,7 +538,7 @@
<div>网页标题</div>
<div v-for="(content, index2) in item.assertionQOList.webTitles" class="time">
<div class="time-left">
<el-input v-model="content.expectations" placeholder="请输入期望的网页标题"></el-input>
<el-input v-model="content.expectations" placeholder="请输入期望的网页标题" style="width: 300px;"></el-input>
</div>
<div class="time-right">
<el-switch v-model="content.isDisabled" :active-value="1" :inactive-value="0"></el-switch>
@@ -709,6 +723,7 @@ export default {
},
isDisabled: '1',
name: '数据提取',
activeCollapse: '', // 初始化折叠面板状态
}
this.saveForm.beforeList.push(param)
}
@@ -736,6 +751,7 @@ export default {
},
isDisabled: '1',
name: '数据提取',
activeCollapse: '', // 初始化折叠面板状态
}
this.saveForm.afterList.push(param)
} else {
@@ -745,6 +761,7 @@ export default {
operateType: '2', // 断言
isDisabled: '1',
name: '断言',
activeCollapse: '', // 初始化折叠面板状态
assertionQOList: {
popupTexts: [], // 弹窗文本
elementAssertions: [], // 元素断言
@@ -892,15 +909,15 @@ export default {
break
case '2':
// 元素断言
this.saveForm.afterList[val].assertionQOList.popupTexts = this.saveForm.afterList[val].assertionQOList.elementAssertions.filter((item, index) => index !== val2)
this.saveForm.afterList[val].assertionQOList.elementAssertions = this.saveForm.afterList[val].assertionQOList.elementAssertions.filter((item, index) => index !== val2)
break
case '3':
// 下拉框
this.saveForm.afterList[val].assertionQOList.popupTexts = this.saveForm.afterList[val].assertionQOList.dropdownBoxes.filter((item, index) => index !== val2)
this.saveForm.afterList[val].assertionQOList.dropdownBoxes = this.saveForm.afterList[val].assertionQOList.dropdownBoxes.filter((item, index) => index !== val2)
break
case '4':
// 网页标题
this.saveForm.afterList[val].assertionQOList.popupTexts = this.saveForm.afterList[val].assertionQOList.webTitles.filter((item, index) => index !== val2)
this.saveForm.afterList[val].assertionQOList.webTitles = this.saveForm.afterList[val].assertionQOList.webTitles.filter((item, index) => index !== val2)
break
}
},
@@ -1058,7 +1075,7 @@ export default {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.advanced-setting {
padding: 20px;
@@ -1107,45 +1124,73 @@ export default {
width: 200px;
}
.list {
padding: 20px 0px;
.el-collapse {
margin: 15px 0;
border-top: 1px solid #EBEEF5;
border-bottom: 1px solid #EBEEF5;
::v-deep .el-collapse-item__header {
padding: 15px 0;
font-size: 14px;
}
::v-deep .el-collapse-item__wrap {
padding: 10px 0;
}
}
.number {
height: 24px;
width: 24px;
border-radius: 12px;
height: 28px;
width: 28px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px black;
background-color: #409EFF;
color: white;
font-size: 14px;
font-weight: 500;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
margin-right: 10px;
transition: transform 0.3s ease;
}
.time {
display: flex;
align-items: center;
padding: 10px;
padding: 15px;
justify-content: space-between;
width: 100%;
&:hover .number {
transform: scale(1.05);
}
.time-right {
gap: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
.time-left {
display: flex;
align-items: center;
gap: 10px;
> div:nth-child(2) { // 针对操作名称文字(等待时间、断言等)
font-size: 15px;
font-weight: 500;
}
}
}
.collapse-content {
padding: 15px;
}
}
.operateObject-wrap {
@@ -1156,5 +1201,67 @@ export default {
.information {
padding: 10px;
}
.assertion-block {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #EBEEF5;
border-radius: 4px;
.assertion-content {
margin-top: 10px;
padding: 10px;
background-color: #f5f7fa;
border-radius: 4px;
.select, .el-input {
width: 300px !important;
margin-bottom: 10px;
}
}
}
.operateObject-wrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
.select {
min-width: 200px;
}
}
}
.time {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 10px;
.time-left {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
}
.time-right {
display: flex;
align-items: center;
gap: 10px;
}
}
.select {
margin-right: 10px;
}
.information {
margin-top: 20px;
> div:first-child {
font-weight: bold;
margin-bottom: 10px;
}
}
</style>

View File

@@ -1,5 +1,6 @@
<template>
<folder-page type="automation" @click="folderHandleSelected" ref="folder">
<div v-if="searchForm.groupId">
<div class="header">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
@@ -52,6 +53,8 @@
<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-empty v-else/>
</folder-page>
</template>
@@ -60,7 +63,7 @@ import FolderPage from "@/components/FolderPage/index.vue"
import { getAutomationList, deleteAutomation, executeAutomationData } from "../../../api/uiTest/automationTest";
export default {
name: "AutomationTest",
name: "AutomationTestView",
components: { FolderPage },
data() {
return {
@@ -79,18 +82,27 @@ export default {
groupId: null,
},
total: 0,
isFromEdit: false, // 添加标记,用于判断是否从编辑页面返回
}
},
mounted() {
activated() {
// 当从编辑页面返回时,不刷新列表
if (this.isFromEdit) {
this.isFromEdit = false;
return;
}
},
methods: {
folderHandleSelected(id) {
if (id) {
// 获取列表
this.searchForm.groupId = id;
// 只有不是从编辑页面返回时才刷新列表
if (!this.isFromEdit) {
this.getAutomationListData();
}
} else {
this.automationList = [];
this.searchForm.groupId = null;
}
},
// 获取列表
@@ -112,6 +124,7 @@ export default {
},
// 编辑
hadleClickEdit(val) {
this.isFromEdit = true; // 标记即将进入编辑页面
this.$tab.openPage("编辑场景", "/ui-test/automation/edit", { id: val.id });
},
// 删除