add: ui测试- 自动化-编辑-场景步骤
This commit is contained in:
@@ -8,10 +8,12 @@
|
||||
<el-input v-model="informationForm.name" placeholder="请输入名称" maxlength="100" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop='groupId' label="模块">
|
||||
<el-input v-model="informationForm.groupId" placeholder="请选择模块"></el-input>
|
||||
<el-select v-model="informationForm.groupId">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop='status' label="状态">
|
||||
<el-select v-model="informationForm.status">
|
||||
<el-select v-model="informationForm.status" placeholder="请选择状态">
|
||||
<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>
|
||||
@@ -21,7 +23,12 @@
|
||||
<el-input v-model="informationForm.dutyBy" placeholder="请选择责任人"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop='caseLevel' label="用例等级">
|
||||
<el-input v-model="informationForm.caseLevel" placeholder="请选择用例登记"></el-input>
|
||||
<el-select v-model="informationForm.caseLevel" placeholder="请选择用例等级">
|
||||
<el-option key="P0" label="P0" value="P0"></el-option>
|
||||
<el-option key="P1" label="P1" value="P1"></el-option>
|
||||
<el-option key="P2" label="P2" value="P2"></el-option>
|
||||
<el-option key="P3" label="P3" value="P3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop='label' label="标签">
|
||||
<el-input v-model="informationForm.label" placeholder="请输入标签"></el-input>
|
||||
@@ -33,11 +40,13 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="场景步骤" name="second">
|
||||
<el-menu :default-active="String(defaultActive)" @select="handleSelect">
|
||||
<div v-for="(item, index) in stepList">
|
||||
<div v-for="(item, index) in informationForm.uiSceneStepsVOList">
|
||||
<el-menu-item :index="String(index + 1)">
|
||||
<div class="menu-wrap">
|
||||
<div class="stepCount">{{ index + 1 }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
<el-button type="text" icon="el-icon-delete" class="delete-btn"
|
||||
@click="deleteStep(index)"></el-button>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
</div>
|
||||
@@ -49,12 +58,12 @@
|
||||
<div class="scene-header">
|
||||
<el-button size="mini" @click="handleClickSave">保存</el-button>
|
||||
</div>
|
||||
<SceneStep v-show="defaultActive != 0" :step="stepName" @stepNameChange="stenNameChange" />
|
||||
<AdvancedSetting v-show="defaultActive != 0" />
|
||||
<SceneStep v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep" />
|
||||
<AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" />
|
||||
</div>
|
||||
<!-- 添加步骤 -->
|
||||
<div class="add-btn">
|
||||
<el-dropdown @command="handleClickAddStep" :hide-on-click="false">
|
||||
<el-dropdown @command="handleCommand" :hide-on-click="false">
|
||||
<el-button icon="el-icon-circle-plus-outline" type="text" style="font-size: 30px;"></el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="浏览器操作">浏览器操作</el-dropdown-item>
|
||||
@@ -71,7 +80,8 @@
|
||||
<script>
|
||||
import AdvancedSetting from './advancedSetting.vue'
|
||||
import SceneStep from './sceneStep.vue'
|
||||
import { getAutomationDetail } from '../../../api/uiTest/automationTest'
|
||||
import { getAutomationDetail, updateAutomation } from '../../../api/uiTest/automationTest'
|
||||
import { listGroup } from "../../../api/test/group"
|
||||
|
||||
export default {
|
||||
name: "EditScene",
|
||||
@@ -79,7 +89,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
groupList: [], // 分组
|
||||
informationForm: {
|
||||
automationId: null, // 场景id
|
||||
name: null, // 名称
|
||||
groupId: null, // 模块
|
||||
status: null, // 状态
|
||||
@@ -87,6 +99,7 @@ export default {
|
||||
caseLevel: null, // 用例等级
|
||||
label: null, // 标签
|
||||
description: null, // 描述
|
||||
uiSceneStepsVOList: [], // 场景步骤
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
@@ -96,60 +109,105 @@ export default {
|
||||
},
|
||||
stepList: [],
|
||||
defaultActive: 0, // 当前激活菜单的 index
|
||||
stepName: null, // 当前所选中的步骤的名称
|
||||
changeStep: null, // 选中的步骤
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getGroupListData()
|
||||
this.getSceneDetail()
|
||||
},
|
||||
methods: {
|
||||
handleClick() { },
|
||||
//
|
||||
getGroupListData() {
|
||||
listGroup('automation').then(res => {
|
||||
if (res.code === 200) {
|
||||
this.groupList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取详情
|
||||
getSceneDetail() {
|
||||
getAutomationDetail(this.$route.query.id).then(res => {
|
||||
if (res.code === 200) {
|
||||
|
||||
this.informationForm = res.data
|
||||
if (this.informationForm.uiSceneStepsVOList.length > 0) {
|
||||
this.defaultActive = 1
|
||||
this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive - 1]
|
||||
} else {
|
||||
this.defaultActive = 0
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除步骤
|
||||
deleteStep(index) {
|
||||
this.$modal.confirm('确认删除该步骤' + '？').then(() => {
|
||||
this.informationForm.uiSceneStepsVOList.splice(index, 1);
|
||||
}).catch(() => { })
|
||||
},
|
||||
// 场景步骤
|
||||
handleSelect(key, keyPath) {
|
||||
this.defaultActive = Number(key)
|
||||
this.stepName = this.stepList[Number(key) - 1].name
|
||||
this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive - 1]
|
||||
},
|
||||
// 添加步骤
|
||||
handleClickAddStep(command) {
|
||||
handleCommand(command) {
|
||||
var param = {
|
||||
name: '',
|
||||
name: null,
|
||||
operateType: null,
|
||||
stepType: '1',
|
||||
automationId: this.$route.query.id
|
||||
}
|
||||
switch (command) {
|
||||
case '浏览器操作':
|
||||
param.name = '打开网页'
|
||||
param.operateType = '1'
|
||||
break
|
||||
case '弹窗操作':
|
||||
param.name = '弹窗操作'
|
||||
param.operateType = '2'
|
||||
break
|
||||
case '元素操作':
|
||||
param.name = '提交表单'
|
||||
param.operateType = '3'
|
||||
break
|
||||
case '鼠标操作':
|
||||
param.name = '鼠标点击'
|
||||
param.operateType = '4'
|
||||
break
|
||||
case '输入操作':
|
||||
param.name = '输入操作'
|
||||
param.operateType = '5'
|
||||
break
|
||||
}
|
||||
this.stepName = param.name
|
||||
this.stepList.splice(this.defaultActive, 0, param);
|
||||
this.informationForm.uiSceneStepsVOList.splice(this.defaultActive, 0, param);
|
||||
this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive]
|
||||
this.defaultActive++;
|
||||
},
|
||||
// 步骤名称同步
|
||||
stenNameChange(val) {
|
||||
this.stepName = val
|
||||
this.stepList[this.defaultActive - 1].name = val
|
||||
},
|
||||
// 保存
|
||||
handleClickSave() {
|
||||
if (this.informationForm.name === null || this.informationForm.name === '') {
|
||||
this.$modal.msgWarning("请输入名称！");
|
||||
}
|
||||
if (this.informationForm.groupId === null || this.informationForm.groupId === '') {
|
||||
this.$modal.msgWarning("请选择模块！");
|
||||
}
|
||||
if (this.informationForm.status === null || this.informationForm.status === '') {
|
||||
this.$modal.msgWarning("请选择状态");
|
||||
}
|
||||
if (this.informationForm.dutyBy === null || this.informationForm.dutyBy === '') {
|
||||
this.$modal.msgWarning("请输入责任人");
|
||||
}
|
||||
updateAutomation(this.informationForm).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess("编辑成功")
|
||||
this.$tab.closeOpenPage({ path: "/ui-test/automation-test" });
|
||||
} else {
|
||||
this.$modal.msgError("编辑失败")
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -168,6 +226,12 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.stepCount {
|
||||
width: 20px;
|
||||
|
||||
@@ -1,70 +1,306 @@
|
||||
<template>
|
||||
<div class="scene-step">
|
||||
<div class="title">场景步骤</div>
|
||||
<el-form :model="saveForm" :rules="rules" label-width="100px">
|
||||
<el-form-item prop="stepName" label="名称">
|
||||
<el-input v-model="saveForm.stepName" placeholder="请输入名称" maxlength="100" show-word-limit @input="changeInput"
|
||||
class="input" />
|
||||
<el-form :model="saveForm" :rules="rules" label-width="110px">
|
||||
<el-form-item prop="name" label="名称">
|
||||
<el-input v-model="saveForm.name" placeholder="请输入名称" maxlength="100" show-word-limit class="input" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="type" label="步骤类型">
|
||||
<el-select v-model="saveForm.type" placeholder="请选择" class="select" @change="changeSelectType">
|
||||
<el-form-item prop="stepType" label="步骤类型">
|
||||
<el-select v-model="saveForm.stepType" placeholder="请选择" class="select" @change="selectStepType">
|
||||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
<span style="margin-left: 20px; color: gray;">{{ typeTitle }}</span>
|
||||
</el-form-item>
|
||||
<div v-show="typeName === '打开网页'">
|
||||
<el-form-item prop="url" label="URL">
|
||||
<el-input v-model="saveForm.stepName" placeholder="URL或路径" class="input" />
|
||||
<!-- 判断样式 -->
|
||||
<!-- 浏览器操作 -->
|
||||
<div v-show="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" />
|
||||
<el-tooltip class="item" effect="dark" content="根据URL,打开指定的页面" placement="right">
|
||||
<i class="el-icon-info" style="margin-left: 20px;"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-radio v-model="saveForm.radio" label="1">追加页面</el-radio>
|
||||
<el-form-item v-show="saveForm.stepType === '1'">
|
||||
<el-checkbox v-model="saveForm.isAppendPage">追加页面</el-checkbox>
|
||||
<el-tooltip class="item" effect="dark" content="追加页面，在新的页面打开url，不勾选覆盖当前url" placement="right">
|
||||
<i class="el-icon-info"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<!-- 切换窗口 - 设置窗口大小 - 选择内嵌网页 -->
|
||||
<el-form-item label="操作" v-show="saveForm.stepType != '1' && saveForm.stepType != '2'">
|
||||
<el-select v-model="saveForm.operate" class="select">
|
||||
<el-option v-for="item in actionList" :key="Number(item.value)" :label="item.label"
|
||||
:value="Number(item.value)"></el-option>
|
||||
</el-select>
|
||||
<el-tooltip v-show="saveForm.stepType === '3' && saveForm.operate != null" class="item" effect="dark"
|
||||
content="如果是切换到指定窗口，需要传入句柄" placement="right">
|
||||
<i class="el-icon-info" style="margin-left: 10px;"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-show="saveForm.stepType === '4' && saveForm.operate === 2" class="item" effect="dark"
|
||||
content="指定尺寸，根据输入的宽度和高度，设置窗口的大小" placement="right">
|
||||
<i class="el-icon-info" style="margin-left: 10px;"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-show="saveForm.stepType === '5' && saveForm.operate != null" class="item" effect="dark"
|
||||
content="如果是切换 frame，需要传入索引或者元素定位后再切换" placement="right">
|
||||
<i class="el-icon-info" style="margin-left: 10px;"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<!-- 切换窗口 -->
|
||||
<div v-show="saveForm.stepType === '3'">
|
||||
<!-- 根据句柄 ID 切换到指定窗口 -->
|
||||
<el-form-item prop="handleId" label="句柄ID" v-show="saveForm.operate === '1'">
|
||||
<el-input v-model="saveForm.handleId" placeholder="窗口句柄ID" class="input" />
|
||||
</el-form-item>
|
||||
<!-- 根据网页索引号切换到指定窗口 -->
|
||||
<el-form-item prop="pageIndex" label="网页索引号" v-show="saveForm.operate === '2'">
|
||||
<el-input-number v-model="saveForm.pageIndex" :min="1"></el-input-number>
|
||||
<el-tooltip class="item" effect="dark" content="选择打开过的第几个网页；例：比如索引值输入 3，那么效果会切换到已经打开过的第 3 个窗口(索引值从 1 开始计算)"
|
||||
placement="right">
|
||||
<i class="el-icon-info" style="margin-left: 10px;"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 设置窗口大小 -->
|
||||
<div v-show="saveForm.stepType === '4'">
|
||||
<el-form-item label="尺寸" v-show="saveForm.operate === 2">
|
||||
<el-input-number v-model="winSize.width" controls-position="right" :min="0"
|
||||
@change="changeWindSize"></el-input-number>
|
||||
<span style="margin: 0 5px;">X</span>
|
||||
<el-input-number v-model="winSize.height" controls-position="right" :min="0"
|
||||
@change="changeWindSize"></el-input-number>
|
||||
<el-tooltip class="item" effect="dark" content="以像素为单位" placement="right">
|
||||
<i class="el-icon-info" style="margin-left: 10px;"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 选择内嵌网页 -->
|
||||
<div v-show="saveForm.stepType === '5'">
|
||||
<el-form-item prop="frameIndex" label="frame索引号" v-show="saveForm.operate === 2">
|
||||
<el-input-number v-model="saveForm.frameIndex" :min="0"></el-input-number>
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="选择当前页面的第几个 frame；例：比如索引值输入 1，那么效果会切换到当前页面的第 2 个 frame(索引值从 0 开始计算)" placement="right">
|
||||
<i class="el-icon-info" style="margin-left: 20px;"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<!-- 根据定位方式切换 frame -->
|
||||
<el-form-item prop="operateObject" label="操作对象" v-show="saveForm.operate === 3">
|
||||
<div class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateObject" class="select">
|
||||
<el-option key="1" label="元素对象" value="1"></el-option>
|
||||
<el-option key="2" label="元素定位" value="2"></el-option>
|
||||
</el-select>
|
||||
<!-- 元素对象 -->
|
||||
<div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.action" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 元素定位 -->
|
||||
<div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.operateLocValue" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="typeName === '弹窗操作'">
|
||||
<el-form-item label="是否输入" prop="isInput">
|
||||
<el-select v-model="saveForm.isInput" class="select">
|
||||
<el-option key="1" label="是" value="1"></el-option>
|
||||
<el-option key="0" label="否" value="0"></el-option>
|
||||
<!-- 弹窗操作 -->
|
||||
<div v-show="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>
|
||||
<el-option key="2" label="是" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作方式" prop="actionType">
|
||||
<el-select v-model="saveForm.actionType" class="select">
|
||||
<el-form-item label="操作方式" prop="operateWay">
|
||||
<el-select v-model="saveForm.operateWay" class="select">
|
||||
<el-option key="1" label="确定" value="1"></el-option>
|
||||
<el-option key="0" label="取消" value="0"></el-option>
|
||||
<el-option key="2" label="取消" value="2"></el-option>
|
||||
</el-select>
|
||||
<el-tooltip class="item" effect="dark" content="点击弹窗确定按钮或取消按钮" placement="right" style="margin-left: 10px;">
|
||||
<i class="el-icon-info"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div
|
||||
v-show="typeName === '切换窗口' || typeName === '设置窗口大小' || typeName === '选择内嵌网页' || typeName === '下拉框操作' || typeName === '设置选项'">
|
||||
<el-form-item label="操作">
|
||||
<el-select v-model="saveForm.action" class="select">
|
||||
<el-option v-for="item in actionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
<!-- 元素操作 -->
|
||||
<div v-show="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"
|
||||
:value="Number(item.value)"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="operateObject" label="操作对象">
|
||||
<div class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateObject" class="select">
|
||||
<el-option key="1" label="元素对象" value="1"></el-option>
|
||||
<el-option key="2" label="元素定位" value="2"></el-option>
|
||||
</el-select>
|
||||
<!-- 元素对象 -->
|
||||
<div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.action" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 元素定位 -->
|
||||
<div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.operateLocValue" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="subOptions" label="子选项" v-show="saveForm.stepType === '2'">
|
||||
<el-select v-model="saveForm.subOptions" class="select">
|
||||
<el-option key="1" label="选项(Option)" value="1"></el-option>
|
||||
<el-option key="2" label="索引(Index)" value="2"></el-option>
|
||||
<el-option key="3" label="值(Value)" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-input v-model="saveForm.subOptionsValue" placeholder="值" class="select"
|
||||
style="margin-left: 10px"></el-input>
|
||||
</el-form-item>
|
||||
<div v-show="saveForm.stepType === '4'">
|
||||
<!-- 等待文本 -->
|
||||
<el-form-item prop="awaitValue" label="等待文本" v-show="saveForm.operate === 1">
|
||||
<el-input v-model="saveForm.awaitValue" placeholder="等待文本" class="select"></el-input>
|
||||
<el-tooltip class="item" effect="dark" content="针对元素的Text属性，指页面展示出来的文本内容，等待超时时间为15000ms" placement="right">
|
||||
<i class="el-icon-info" style="margin-left: 20px;"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<!-- 等待超时 -->
|
||||
<el-form-item label="等待超时" v-show="saveForm.operate != 1">
|
||||
<el-input-number v-model="saveForm.awaitValue" :min="1"></el-input-number>
|
||||
<span style="margin-left: 5px;">ms</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="typeName === '提交表单' || typeName === '下拉框操作' || typeName === '设置选项' || typeName === '等待元素'">
|
||||
<el-form-item label="操作对象">
|
||||
<el-select v-model="saveForm.action" class="select">
|
||||
<el-option key="1" label="元素对象" value="1"></el-option>
|
||||
<el-option key="1" label="元素定位" value="1"></el-option>
|
||||
<!-- 鼠标操作 -->
|
||||
<div v-show="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>
|
||||
<el-option key="2" label="单击(右击)" value="2"></el-option>
|
||||
<el-option key="3" label="双击" value="3"></el-option>
|
||||
<el-option key="4" label="按下" value="4"></el-option>
|
||||
<el-option key="5" label="弹起" value="5"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.action" class="select" style="margin: 0px 10px;">
|
||||
<el-option key="1" label="元素对象" value="1"></el-option>
|
||||
<el-option key="1" label="元素定位" value="1"></el-option>
|
||||
</el-form-item>
|
||||
<el-form-item prop="operateObject" label="元素位置" v-show="saveForm.stepType === '1'">
|
||||
<div class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateObject" class="select">
|
||||
<el-option key="1" label="元素对象" value="1"></el-option>
|
||||
<el-option key="2" label="元素定位" value="2"></el-option>
|
||||
</el-select>
|
||||
<!-- 元素对象 -->
|
||||
<div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.action" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 元素定位 -->
|
||||
<div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.operateLocValue" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="移动方式" v-show="saveForm.stepType === '2'">
|
||||
<el-select v-model="saveForm.clickMethod" 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-select v-model="saveForm.action" class="select">
|
||||
<el-option key="1" label="元素对象" value="1"></el-option>
|
||||
<el-option key="1" label="元素定位" value="1"></el-option>
|
||||
</el-form-item>
|
||||
<el-form-item prop="operateObject" label="鼠标位置" v-show="saveForm.stepType === '2'">
|
||||
<div class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateObject" class="select">
|
||||
<el-option key="1" label="元素对象" value="1"></el-option>
|
||||
<el-option key="2" label="元素定位" value="2"></el-option>
|
||||
</el-select>
|
||||
<!-- 元素对象 -->
|
||||
<div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.action" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 元素定位 -->
|
||||
<div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.operateLocValue" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 输入操作 -->
|
||||
<div v-show="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"
|
||||
:value="Number(item.value)"></el-option>
|
||||
</el-select>
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="可编辑段落的元素 contenteditable 属性必须为 true, 才可实现输入；例： contenteditable='true' 这是一段可编辑的段落。请试着编辑该文本。"
|
||||
placement="right">
|
||||
<i class="el-icon-info"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item prop="operateObject" label="操作对象">
|
||||
<div class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateObject" class="select">
|
||||
<el-option key="1" label="元素对象" value="1"></el-option>
|
||||
<el-option key="2" label="元素定位" value="2"></el-option>
|
||||
</el-select>
|
||||
<!-- 元素对象 -->
|
||||
<div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.action" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 元素定位 -->
|
||||
<div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
|
||||
<el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="saveForm.operateLocValue" class="select">
|
||||
<el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="inputValue" label="输入内容">
|
||||
<el-input placeholder="请输入内容" v-model="saveForm.inputValue" type="textarea" :rows="4" class="input">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@@ -72,107 +308,216 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { number } from "echarts";
|
||||
import { listGroup } from "../../../api/test/group";
|
||||
import { getElementList } from "../../../api/uiTest/elementLibrary";
|
||||
|
||||
export default {
|
||||
name: "SceneStep",
|
||||
props: {
|
||||
step: '',
|
||||
selectIndex: number, // 当前选中的步骤
|
||||
detail: {}, // 编辑的数据
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
winSize: {
|
||||
height: 0,
|
||||
width: 0,
|
||||
},
|
||||
saveForm: {
|
||||
stepName: null,
|
||||
type: '1',
|
||||
url: null,
|
||||
radio: true,
|
||||
action: null,
|
||||
isInput: null,
|
||||
actionType: null
|
||||
automationId: null, // 场景id
|
||||
name: null, // 名称
|
||||
operateType: null, // 操作类型
|
||||
stepType: null, // 步骤类型
|
||||
url: null, // url
|
||||
isAppendPage: 0, // 追加页面
|
||||
operate: null, // 操作
|
||||
handleId: null, // 句柄ID
|
||||
pageIndex: 1, // 网页索引号
|
||||
windowSize: null, // 尺寸
|
||||
frameIndex: 0, // frame索引号
|
||||
operateObject: null, // 操作对象
|
||||
operateGroupId: null, // 元素对象
|
||||
operateElementId: null, // 元素对象
|
||||
operateLocType: null, // 元素定位
|
||||
operateLocValue: null, // 元素定位
|
||||
isEnter: null, // 是否输入
|
||||
operateWay: null, // 操作方式
|
||||
subOptions: null, // 子选项
|
||||
subOptionsValue: null, // 子选项值
|
||||
awaitValue: null, // 等待文本
|
||||
clickMethod: null, // 点击方式
|
||||
inputValue: null, // 输入内容
|
||||
},
|
||||
rules: {
|
||||
stepName: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择步骤类型', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
|
||||
stepType: [{ required: true, message: '请选择步骤类型', trigger: 'blur' }],
|
||||
url: [{ required: true, message: '请输入URL或路径', trigger: 'blur' }],
|
||||
isInput: [{ required: true, message: '请选择是否输入', trigger: 'blur' }],
|
||||
actionType: [{ required: true, message: '请选择操作方式', trigger: 'blur' }],
|
||||
handleId: [{ required: true, message: '请输入句柄ID', trigger: 'blur' }],
|
||||
pageIndex: [{ required: true, message: '请选择网页索引号', trigger: 'blur' }],
|
||||
frameIndex: [{ required: true, message: '请选择frame索引号', trigger: 'blur' }],
|
||||
operateObject: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
|
||||
operateGroupId: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
|
||||
operateElementId: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
|
||||
operateLocType: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
|
||||
operateLocValue: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
|
||||
isEnter: [{ required: true, message: '请选择是否输入', trigger: 'blur' }],
|
||||
operateWay: [{ required: true, message: '请选择操作方式', trigger: 'blur' }],
|
||||
subOptions: [{ required: true, message: '请选择子选项', trigger: 'blur' }],
|
||||
subOptionsValue: [{ required: true, message: '请输入子选项值', trigger: 'blur' }],
|
||||
awaitValue: [{ required: true, message: '请输入等待文本', trigger: 'blur' }],
|
||||
clickMethod: [{ required: true, message: '请输入方式', trigger: 'blur' }],
|
||||
inputValue: [{ required: true, message: '请输入内容', trigger: 'blur' }],
|
||||
},
|
||||
typeList: [],// 步骤类型
|
||||
typeTitle: '', // 步骤类型
|
||||
typeName: '', // 步骤类型
|
||||
actionList: [],
|
||||
actionList: [], // 操作列表
|
||||
groupList: [], // 操作对象分组
|
||||
elementList: [], // 操作对象分组
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getListGroupData()
|
||||
},
|
||||
methods: {
|
||||
changeInput(val) {
|
||||
this.$emit('stepNameChange', val);
|
||||
// 步骤类型变换
|
||||
selectStepType() {
|
||||
// 置空操作
|
||||
this.saveForm.operate = null
|
||||
},
|
||||
changeSelectType(val) {
|
||||
this.saveForm.stepName = this.typeList[val - 1].label
|
||||
this.typeName = this.typeList[val - 1].label
|
||||
this.$emit('stepNameChange', this.saveForm.stepName);
|
||||
switch (this.typeList[val - 1].label) {
|
||||
case '打开网页': this.typeTitle = '使用指定的浏览器打开网页'
|
||||
break
|
||||
case '关闭网页':
|
||||
this.typeTitle = '关闭当前网页'
|
||||
break
|
||||
case '切换窗口':
|
||||
this.typeTitle = '切换到指定窗口'
|
||||
this.actionList = [{ label: '根据句柄ID切换到指定窗口', value: '1' }, { label: '根据网页索引号切换到指定窗口', value: '2' }, { label: '切换到初始窗口', value: '3' }]
|
||||
break
|
||||
case '设置窗口大小':
|
||||
this.typeTitle = '设置窗口大小'
|
||||
this.actionList = [{ label: '窗口最大化', value: '1' }, { label: '指定尺寸(像素为单位)', value: '2' }]
|
||||
break
|
||||
case '选择内嵌网页':
|
||||
this.typeTitle = '选择内嵌网页'
|
||||
this.actionList = [{ label: '退出当前frame(回到主页面)', value: '1' }, { label: '根据frame索引号切换到指定frame', value: '2' }, { label: '根据定位方式切换frame', value: '3' }]
|
||||
break
|
||||
case '提交表单':
|
||||
this.typeTitle = '针对属性type="submit”的元素，用于提交表单数据'
|
||||
break
|
||||
case '下拉框操作':
|
||||
this.typeTitle = '对下拉选项进行操作，可实现单选，多选，以及取消选择的操作'
|
||||
this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
|
||||
break
|
||||
case '设置选项':
|
||||
this.typeTitle = '用于设置 checkbox/radio 的状态'
|
||||
this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
|
||||
break
|
||||
}
|
||||
// 改变尺寸
|
||||
changeWindSize() {
|
||||
this.saveForm.windowSize = String(this.winSize.width) + '*' + String(this.winSize.height)
|
||||
},
|
||||
// 获取操作对象列表
|
||||
getListGroupData() {
|
||||
listGroup('element').then(res => {
|
||||
if (res.code === 200) {
|
||||
this.groupList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 元素对象
|
||||
getOperateGroup() {
|
||||
this.getElementListData(this.saveForm.operateGroupId)
|
||||
},
|
||||
// 元素定位
|
||||
getOperateLoc() {
|
||||
this.getElementListData(this.saveForm.operateLocType)
|
||||
},
|
||||
// 获取元素列表
|
||||
getElementListData(id) {
|
||||
getElementList({ groupId: id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.elementList = res.rows
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
step(newVal, oldVal) {
|
||||
this.saveForm.stepName = newVal
|
||||
this.typeName = newVal
|
||||
switch (newVal) {
|
||||
case '打开网页':
|
||||
this.typeList = [{ label: '打开网页', value: '1' }, { label: '关闭网页', value: '2' }, { label: '切换窗口', value: '3' },
|
||||
{ label: '设置窗口大小', value: '4' }, { label: '选择内嵌网页', value: '5' }]
|
||||
this.typeTitle = '使用指定的浏览器打开网页'
|
||||
break
|
||||
case '弹窗操作':
|
||||
this.typeList = [{ label: '弹窗操作', value: '1' }]
|
||||
this.typeTitle = '对无法进行元素定位的弹窗实现的操作 (注：弹框事件不会产生截图)'
|
||||
break
|
||||
case '提交表单':
|
||||
this.typeList = [{ label: '提交表单', value: '1' }, { label: '下拉框操作', value: '2' }, { label: '设置选项', value: '3' },
|
||||
{ label: '等待元素', value: '4' }]
|
||||
this.typeTitle = '针对属性type="submit”的元素，用于提交表单数据'
|
||||
break
|
||||
case '鼠标点击':
|
||||
this.typeList = [{ label: '鼠标点击', value: '1' }, { label: '鼠标移动', value: '2' }]
|
||||
this.typeTitle = '模拟鼠标点击的操作，支持单击/双击/按下/弹起'
|
||||
break
|
||||
case '输入操作':
|
||||
this.typeList = [{ label: '输入操作', value: '1' }]
|
||||
this.typeTitle = '对元素实现输入的操作'
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
detail(newVal, oldVal) {
|
||||
this.saveForm = newVal
|
||||
},
|
||||
saveForm: {
|
||||
handler(newVal, oldVal) {
|
||||
// 判断操作类型
|
||||
switch (newVal.operateType) {
|
||||
case '1': // 浏览器操作
|
||||
this.typeList = [{ label: '打开网页', value: '1' }, { label: '关闭网页', value: '2' }, { label: '切换窗口', value: '3' },
|
||||
{ label: '设置窗口大小', value: '4' }, { label: '选择内嵌网页', value: '5' }]
|
||||
// 判断步骤类型
|
||||
switch (newVal.stepType) {
|
||||
case '1': // 打开网页
|
||||
this.typeTitle = '使用指定的浏览器打开网页'
|
||||
break
|
||||
case '2': // 关闭网页
|
||||
this.typeTitle = '关闭当前网页'
|
||||
break
|
||||
case '3': // 切换窗口
|
||||
this.typeTitle = '切换到指定窗口'
|
||||
this.actionList = [{ label: '根据句柄 ID 切换到指定窗口', value: '1' }, { label: '根据网页索引号切换到指定窗口', value: '2' },
|
||||
{ label: '切换到初始窗口', value: '3' }]
|
||||
break
|
||||
case '4': // 设置窗口大小
|
||||
this.typeTitle = '设置窗口大小'
|
||||
this.actionList = [{ label: '窗口最大化', value: '1' }, { label: '指定尺寸(像素为单位)', value: '2' }]
|
||||
break
|
||||
case '5': // 选择内嵌网页
|
||||
this.typeTitle = '从当前 window 选择 frame(对 frame 标签起作用)'
|
||||
this.actionList = [{ label: '退出当前 frame(回到主页面)', value: '1' }, { label: '根据 frame 索引号切换到指定 frame', value: '2' },
|
||||
{ label: '根据定位方式切换 frame', value: '3' }]
|
||||
break
|
||||
}
|
||||
break
|
||||
case '2': // 弹窗操作
|
||||
this.typeList = [{ label: '弹窗操作', value: '1' }]
|
||||
// 判断步骤类型
|
||||
switch (newVal.stepType) {
|
||||
case '1': // 弹窗操作
|
||||
this.typeTitle = '对无法进行元素定位的弹窗实现的操作 (注：弹框事件不会产生截图)'
|
||||
break
|
||||
}
|
||||
break
|
||||
case '3': // 元素操作
|
||||
this.typeList = [{ label: '提交表单', value: '1' }, { label: '下拉框操作', value: '2' }, { label: '设置选项', value: '3' },
|
||||
{ label: '等待元素', value: '4' }]
|
||||
// 判断步骤类型
|
||||
switch (newVal.stepType) {
|
||||
case '1': // 提交表单
|
||||
this.typeTitle = '针对属性type="submit”的元素，用于提交表单数据'
|
||||
break
|
||||
case '2': // 下拉框操作
|
||||
this.typeTitle = '对下拉选项进行操作，可实现单选，多选，以及取消选择的操作'
|
||||
this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
|
||||
break
|
||||
case '3': // 设置选项
|
||||
this.typeTitle = '用于设置 checkbox/radio 的状态'
|
||||
this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
|
||||
break
|
||||
case '4': // 等待元素
|
||||
this.typeTitle = '对页面对象执行指定的等待操作，默认等待超时15000ms'
|
||||
this.actionList = [{ label: '等待元素等于给定的定值(Text)', value: '1' }, { label: '等待元素存在', value: '2' },
|
||||
{ label: '等待元素显示', value: '3' }, { label: '等待元素不显示', value: '4' },
|
||||
{ label: '等待元素不存在', value: '5' }, { label: '等待元素可编辑', value: '6' }, { label: '等待元素不可编辑', value: '7' }]
|
||||
break
|
||||
}
|
||||
break
|
||||
case '4': // 鼠标操作
|
||||
this.typeList = [{ label: '鼠标点击', value: '1' }, { label: '鼠标移动', value: '2' }]
|
||||
// 判断步骤类型
|
||||
switch (newVal.stepType) {
|
||||
case '1': // 鼠标点击
|
||||
this.typeTitle = '模拟鼠标点击的操作，支持单击/双击/按下/弹起'
|
||||
break
|
||||
case '2': // 鼠标移动
|
||||
this.typeTitle = '将鼠标悬停在网页元素的上方'
|
||||
break
|
||||
}
|
||||
break
|
||||
case '5': // 输入操作
|
||||
this.typeList = [{ label: '输入操作', value: '1' }]
|
||||
// 判断步骤类型
|
||||
switch (newVal.stepType) {
|
||||
case '1': // 输入操作
|
||||
this.typeTitle = '对元素实现输入的操作'
|
||||
this.actionList = [{ label: '输入框', value: '1' }, { label: '可编辑段落', value: '2' }]
|
||||
break
|
||||
}
|
||||
break
|
||||
}
|
||||
// 尺寸
|
||||
if (newVal.windowSize != null) {
|
||||
let result = newVal.windowSize.split(/\*/);
|
||||
if (result.length > 0) {
|
||||
this.winSize.width = result[0]
|
||||
this.winSize.width = result[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -193,5 +538,10 @@ export default {
|
||||
.select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.operateObject-wrap {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user