add:ui测试,编辑和新增api

This commit is contained in:
2025-05-07 17:31:17 +08:00
parent fa30bb8bc5
commit 898fc59b50
4 changed files with 383 additions and 20 deletions

View File

@@ -59,7 +59,8 @@
<el-button size="mini" @click="handleClickSave">保存</el-button>
</div>
<SceneStep v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep" />
<AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" />
<AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep"
@changeSetting="changeSetting" />
</div>
<!-- 添加步骤 -->
<div class="add-btn">
@@ -80,7 +81,7 @@
<script>
import AdvancedSetting from './advancedSetting.vue'
import SceneStep from './sceneStep.vue'
import { getAutomationDetail, updateAutomation } from '../../../api/uiTest/automationTest'
import { getAutomationDetail, addAutomation } from '../../../api/uiTest/automationTest'
import { listGroup } from "../../../api/test/group"
export default {
@@ -109,7 +110,7 @@ export default {
},
stepList: [],
defaultActive: 0, // 当前激活菜单的 index
changeStep: null, // 选中的步骤
changeStep: { operateType: null }, // 选中的步骤
}
},
mounted() {
@@ -125,6 +126,10 @@ export default {
}
})
},
// 修改高级设置
changeSetting(val) {
this.informationForm.uiSceneStepsVOList[this.defaultActive - 1].uiHighSettingVOList = val
},
// 删除步骤
deleteStep(index) {
@@ -185,7 +190,7 @@ export default {
if (this.informationForm.dutyBy === null || this.informationForm.dutyBy === '') {
this.$modal.msgWarning("请输入责任人");
}
updateAutomation(this.informationForm).then(res => {
addAutomation(this.informationForm).then(res => {
if (res.code === 200) {
this.$modal.msgSuccess("编辑成功")
this.$tab.closeOpenPage({ path: "/ui-test/automation-test" });

View File

@@ -3,7 +3,7 @@
<div class="title">高级设置</div>
<div class="tab-wrap">
<el-tabs v-model="activeName">
<el-tab-pane label="元素库" name="first">
<el-tab-pane v-if="detail.operateType != '1' && detail.operateType != '2'" label="元素库" name="first">
<div class="element-wrap">
<div class="header">
<el-button icon="el-icon-circle-plus-outline" size="mini" @click="addElementData">创建元素</el-button>
@@ -57,16 +57,170 @@
</el-dialog>
</div>
</el-tab-pane>
<el-tab-pane label="前置操作" name="second">前置操作</el-tab-pane>
<el-tab-pane label="后置操作" name="third">后置操作</el-tab-pane>
<el-tab-pane label="前置操作" name="second">
<el-select v-model="saveForm.before" class="select">
<el-option key="1" label="等待时间" value="1"></el-option>
<el-option key="3" label="数据提取" value="3"></el-option>
</el-select>
<el-button type="primary" plain style="margin-left: 10px;" @click="addBefore">添加</el-button>
<div class="list">
<div v-for="(item, index) in saveForm.beforeList">
<!-- 等待时间 -->
<div v-if="item.operateType === '1'" class="time">
<div class="time-left">
<div class="number">{{ index + 1 }}</div>
<div>等待时间</div>
<el-input-number v-model="item.awateTime" :min="0"></el-input-number>
</div>
<div class="time-right">
<el-switch v-model="item.isDisabled" :active-value="1" :inactive-value="0">
</el-switch>
<el-button type="text" icon="el-icon-delete" style="color: red;"
@click="beforeDelete(index)"></el-button>
</div>
</div>
<!-- 数据提取 -->
<div v-if="item.operateType === '3'">
<el-collapse v-model="index" accordion>
<el-collapse-item name="1">
<template slot="title">
<div class="time">
<div class="time-left">
<div class="number">{{ index + 1 }}</div>
<div>数据提取</div>
<el-input v-model="item.name" class="select" @click.native.stop></el-input>
</div>
<div class="time-right">
<el-switch v-model="item.isDisabled" active-value="1" inactive-value="0"
@click.native.stop></el-switch>
<el-button type="text" icon="el-icon-delete" style="color: red;"
@click="beforeDelete(index)"></el-button>
</div>
</div>
</template>
<div class="collapse-content">
<div style="margin-bottom: 20px;">将提取的内容保存到变量中</div>
<el-select v-model="saveForm.informationType" class="select">
<el-option key="1" label="提取窗口信息" value="1"></el-option>
<el-option key="2" label="提取元素信息" value="2"></el-option>
</el-select>
<el-select v-if="saveForm.informationType === '1'" v-model="saveForm.windowType" class="select"
style="margin: 0 10px;">
<el-option key="1" label="窗口 Handle(storeWindowHandle)" value="1"></el-option>
<el-option key="2" label="网页标题(storeTitle) " value="2"></el-option>
</el-select>
<el-select v-if="saveForm.informationType === '2'" v-model="saveForm.elementType" class="select"
style="margin: 0 10px;">
<el-option key="1" label="普通对象(store)" value="1"></el-option>
<el-option key="2" label="元素文本(storeText)" value="2"></el-option>
<el-option key="3" label="元素值(storeValue)" value="3"></el-option>
<el-option key="4" label="元素属性(storeAttribute)" value="4"></el-option>
<el-option key="5" label="CSS属性(storeCssAttribute)" value="5"></el-option>
<el-option key="6" label="匹配 xpath 的元素数量(storeXpathCount)" value="6"></el-option>
</el-select>
<el-button type="primary" plain @click="addBeforeDataExtractionQOList">添加</el-button>
<!-- 提取窗口信息 -->
<div v-if="saveForm.beforeWindowList.length > 0" class="information">
<div>提取窗口信息</div>
<div v-for="row in saveForm.beforeWindowList">
<div class="time">
<div class="time-left">
<el-select v-model="row.windowType" class="select">
<el-option key="1" label="窗口 Handle(storeWindowHandle)" value="1"></el-option>
<el-option key="2" label="网页标题(storeTitle) " value="2"></el-option>
</el-select>
<el-input class="select" style="margin:0px 10px;" placeholder="请输入"></el-input>
<el-tooltip class="item" effect="dark"
content="将提取的内容保存到变量中,如果元素不存在,则返回值为 'NoSuchElementException'" placement="right">
<i class="el-icon-info"></i>
</el-tooltip>
</div>
<div class="time-right">
<el-switch v-model="row.isDisabled" active-value="1" inactive-value="0"
@click.native.stop></el-switch>
<el-button type="text" icon="el-icon-delete" style="color: red;"
@click="beforeWindowDelete(index)"></el-button>
</div>
</div>
</div>
</div>
<!-- 提取元素信息 -->
<div v-if="saveForm.beforeElementList.length > 0" class="information">
<div>提取元素信息</div>
<div v-for="row in saveForm.beforeElementList">
<div class="time">
<div class="time-left">
<el-select v-model="row.elementType" class="select">
<el-option key="1" label="普通对象(store)" value="1"></el-option>
<el-option key="2" label="元素文本(storeText)" value="2"></el-option>
<el-option key="3" label="元素值(storeValue)" value="3"></el-option>
<el-option key="4" label="元素属性(storeAttribute)" value="4"></el-option>
<el-option key="5" label="CSS属性(storeCssAttribute)" value="5"></el-option>
<el-option key="6" label="匹配 xpath 的元素数量(storeXpathCount)" value="6"></el-option>
</el-select>
<el-input class="select" style="margin:0px 10px;" placeholder="请输入"></el-input>
<el-tooltip class="item" effect="dark"
content="将提取的内容保存到变量中,如果元素不存在,则返回值为 'NoSuchElementException'" placement="right">
<i class="el-icon-info"></i>
</el-tooltip>
</div>
<div class="time-right">
<el-switch v-model="row.isDisabled" active-value="1" inactive-value="0"
@click.native.stop></el-switch>
<el-button type="text" icon="el-icon-delete" style="color: red;"
@click="beforeWindowDelete(index)"></el-button>
</div>
</div>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="后置操作" name="third">
<el-select v-model="saveForm.after" class="select">
<el-option key="1" label="等待时间" value="1"></el-option>
<el-option key="2" label="断言" value="2"></el-option>
<el-option key="3" label="数据提取" value="3"></el-option>
</el-select>
<el-button type="primary" plain style="margin-left: 10px;" @click="addAfter">添加</el-button>
</el-tab-pane>
<el-tab-pane label="错误处理" name="forth">
<el-form :model="saveForm">
<el-form-item label="处理方式">
el
<el-select v-model="saveForm.errorHandling" class="select">
<el-option key="1" label="终止流程" value="1"></el-option>
<el-option key="2" label="忽略异常并继续执行" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="其他设置" name="fifth">
<el-form :model="saveForm">
<el-form-item v-show="detail.operateType != '1' && detail.operateType != '2'" label="等待元素超时时间">
<el-input-number v-model="saveForm.waitElementTime" :min="0"></el-input-number>
<el-tooltip class="item" effect="dark"
content="如果步骤涉及的元素定位在一定时间内无法找到元素,将会提示超时错误。(注:若超时错误的日志显示会四舍五入成 秒,但不影响等待具体时长)" placement="right">
<i class="el-icon-info" style="margin-left: 20px;"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="截图配置">
<el-select v-model="saveForm.screenshotConfiguration" class="select">
<el-option :key="1" label="当前步骤截图" :value="1"></el-option>
<el-option :key="2" label="出现异常截图" :value="2"></el-option>
<el-option :key="3" label="不截图" :value="3"></el-option>
</el-select>
<el-tooltip class="item" effect="dark" content="当前步骤截图: 场景步骤执行后截图步骤如果触发原生弹窗alert或prompt或不存在页面时截图不生效;出现异常截图:
当前步骤出现异常截图,包括场景步骤异常、数据提取和断言异常;
不截图: 当前场景步骤不截图。" placement="right">
<i class="el-icon-info" style="margin-left: 20px;"></i>
</el-tooltip>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="其他设置" name="fifth">其他设置</el-tab-pane>
</el-tabs>
</div>
</div>
@@ -84,8 +238,22 @@ export default {
data() {
return {
activeName: 'first',
uiHighSettingVOList: [], //
saveForm: {
errorHandling: '1', // 错误处理
waitElementTime: 15000, // 等待元素超时时间
screenshotConfiguration: '1', // 截图配置
beforeList: [], // 前置数组
afterList: [], // 后置数组
before: '1',
after: '1',
informationType: '1',
windowType: null,
elementType: null,
beforeWindowList: [], // 前置-窗口信息数组
beforeElementList: [], // 前置-元素信息数组
afterWindowList: [], // 后置-窗口信息数组
afterElementList: [], // 后置-元素信息数组
},
searchForm: {
pageNum: 1,
@@ -169,10 +337,148 @@ export default {
this.searchForm.pageNum = val
this.getElementData();
},
// 添加 - 前置操作
addBefore() {
if (this.saveForm.before === '1') {
// 等待时间
var param = {
settingType: '1', // 前置操作
operateType: '1', // 等待时间
awateTime: 15000,
isDisabled: '1',
}
this.saveForm.beforeList.push(param)
} else {
// 数据提取
var param = {
settingType: '1', // 前置操作
operateType: '3', // 数据提取
dataExtractionQOList: [],
isDisabled: '1',
name: '数据提取',
}
this.saveForm.beforeList.push(param)
}
},
// 添加 - 后置操作
addAfter() { },
// 删除
beforeDelete(val) {
this.saveForm.beforeList = this.saveForm.beforeList.filter((item, index) => index !== val);
},
// 添加
addBeforeDataExtractionQOList() {
if (this.saveForm.informationType === '1' && this.saveForm.windowType != null) {
// 提取窗口信息且子分类不为空
var param = {
windowType: this.saveForm.windowType,
value: null,
isDisabled: '1',
}
this.saveForm.beforeWindowList.push(param)
} else if (this.saveForm.informationType === '2' && this.saveForm.elementType != null) {
// 提取元素信息且子分类不为空
}
},
// 删除
beforeWindowDelete(val) {
this.saveForm.beforeWindowList = this.saveForm.beforeWindowList.filter((item, index) => index !== val);
},
},
watch: {
detail(newVal, oldVal) {
this.saveForm = newVal
this.saveForm.beforeList = []
this.saveForm.afterList = []
if (newVal.operateType != '1' && newVal.operateType != '2') {
this.activeName = 'first'
} else {
this.activeName = 'second'
}
if (newVal.uiHighSettingVOList != null) {
this.uiHighSettingVOList = newVal.uiHighSettingVOList
}
Promise.all([
new Promise((resolve) => {
this.uiHighSettingVOList.forEach(item => {
switch (item.settingType) {
// 前置操作
case '1':
this.saveForm.beforeList.push(item)
break
// 后置操作
case '2':
this.saveForm.afterList.push(item)
break
// 错误处理
case '3':
this.saveForm.errorHandling = item.errorHandling
break
// 其他设置
case '4':
this.saveForm.waitElementTime = item.otherSettingsQO.waitElementTime
this.saveForm.screenshotConfiguration = item.otherSettingsQO.screenshotConfiguration
break
}
})
resolve();
}),
new Promise((resolve) => {
this.saveForm.beforeList.forEach(item => {
if (item.informationType === '1' && item) {
// 提取窗口信息
this.saveForm.beforeWindowList.push(item)
} else {
// 提取元素信息
this.saveForm.beforeElementList.push(item)
}
})
resolve();
}),
new Promise((resolve) => {
this.saveForm.afterList.forEach(item => {
if (item.informationType === '1') {
// 提取窗口信息
this.saveForm.afterWindowList.push(item)
} else {
// 提取元素信息
this.saveForm.afterElementList.push(item)
}
})
resolve();
})
]).then(() => {
console.log('Both arrays have been processed.');
});
console.log(this.saveForm.beforeList)
},
saveForm: {
handler(newVal, oldVal) {
// 前置操作
// 后置操作
var newList = [...this.saveForm.beforeList, ...this.saveForm.afterList]
// 错误处理
var param3 = {
settingType: '3',
errorHandling: this.saveForm.errorHandling,
}
newList.push(param3)
// 其他设置
var param4 = {
settingType: '4',
waitElementTime: this.saveForm.waitElementTime,
screenshotConfiguration: this.saveForm.screenshotConfiguration,
}
newList.push(param4)
this.$emit('changeSetting', newList)
},
deep: true
},
}
}
@@ -222,5 +528,53 @@ export default {
align-items: flex-end;
}
}
.select {
width: 200px;
}
.list {
padding: 20px 0px;
.number {
height: 24px;
width: 24px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px black;
}
.time {
display: flex;
align-items: center;
padding: 10px;
justify-content: space-between;
width: 100%;
.time-left {
display: flex;
align-items: center;
gap: 10px;
}
.time-right {
gap: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
.collapse-content {
padding: 15px;
.information {
padding: 10px;
}
}
}
}
</style>

View File

@@ -59,7 +59,8 @@
<el-button size="mini" @click="handleClickSave">保存</el-button>
</div>
<SceneStep v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep" />
<AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" />
<AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep"
@changeSetting="changeSetting" />
</div>
<!-- 添加步骤 -->
<div class="add-btn">
@@ -109,7 +110,7 @@ export default {
},
stepList: [],
defaultActive: 0, // 当前激活菜单的 index
changeStep: null, // 选中的步骤
changeStep: { operateType: null }, // 选中的步骤
}
},
mounted() {
@@ -126,6 +127,10 @@ export default {
}
})
},
// 修改高级设置
changeSetting(val) {
this.informationForm.uiSceneStepsVOList[this.defaultActive - 1].uiHighSettingVOList = val
},
// 获取详情
getSceneDetail() {
getAutomationDetail(this.$route.query.id).then(res => {

View File

@@ -13,7 +13,7 @@
</el-form-item>
<!-- 判断样式 -->
<!-- 浏览器操作 -->
<div v-show="saveForm.operateType === '1'">
<div v-if="saveForm.operateType === '1'">
<!-- 打开网页 -->
<el-form-item prop="url" label="URL" v-show="saveForm.stepType === '1'">
<el-input v-model="saveForm.url" placeholder="URL或路径" class="input" />
@@ -113,7 +113,7 @@
</div>
</div>
<!-- 弹窗操作 -->
<div v-show="saveForm.operateType === '2'">
<div v-if="saveForm.operateType === '2'">
<el-form-item label="是否输入" prop="isEnter">
<el-select v-model="saveForm.isEnter" class="select">
<el-option key="1" label="否" value="1"></el-option>
@@ -131,7 +131,7 @@
</el-form-item>
</div>
<!-- 元素操作 -->
<div v-show="saveForm.operateType === '3'">
<div v-if="saveForm.operateType === '3'">
<el-form-item label="操作" v-show="saveForm.stepType != '1'">
<el-select v-model="saveForm.operate" class="select">
<el-option v-for="item in actionList" :key="Number(item.value)" :label="item.label"
@@ -189,7 +189,7 @@
</div>
</div>
<!-- 鼠标操作 -->
<div v-show="saveForm.operateType === '4'">
<div v-if="saveForm.operateType === '4'">
<el-form-item label="点击方式" v-show="saveForm.stepType === '1'">
<el-select v-model="saveForm.clickMethod" class="select">
<el-option key="1" label="单击(左击)" value="1"></el-option>
@@ -260,7 +260,7 @@
</el-form-item>
</div>
<!-- 输入操作 -->
<div v-show="saveForm.operateType === '5'">
<div v-if="saveForm.operateType === '5'">
<el-form-item label="操作">
<el-select v-model="saveForm.operate" class="select">
<el-option v-for="item in actionList" :key="Number(item.value)" :label="item.label"
@@ -308,7 +308,6 @@
</template>
<script>
import { number } from "echarts";
import { listGroup } from "../../../api/test/group";
import { getElementList } from "../../../api/uiTest/elementLibrary";
@@ -383,7 +382,7 @@ export default {
// 步骤类型变换
selectStepType() {
// 置空操作
this.saveForm.operate = null
// this.saveForm.operate = null
},
// 改变尺寸
changeWindSize() {