Skip to content

V
Vue-WebDriver
Commit 9d130ea6 by 郁子恒
Options

点击操作

parent ce7e7ae4
Showing with 8 additions and 140 deletions
src/App.vue
......@@ -105,10 +105,10 @@
// 导出json文件使用的库
import { saveAs } from 'file-saver';
import draggable from 'vuedraggable'
import { onSelect, elRightClick, elClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
import { onSelect, elClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
export default {
name: 'App',
components: { draggable, onSelect, elClick, elRightClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
components: { draggable, onSelect, elClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
props: {},
data() {
return {
......@@ -122,9 +122,6 @@ export default {
winHeight: window.outerHeight,
isShowAction: false,
options: [{
value: 'elRightClick',
label: '右击'
}, {
value: 'elClick',
label: '点击'
}, {
......@@ -239,9 +236,6 @@ export default {
// 组件配置
loadComponent(componentName) {
switch (componentName) {
case 'elRightClick':
this.dynamicComponent = elRightClick
break;
case 'elClick':
this.dynamicComponent = elClick
break;
......
src/components/elRightClick.vue deleted 100644 → 0
<template>
<!-- 右键菜单组件 -->
<div class="elRightClick">
<!-- 操作按钮区域 -->
<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>
</el-form-item>
<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;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'elRightClick',
components: {},
props: ['actionName', 'actionType'],
data() {
return {
elementInfos: {}, // 存储当前选中元素的信息
actionConfig: {
"Target": {
"Type": "xpath",
"Xpath": "",
"Timeout": 5000
},
"Name": this.actionName,
"Alias": this.actionType
},
selectDisabled: true // 控制选择按钮的禁用状态
};
},
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)
};
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>
.el-form-item {
margin-bottom: 0;
}
.tooltips button {
width: 60px !important;
height: 30px !important;
}
</style>
src/components/elclick.vue
......@@ -5,7 +5,6 @@
<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">
......@@ -13,7 +12,7 @@
<el-input v-model="actionConfig.Target.Type" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input v-model="actionConfig.Target.Xpath"></el-input>
<el-input v-model="elementInfos.Text"></el-input>
</el-form-item>
<el-form-item label="查询时间">
<el-input v-model="actionConfig.Target.Timeout"></el-input>
......@@ -72,9 +71,11 @@ export default {
event.preventDefault(); // 阻止默认的右击菜单
let element = event.target;
let elementInfo = {
Xpath: this.getElementXPath(element)
Xpath: this.getElementXPath(element),
Text: element.innerText
};
this.elementInfos = elementInfo;
console.log(this.elementInfos);
this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.selectDisabled = false;
// 移除事件监听器
......
src/components/index.js
import elRightClick from './elRightClick.vue';
import elClick from './elClick.vue';
import onSelect from './onSelect.vue';
import wait from './wait.vue';
......@@ -13,4 +12,4 @@ import actions from './actions.vue';
import onInput from './onInput.vue'
// import ComponentC from './ComponentC.vue';
export { elRightClick, elClick, onSelect, wait, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
export { elClick, onSelect, wait, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ 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