Skip to content

V
Vue-WebDriver
Commit ed7cc5a6 by 郁子恒
Options

隐藏任务地址

parent cdaf3153
Showing with 132 additions and 78 deletions
src/App.vue
...@@ -10,20 +10,21 @@ ...@@ -10,20 +10,21 @@
<span style="padding-left: 3px;">K5 网页自动化工具</span> <span style="padding-left: 3px;">K5 网页自动化工具</span>
</div> </div>
<!-- 任务信息 --> <!-- 任务信息 -->
<div style="display: flex;align-items: center;height: 60px;justify-content: space-between;margin-right: 15px;"> <div style="display: flex;align-items: center;height: 25px;justify-content: space-between;margin-right: 15px;">
<div style="width: 85%;display: flex;flex-direction: column;text-align: left;"> <div style="width: 65%;display: flex;flex-direction: column;text-align: left;">
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;"> <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;">
<span style="width: 95px;padding-left: 5px;">任务名称：</span> <span style="width: 95px;padding-left: 5px;">任务名称：</span>
<el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input> <el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input>
</div> </div>
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;"> <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;display: none;">
<span style="width: 95px; padding-left: 5px;">任务地址：</span> <span style="width: 95px; padding-left: 5px;">任务地址：</span>
<el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input> <el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
</div> </div>
</div> </div>
<div style="display: flex;flex-direction: column;height: 55px;justify-content: space-evenly;"> <div style="display: flex; flex-direction: row; justify-content: space-around; width: 170px;">
<el-button size="mini" style="width: 50px;height: 20px;">保存任务</el-button> <el-button size="mini" style="width: 50px;height: 20px;">导入任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;" @click="submitPlan">导出任务</el-button> <el-button size="mini" style="width: 50px;height: 20px;" @click="submitPlan">导出任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;">保存任务</el-button>
</div> </div>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
...@@ -38,8 +39,8 @@ ...@@ -38,8 +39,8 @@
</div> </div>
</div> </div>
<div style="display:flex;align-items: center;margin-right: 15px;"> <div style="display:flex;align-items: center;margin-right: 15px;">
<el-button :disabled="state" type="primary" size="mini" style="width: 30px;height: 20px;" @click="newAction"> <el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction">
<img style="width: 15px;height: 15px;" src="./assets/add.svg"> <img style="width: 12px;height: 12px;" src="./assets/add.svg">
</el-button> </el-button>
</div> </div>
</div> </div>
......
src/components/collectionTable.vue
...@@ -3,27 +3,21 @@ ...@@ -3,27 +3,21 @@
<div style="height: 35px;margin-left: 15px;text-align: left;"> <div style="height: 35px;margin-left: 15px;text-align: left;">
<el-button size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button> <el-button size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button>
<el-button size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button> <el-button size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
<span style="margin-left: 80px;" v-if="isSelectTable">表名:</span> <vxe-input v-if="isSelectTable" <span style="margin-left: 80px;" v-if="isSelectTable">表名:</span> <vxe-input v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
</div> </div>
<!-- 全部表格信息 --> <!-- 全部表格信息 -->
<div style="width: 498px;overflow: auto;"> <div style="width: 498px;overflow: auto;">
<vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="220" <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="220" v-if="isSelectTable" style="margin-bottom: 20px;">
v-if="isSelectTable" style="margin-bottom: 20px;">
<vxe-column field="" title="列配置"> <vxe-column field="" title="列配置">
<template v-slot="{ row }"> <template v-slot="{ row }">
<!-- {{ row.text }} --> <!-- {{ row.text }} -->
<div style="display: flex;"> <span style="width: 68px;">列名:</span> <vxe-input v-model="row.title" <div style="display: flex;"> <span style="width: 68px;">列名:</span> <vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input>
placeholder="请填写列名" size="mini"></vxe-input>
</div> </div>
<div style="display: flex;"> <span style="width: 68px;">属性名:</span> <vxe-input v-model="row.name" <div style="display: flex;"> <span style="width: 68px;">属性名:</span> <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
placeholder="请填写属性名" size="mini"></vxe-input>
</div> </div>
<div style="display: flex;"> <span style="width: 68px;line-height: 12px;"> <div style="display: flex;"> <span style="width: 68px;line-height: 12px;">
类型:</span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="top"> 类型:</span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="top">
<vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" <vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" :label="num.label"></vxe-option>
:label="num.label"></vxe-option>
</vxe-select> </vxe-select>
</div> </div>
...@@ -36,8 +30,7 @@ ...@@ -36,8 +30,7 @@
</vxe-column> </vxe-column>
<vxe-column title="操作" width="100"> <vxe-column title="操作" width="100">
<template #default="{ row }"> <template #default="{ row }">
<vxe-button status="danger" content="删除" @click="columnDelete(row)" <vxe-button status="danger" content="删除" @click="columnDelete(row)" style="margin-right: 20px;width: 50px;"></vxe-button>
style="margin-right: 20px;width: 50px;"></vxe-button>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
...@@ -58,7 +51,7 @@ export default { ...@@ -58,7 +51,7 @@ export default {
name: 'collectionTable', name: 'collectionTable',
components: {}, components: {},
props: {}, props: {},
data () { data() {
return { return {
tableColumn: [], tableColumn: [],
tableData: [], tableData: [],
...@@ -71,22 +64,22 @@ export default { ...@@ -71,22 +64,22 @@ export default {
tableName: '', tableName: '',
} }
}, },
created () { created() {
// getTableData() // getTableData()
}, },
mounted () { }, mounted() { },
watch: {}, watch: {},
computed: {}, computed: {},
methods: { methods: {
getTable () { getTable() {
let _this = this let _this = this
_this.table = new table() _this.table = new table()
// 验证name属性是否唯一 // 验证name属性是否唯一
_this.validateNames(this.Xpaths) _this.validateNames(this.Xpaths)
}, },
columnDelete (row) { columnDelete(row) {
let _this = this let _this = this
_this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY _this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY
!== row._X_ROW_KEY !== row._X_ROW_KEY
...@@ -94,17 +87,17 @@ export default { ...@@ -94,17 +87,17 @@ export default {
_this.Xpaths = _this.Xpaths.filter(xpath => xpath.xpath !== row.xpath); _this.Xpaths = _this.Xpaths.filter(xpath => xpath.xpath !== row.xpath);
_this.table.cells = _this.table.cells.filter(xpath => xpath !== row.xpath); _this.table.cells = _this.table.cells.filter(xpath => xpath !== row.xpath);
}, },
columnBack () { columnBack() {
let _this = this let _this = this
_this.isSelectTable = true _this.isSelectTable = true
_this.tableData = [] _this.tableData = []
}, },
// 获取页面元素 // 获取页面元素
selectElement () { selectElement() {
let _this = this let _this = this
// 定义事件处理函数 // 定义事件处理函数
function contextMenuHandler (event) { function contextMenuHandler(event) {
event.preventDefault(); // 阻止默认的右击菜单 event.preventDefault(); // 阻止默认的右击菜单
_this.contextMenuListenerAdded = true _this.contextMenuListenerAdded = true
//表格展示配置 //表格展示配置
...@@ -175,7 +168,7 @@ export default { ...@@ -175,7 +168,7 @@ export default {
}, },
// 获取xpath // 获取xpath
getElementXPath (element) { getElementXPath(element) {
let _this = this let _this = this
if (element.tagName === 'BODY') { if (element.tagName === 'BODY') {
return '/HTML/' + element.tagName; return '/HTML/' + element.tagName;
...@@ -191,12 +184,12 @@ export default { ...@@ -191,12 +184,12 @@ export default {
} }
} }
}, },
validateNames (arr) { validateNames(arr) {
let _this = this; let _this = this;
let names = new Set(); let names = new Set();
if (_this.tableName == '') { if (_this.tableName == '') {
this.$message.error("请填写表名"); this.$message.error("请填写表名");
return; // 找到重复后退出函数 return; // 找到重复后退出函数
} }
for (const item of arr) { for (const item of arr) {
if (names.has(item.name)) { if (names.has(item.name)) {
......
src/components/elRightClick.vue
<template> <template>
<!-- 右键菜单组件 -->
<div class="elRightClick"> <div class="elRightClick">
<div style="height: 35px;margin-left: 15px;text-align: left;"> <!-- 操作按钮区域 -->
<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="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button> <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
<span style="margin-left: 3px;">元素信息如下:</span> <span style="margin-left: 3px;">元素信息如下:</span>
</div> </div>
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig"> <el-form label-position="right" label-width="80px" :model="actionConfig">
<el-form-item label="查找方式"> <el-form-item label="查找方式">
<el-input v-model="actionConfig.Target.Type" :disabled="true"></el-input> <el-input v-model="actionConfig.Target.Type" :disabled="true"></el-input>
...@@ -17,7 +19,8 @@ ...@@ -17,7 +19,8 @@
<el-input v-model="actionConfig.Target.Timeout"></el-input> <el-input v-model="actionConfig.Target.Timeout"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div style="width: 100%;text-align: right;"> <!-- 提交按钮 -->
<div style="width: 100%; text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button> <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div> </div>
</div> </div>
...@@ -30,19 +33,18 @@ export default { ...@@ -30,19 +33,18 @@ export default {
props: ['actionName', 'actionType'], props: ['actionName', 'actionType'],
data() { data() {
return { return {
elementInfos: {}, elementInfos: {}, // 存储当前选中元素的信息
actionConfig: actionConfig: {
{ "Target": {
"Target": {//点击的目标元素配置信息 "Type": "xpath",
"Type": "xpath",//查找元素的方式，通过Id查找
"Xpath": "", "Xpath": "",
"Timeout": 5000//查询时间 "Timeout": 5000
}, },
"Name": this.actionName,//动作名称 "Name": this.actionName,
"Alias": this.actionType//动作类型 "Alias": this.actionType
}, },
selectDisabled: true selectDisabled: true // 控制选择按钮的禁用状态
} };
}, },
created() { }, created() { },
mounted() { mounted() {
...@@ -56,40 +58,44 @@ export default { ...@@ -56,40 +58,44 @@ export default {
watch: {}, watch: {},
computed: {}, computed: {},
methods: { methods: {
// 提交表单信息
submit() { submit() {
console.log(this.actionConfig) console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值 // 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType this.actionConfig.Alias = this.actionType;
this.$emit('dataChanged', this.actionConfig); this.$emit('dataChanged', this.actionConfig);
}, },
// 获取页面元素方法 // 获取页面元素方法
contextMenuHandler(event) { contextMenuHandler(event) {
event.preventDefault(); // 阻止默认的右击菜单 event.preventDefault(); // 阻止默认的右击菜单
let element = event.target; let element = event.target;
// this.getElementXPath(element)
let elementInfo = { let elementInfo = {
Xpath: this.getElementXPath(element) Xpath: this.getElementXPath(element)
} };
this.elementInfos = elementInfo; this.elementInfos = elementInfo;
this.actionConfig.Target.Xpath = elementInfo.Xpath; this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.selectDisabled = false; this.selectDisabled = false;
// 移除事件监听器 // 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler); document.removeEventListener('contextmenu', this.contextMenuHandler);
}, },
// 选择元素按钮调用 // 选择元素按钮调用
selectElement() { selectElement() {
// 添加事件监听器 // 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false); document.addEventListener('contextmenu', this.contextMenuHandler, false);
}, },
// 取消按钮调用 // 取消按钮调用
cancelSelect() { cancelSelect() {
// 在取消按钮点击时移除事件监听器 // 在取消按钮点击时移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler); document.removeEventListener('contextmenu', this.contextMenuHandler);
}, },
// 获取xpath // 获取xpath
getElementXPath(element) { getElementXPath(element) {
let _this = this let _this = this;
if (element.tagName === 'BODY') { if (element.tagName === 'BODY') {
return '/HTML/' + element.tagName; return '/HTML/' + element.tagName;
} }
...@@ -105,8 +111,9 @@ export default { ...@@ -105,8 +111,9 @@ export default {
} }
}, },
}, },
} };
</script> </script>
<style scoped> <style scoped>
.el-form-item { .el-form-item {
margin-bottom: 0; margin-bottom: 0;
...@@ -116,4 +123,4 @@ export default { ...@@ -116,4 +123,4 @@ export default {
width: 60px !important; width: 60px !important;
height: 30px !important; height: 30px !important;
} }
</style> </style>
\ No newline at end of file
src/components/elclick.vue
<template> <template>
<!-- 右键菜单组件 -->
<div class="elClick"> <div class="elClick">
<div style="height: 35px;margin-left: 15px;text-align: left;"> <!-- 操作按钮区域 -->
<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="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button> <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
<span style="margin-left: 3px;">元素信息如下:</span> <span style="margin-left: 3px;">元素信息如下:</span>
</div> </div>
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig"> <el-form label-position="right" label-width="80px" :model="actionConfig">
<el-form-item label="查找方式"> <el-form-item label="查找方式">
<el-select id="eventType" name="eventType" v-model="actionConfig.Type" :placeholder="selectDisabled ? '右击选择元素' : '请选择'" @change="handleChange" filterable remote :disabled="selectDisabled"> <el-input v-model="actionConfig.Target.Type" :disabled="true"></el-input>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="标签名称"> <el-form-item label="内容">
<el-input v-model="actionConfig.Target.Selector"></el-input> <el-input v-model="actionConfig.Target.Xpath"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="查询时间"> <el-form-item label="查询时间">
<el-input v-model="actionConfig.Target.Timeout"></el-input> <el-input v-model="actionConfig.Target.Timeout"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div style="width: 100%;text-align: right;"> <!-- 提交按钮 -->
<div style="width: 100%; text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button> <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div> </div>
</div> </div>
...@@ -33,18 +33,18 @@ export default { ...@@ -33,18 +33,18 @@ export default {
props: ['actionName', 'actionType'], props: ['actionName', 'actionType'],
data() { data() {
return { return {
elementInfo: {}, elementInfos: {}, // 存储当前选中元素的信息
actionConfig: { actionConfig: {
"Target": {//点击的目标元素配置信息 "Target": {
"Type": "",//查找元素的方式，通过Id查找 "Type": "xpath",
"Selector": "",//Id名称 "Xpath": "",
"Timeout": 5000//查询时间 "Timeout": 5000
}, },
"Name": this.actionName,//动作名称 "Name": this.actionName,
"Alias": this.actionType//动作类型 "Alias": this.actionType
}, },
selectDisabled: true selectDisabled: true // 控制选择按钮的禁用状态
} };
}, },
created() { }, created() { },
mounted() { mounted() {
...@@ -58,14 +58,69 @@ export default { ...@@ -58,14 +58,69 @@ export default {
watch: {}, watch: {},
computed: {}, computed: {},
methods: { methods: {
// 提交表单信息
submit() { submit() {
console.log(this.actionConfig) console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值 // 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType this.actionConfig.Alias = this.actionType;
this.$emit('dataChanged', this.actionConfig); this.$emit('dataChanged', this.actionConfig);
}, },
}
} // 获取页面元素方法
contextMenuHandler(event) {
event.preventDefault(); // 阻止默认的右击菜单
let element = event.target;
let elementInfo = {
Xpath: this.getElementXPath(element)
};
this.elementInfos = elementInfo;
this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.selectDisabled = false;
// 移除事件监听器
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> </script>
<style scoped></style>
\ No newline at end of file <style scoped>
.el-form-item {
margin-bottom: 0;
}
.tooltips button {
width: 60px !important;
height: 30px !important;
}
</style>
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