Skip to content

V
Vue-WebDriver
Commit 947332d2 by 郁子恒
Options

新增动作界面

parent ec9a6f63
Showing with 253 additions and 136 deletions
src/App.vue
......@@ -105,12 +105,12 @@
// 导出json文件使用的库
import { saveAs } from 'file-saver';
import draggable from 'vuedraggable'
import { onSelect, elClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
import { elClick, sysSleep, elOutput, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
export default {
name: 'App',
components: { draggable, onSelect, elClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
components: { elClick, sysSleep, draggable, elOutput, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
props: {},
data() {
data () {
return {
state: false,
dynamicComponent: null,
......@@ -125,12 +125,15 @@ export default {
value: 'elClick',
label: '点击'
}, {
value: 'wait',
value: 'sysSleep',
label: '等待'
}, {
value: 'input',
label: '输入'
}, {
value: 'elOutput',
label: '取值'
}, {
value: 'loopClick',
label: '循环点击'
}, {
......@@ -175,8 +178,8 @@ export default {
}
},
created() { },
mounted() {
created () { },
mounted () {
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
});
......@@ -187,7 +190,7 @@ export default {
},
watch: {
actionName(newVal, oldVal) {
actionName (newVal, oldVal) {
// 在输入值发生变化时触发
if (newVal !== oldVal) {
// console.log(newVal)
......@@ -207,7 +210,7 @@ export default {
// 可以在这里执行自定义逻辑
},
treeNode: {
handler(newVal, oldVal) {
handler (newVal, oldVal) {
// console.log('数组变化了', newVal);
// console.log(newVal.length);
// 设置动作新增上限为15个
......@@ -222,7 +225,7 @@ export default {
},
computed: {},
methods: {
handleScroll(event) {
handleScroll (event) {
// 检测鼠标滚轮事件
if (event.deltaY !== 0) {
// 阻止垂直滚动
......@@ -234,16 +237,16 @@ export default {
}
},
// 组件配置
loadComponent(componentName) {
loadComponent (componentName) {
switch (componentName) {
case 'elClick':
this.dynamicComponent = elClick
break;
case 'select':
this.dynamicComponent = onSelect
case 'sysSleep':
this.dynamicComponent = sysSleep
break;
case 'wait':
this.dynamicComponent = wait
case 'elOutput':
this.dynamicComponent = elOutput
break;
case 'input':
this.dynamicComponent = onInput
......@@ -277,7 +280,7 @@ export default {
}
},
// 接收子组件信息
handleDataChange(newData) {
handleDataChange (newData) {
console.log('接收到的数据:', newData);
const targetObject = this.dynamicTags.find(obj => obj.Kvid === this.dynamicTagObj.Kvid);
console.log(targetObject)
......@@ -294,7 +297,7 @@ export default {
console.log(this.treeNode)
},
// 新建动作
newAction() {
newAction () {
this.isShowAction = true;
this.dynamicTagObj = {}
this.actionName = "新建动作"
......@@ -329,7 +332,7 @@ export default {
}
},
// 进入容器
toActions() {
toActions () {
this.isShowAction = false
if (this.actionType == 'actions') {
// this.actionType = ''
......@@ -373,7 +376,7 @@ export default {
}
},
// 动作下拉框
handleChange(val) {
handleChange (val) {
this.actionType == val
let _this = this
// 在输入值发生变化时触发
......@@ -391,7 +394,7 @@ export default {
}
},
// 导航标签
onBreadcrumb(item) {
onBreadcrumb (item) {
this.isShowAction = false
this.actionName = item.actionName
this.actionType = item.actionType
......@@ -411,7 +414,7 @@ export default {
}
},
// 单击标签
selectTag(item) {
selectTag (item) {
// this.parentTree = item
let _this = this
if (item.actionType == 'actions') {
......@@ -463,7 +466,7 @@ export default {
_this.loadComponent(item.actionType)
},
// 删除标签
handleClose(tag) {
handleClose (tag) {
let _this = this
if (_this.childrenTreeNode.length > 0 && _this.isChildrenTree == true) {
let filteredArray = _this.childrenTreeNode.filter(item => item.Kvid !== tag.Kvid);
......@@ -514,7 +517,7 @@ export default {
_this.isShowAction = false
},
// 根据 Kvid 找到对应的对象，并将匹配到的对象后面的所有对象数据删除
deleteObjectsAfterKvid(dataArray, targetKvid) {
deleteObjectsAfterKvid (dataArray, targetKvid) {
const index = dataArray.findIndex(obj => obj.Kvid === targetKvid);
if (index !== -1) {
// 找到匹配的对象
......@@ -524,11 +527,11 @@ export default {
}
},
// 树结构添加数据
addDataToParent(tree, parentKvid, newData, childTree) {
addDataToParent (tree, parentKvid, newData, childTree) {
let _this = this
_this.childrenTreeNode = []
// 递归函数，用于在树的每一级中查找合适的父节点并添加数据
function addToNode(node, parentKvid, newData, childTree) {
function addToNode (node, parentKvid, newData, childTree) {
if (node.children == undefined) {
node.children = []
}
......@@ -560,7 +563,7 @@ export default {
tree.push(newData);
},
// 返回上一级目录
goback() {
goback () {
this.parentKvid = null
this.childrenTreeNode = []
let activeItem = this.findObjectByKvid(this.treeNode, this.Kvid);
......@@ -576,7 +579,7 @@ export default {
}
},
// 保存任务
submitPlan(formName) {
submitPlan (formName) {
this.isShowAction = true
console.log(this.treeNode)
// 将JSON对象转换为JSON字符串
......@@ -587,7 +590,7 @@ export default {
saveAs(blob, 'exported_data.json');
},
// 根据parentKvid找当前节点
findHierarchyByParentKvid(tree, parentKvid) {
findHierarchyByParentKvid (tree, parentKvid) {
let _this = this
for (var i = 0; i < tree.length; i++) {
var node = tree[i];
......@@ -604,7 +607,7 @@ export default {
return []; // 未找到匹配的节点，返回空数组
},
// 根据Kvid找节点
findObjectByKvid(array, kvid) {
findObjectByKvid (array, kvid) {
let _this = this
for (var i = 0; i < array.length; i++) {
var obj = array[i];
......@@ -621,7 +624,7 @@ export default {
return null; // 如果没有找到目标对象，返回 null
},
// 根据 Kvid 匹配，如果有相同的就返回，没有就 push
findOrPushObject(dataArray, newObj) {
findOrPushObject (dataArray, newObj) {
const existingObj = dataArray.find(obj => obj.Kvid === newObj.Kvid);
if (existingObj) {
// 已经存在相同的 Kvid，返回该对象
......@@ -633,12 +636,12 @@ export default {
}
},
//开始拖拽事件-标签拖拽
onStart() {
onStart () {
this.drag = true;
this.isShowAction = false
},
//拖拽结束事件
onEnd() {
onEnd () {
this.drag = false;
// console.log(this.treeNode)
// console.log(this.childrenTreeNode)
......@@ -652,7 +655,7 @@ export default {
// 拖拽完最终结果
console.log(this.treeNode)
},
onResize() {
onResize () {
this.winHeight = window.outerHeight
},
},
......
src/components/elOutput.vue 0 → 100644
<template>
<div class="elOutput">
<!-- 操作按钮区域 -->
<div style="height: 35px; margin-left: 15px; text-align: left;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div>
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig">
<el-form-item label="查找方式">
<el-input v-model="actionConfig.Target.Type" disabled></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input v-model="actionConfig.Attributes.innerText" disabled></el-input>
</el-form-item>
<el-form-item label="查询时间">
<el-input v-model="actionConfig.Target.Timeout"></el-input>
</el-form-item>
</el-form>
<!-- 提交按钮 -->
<div style="width: 100%; text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'elOutput',
components: {},
props: ['actionName', 'actionType'],
data () {
return {
elementInfos: {}, // 存储当前选中元素的信息
actionConfig: {
"Target": {
"Type": "xpath",
"Xpath": "",
"Timeout": 5000
},
"Attributes": {
"innerText": ""
},
"Name": this.actionName,
"Alias": this.actionType
},
};
},
created () { },
mounted () {
// 在组件挂载后调用selectElement来添加事件监听器
this.selectElement();
},
beforeDestroy () {
// 在组件销毁前移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
watch: {},
computed: {},
methods: {
// 提交表单信息
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType;
this.$emit('dataChanged', this.actionConfig);
},
// 获取页面元素方法
contextMenuHandler (event) {
event.preventDefault(); // 阻止默认的右击菜单
let element = event.target;
let elementInfo = {
Xpath: this.getElementXPath(element),
Text: element.innerText
};
this.elementInfos = elementInfo;
this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.actionConfig.Attributes.innerText = element.innerText;
// 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
// 选择元素按钮调用
selectElement () {
// 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false);
},
// 取消按钮调用
cancelSelect () {
// 在取消按钮点击时移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
// 获取xpath
getElementXPath (element) {
let _this = this;
if (element.tagName === 'BODY') {
return '/HTML/' + element.tagName;
}
var ix = 1, siblings = element.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
var sibling = siblings[i];
if (sibling === element) {
return _this.getElementXPath(element.parentNode) + '/' + element.tagName + '[' + ix + ']';
}
if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
ix++;
}
}
},
},
};
</script>
<style scoped>
.el-form-item {
margin-bottom: 0;
}
.tooltips button {
width: 60px !important;
height: 30px !important;
}
</style>
src/components/elclick.vue
<template>
<!-- 右键菜单组件 -->
<!-- 点击菜单组件 -->
<div class="elClick">
<!-- 操作按钮区域 -->
<div style="height: 35px; margin-left: 15px; text-align: left;">
......@@ -9,10 +9,10 @@
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig">
<el-form-item label="查找方式">
<el-input v-model="actionConfig.Target.Type" :disabled="true"></el-input>
<el-input v-model="actionConfig.Target.Type" disabled></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input v-model="elementInfos.Text"></el-input>
<el-input v-model="elementInfos.Text" disabled></el-input>
</el-form-item>
<el-form-item label="查询时间">
<el-input v-model="actionConfig.Target.Timeout"></el-input>
......@@ -30,7 +30,7 @@ export default {
name: 'elClick',
components: {},
props: ['actionName', 'actionType'],
data() {
data () {
return {
elementInfos: {}, // 存储当前选中元素的信息
actionConfig: {
......@@ -42,15 +42,14 @@ export default {
"Name": this.actionName,
"Alias": this.actionType
},
selectDisabled: true // 控制选择按钮的禁用状态
};
},
created() { },
mounted() {
created () { },
mounted () {
// 在组件挂载后调用selectElement来添加事件监听器
this.selectElement();
},
beforeDestroy() {
beforeDestroy () {
// 在组件销毁前移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
......@@ -58,7 +57,7 @@ export default {
computed: {},
methods: {
// 提交表单信息
submit() {
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName;
......@@ -67,7 +66,7 @@ export default {
},
// 获取页面元素方法
contextMenuHandler(event) {
contextMenuHandler (event) {
event.preventDefault(); // 阻止默认的右击菜单
let element = event.target;
let elementInfo = {
......@@ -75,27 +74,25 @@ export default {
Text: element.innerText
};
this.elementInfos = elementInfo;
console.log(this.elementInfos);
this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.selectDisabled = false;
// 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
// 选择元素按钮调用
selectElement() {
selectElement () {
// 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false);
},
// 取消按钮调用
cancelSelect() {
cancelSelect () {
// 在取消按钮点击时移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
// 获取xpath
getElementXPath(element) {
getElementXPath (element) {
let _this = this;
if (element.tagName === 'BODY') {
return '/HTML/' + element.tagName;
......@@ -125,3 +122,5 @@ export default {
height: 30px !important;
}
</style>
src/components/index.js
import elClick from './elClick.vue';
import onSelect from './onSelect.vue';
import wait from './wait.vue';
import sysSleep from './sysSleep.vue';
import elOutput from './elOutput.vue';
import loopClick from './loopClick.vue'
import collectSingleElements from './collectSingleElements.vue';
import pageClose from './pageClose.vue';
......@@ -12,4 +12,4 @@ import actions from './actions.vue';
import onInput from './onInput.vue'
// import ComponentC from './ComponentC.vue';
export { elClick, onSelect, wait, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
export { elClick, sysSleep, elOutput, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
src/components/onInput.vue
......@@ -4,19 +4,18 @@
<script>
export default {
name:'onInput',
components:{},
props:{},
data(){
name: 'onInput',
components: {},
props: {},
data () {
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
created () { },
mounted () { },
watch: {},
computed: {},
methods: {},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<style lang="scss" scoped></style>
\ No newline at end of file
src/components/onSelect.vue deleted 100644 → 0
<template>
<div class="onSelect">选择</div>
</template>
<script>
export default {
name: 'onSelect',
components: {},
props: {},
data() {
return {
}
},
created() { },
mounted() { },
watch: {},
computed: {},
methods: {},
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
src/components/sysSleep.vue 0 → 100644
<template>
<!-- 点击菜单组件 -->
<div class="sysSleep">
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig">
<el-form-item label="等待时间">
<el-input v-model="actionConfig.PauseMilliseconds"></el-input>
</el-form-item>
</el-form>
<!-- 提交按钮 -->
<div style="width: 100%; text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right:15px;">提交信息</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'sysSleep',
components: {},
props: ['actionName', 'actionType'],
data () {
return {
actionConfig: {
"PauseMilliseconds": "",
"Name": this.actionName,
"Alias": this.actionType
},
};
},
created () { },
mounted () { },
watch: {},
computed: {},
methods: {
// 提交表单信息
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType;
this.$emit('dataChanged', this.actionConfig);
},
},
};
</script>
<style scoped>
.el-form-item {
margin-bottom: 0;
margin-left: 4px;
}
.tooltips button {
width: 60px !important;
height: 30px !important;
}
</style>
src/components/wait.vue deleted 100644 → 0
<template>
<div class="wait">
<el-form label-position="right" label-width="80px" :model="actionConfig">
<el-form-item label="等待时间">
<el-input
v-model="actionConfig.Target.PauseMilliseconds"
></el-input>
</el-form-item>
</el-form>
<div style="width: 100%;text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'wait',
components: {},
props: ['actionName', 'actionType'],
data() {
return {
selectDisabled: true,
elementInfo: {},
actionConfig:
{
"PauseMilliseconds": 2000,
"Name": this.actionName,//动作名称
"Alias": this.actionType//动作类型
},
}
},
created() { },
mounted() { },
watch: {},
computed: {},
methods: {
// 提交信息
submit() {
console.log(this.actionConfig)
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName
this.actionConfig.Alias = this.actionType
this.$emit('dataChanged', this.actionConfig);
// console.log(this.actionName)
},
},
}
</script>
<!-- <style lang="scss" scoped></style> -->
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment