Skip to content

V
Vue-WebDriver
Commit 79441973 by 郁子恒
Options

右击界面及功能

parent c9a3e961
Showing with 17 additions and 95 deletions
src/App.vue
...@@ -124,8 +124,8 @@ export default { ...@@ -124,8 +124,8 @@ export default {
value: 'elRightClick', value: 'elRightClick',
label: '右击' label: '右击'
}, { }, {
value: 'select', value: 'elClick',
label: '选择' label: '点击'
}, { }, {
value: 'wait', value: 'wait',
label: '等待' label: '等待'
......
src/components/elRightClick.vue
...@@ -8,13 +8,10 @@ ...@@ -8,13 +8,10 @@
</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>
...@@ -33,44 +30,18 @@ export default { ...@@ -33,44 +30,18 @@ export default {
props: ['actionName', 'actionType'], props: ['actionName', 'actionType'],
data() { data() {
return { return {
elementInfo: {}, elementInfos: {},
actionConfig: actionConfig:
{ {
"Target": {//点击的目标元素配置信息 "Target": {//点击的目标元素配置信息
"Type": "",//查找元素的方式，通过Id查找 "Type": "xpath",//查找元素的方式，通过Id查找
"Selector": "",//Id名称 "Xpath": "",
"Timeout": 5000//查询时间 "Timeout": 5000//查询时间
}, },
"Name": this.actionName,//动作名称 "Name": this.actionName,//动作名称
"Alias": this.actionType//动作类型 "Alias": this.actionType//动作类型
}, },
options: [{
value: 'Id',
label: 'Id'
}, {
value: 'Link',
label: 'Link'
}, {
value: 'Name',
label: 'Name'
}, {
value: 'Xpath',
label: 'Xpath'
}, {
value: 'Class',
label: 'Class'
}, {
value: 'PartialLink',
label: 'PartialLink'
}, {
value: 'Tag',
label: 'Tag'
}, {
value: 'Css',
label: 'Css'
}],
selectDisabled: true selectDisabled: true
} }
}, },
created() { }, created() { },
...@@ -96,17 +67,12 @@ export default { ...@@ -96,17 +67,12 @@ export default {
contextMenuHandler(event) { contextMenuHandler(event) {
event.preventDefault(); // 阻止默认的右击菜单 event.preventDefault(); // 阻止默认的右击菜单
let element = event.target; let element = event.target;
// this.getElementXPath(element)
let elementInfo = { let elementInfo = {
Id: element.id || '无', Xpath: this.getElementXPath(element)
Xpath: this.getElementXPath(element), }
Link: element.href || '无', this.elementInfos = elementInfo;
Name: element.name || '无', this.actionConfig.Target.Xpath = elementInfo.Xpath;
Class: element.className || '无',
PartialLink: element.textContent.trim() || '无',
Tag: element.tagName.toLowerCase(),
Css: this.getElementCssSelector(element),
};
this.elementInfo = elementInfo;
this.selectDisabled = false; this.selectDisabled = false;
// 移除事件监听器 // 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler); document.removeEventListener('contextmenu', this.contextMenuHandler);
...@@ -121,39 +87,6 @@ export default { ...@@ -121,39 +87,6 @@ export default {
// 在取消按钮点击时移除事件监听器 // 在取消按钮点击时移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler); document.removeEventListener('contextmenu', this.contextMenuHandler);
}, },
// // 获取页面元素
// selectElement() {
// let _this = this
// // 定义事件处理函数
// function contextMenuHandler(event) {
// event.preventDefault(); // 阻止默认的右击菜单
// let element = event.target;
// let elementInfo = {
// Id: element.id || '无',
// Xpath: _this.getElementXPath(element),
// Link: element.href || '无',
// Name: element.name || '无',
// Class: element.className || '无',
// PartialLink: element.textContent.trim() || '无',
// Tag: element.tagName.toLowerCase(),
// Css: _this.getElementCssSelector(element)
// };
// _this.elementInfo = elementInfo
// _this.selectDisabled = false
// // 移除事件监听器
// document.removeEventListener('contextmenu', contextMenuHandler);
// }
// // 添加事件监听器
// document.addEventListener('contextmenu', contextMenuHandler, false);
// },
// 改变选择框提示内容
handleChange(val) {
// this.actionType == val
let _this = this
console.log(_this.elementInfo)
console.log(_this.elementInfo[val])
_this.actionConfig.Target.Selector = _this.elementInfo[val]
},
// 获取xpath // 获取xpath
getElementXPath(element) { getElementXPath(element) {
let _this = this let _this = this
...@@ -171,17 +104,6 @@ export default { ...@@ -171,17 +104,6 @@ export default {
} }
} }
}, },
// 获取元素css
getElementCssSelector(element) {
let selector = element.tagName.toLowerCase();
if (element.id) {
selector += '#' + element.id;
}
if (element.className) {
selector += '.' + element.className.split(' ').join('.');
}
return selector;
}
}, },
} }
</script> </script>
......
src/components/elclick.vue
...@@ -36,12 +36,12 @@ export default { ...@@ -36,12 +36,12 @@ export default {
elementInfo: {}, elementInfo: {},
actionConfig: { actionConfig: {
"Target": {//点击的目标元素配置信息 "Target": {//点击的目标元素配置信息
"Type": "Id",//查找元素的方式，通过Id查找 "Type": "",//查找元素的方式，通过Id查找
"Selector": "su",//Id名称 "Selector": "",//Id名称
"Timeout": 5000//查询时间 "Timeout": 5000//查询时间
}, },
"Name": "百度一下",//动作名称 "Name": this.actionName,//动作名称
"Alias": "el.click"//动作类型 "Alias": this.actionType//动作类型
}, },
selectDisabled: true selectDisabled: true
} }
......
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