Skip to content

V
Vue-WebDriver
Commit 9ca4e342 by 高源
Options

合并

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