Skip to content

V
Vue-WebDriver
Commit d3631b1e by 郁子恒
Options

新增json导出功能

parent d172cacb
Showing with 118 additions and 55 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
}, },
"dependencies": { "dependencies": {
"element-ui": "^2.5.4", "element-ui": "^2.5.4",
"file-saver": "^2.0.5",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"less": "^3.9.0", "less": "^3.9.0",
"less-loader": "^4.1.0", "less-loader": "^4.1.0",
......
src/components/elClick.vue → src/components/elRightClick.vue
<template> <template>
<div class="elClick"> <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>
<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?'请先选择元素':'请选择'" <el-select id="eventType" name="eventType" v-model="actionConfig.Type" :placeholder="selectDisabled ? '请先右击选择元素' : '请选择'" @change="handleChange" filterable remote :disabled="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 v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
...@@ -28,12 +28,12 @@ ...@@ -28,12 +28,12 @@
<script> <script>
export default { export default {
name: 'elClick', name: 'elRightClick',
components: {}, components: {},
props: ['actionName', 'actionType'], props: ['actionName', 'actionType'],
data () { data() {
return { return {
elementInfo:{}, elementInfo: {},
actionConfig: actionConfig:
{ {
"Target": {//点击的目标元素配置信息 "Target": {//点击的目标元素配置信息
...@@ -69,16 +69,23 @@ export default { ...@@ -69,16 +69,23 @@ export default {
value: 'Css', value: 'Css',
label: 'Css' label: 'Css'
}], }],
selectDisabled:true selectDisabled: true
} }
}, },
created () { }, created() { },
mounted () { }, mounted() {
// 在组件挂载后调用selectElement来添加事件监听器
this.selectElement();
},
beforeDestroy() {
// 在组件销毁前移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
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
...@@ -86,42 +93,70 @@ export default { ...@@ -86,42 +93,70 @@ export default {
this.$emit('dataChanged', this.actionConfig); this.$emit('dataChanged', this.actionConfig);
// console.log(this.actionName) // console.log(this.actionName)
}, },
// 获取页面元素 // 获取页面元素方法
selectElement () { contextMenuHandler(event) {
let _this = this
// 定义事件处理函数
function contextMenuHandler (event) {
event.preventDefault(); // 阻止默认的右击菜单 event.preventDefault(); // 阻止默认的右击菜单
let element = event.target; let element = event.target;
let elementInfo = { let elementInfo = {
Id: element.id || '无', Id: element.id || '无',
Xpath: _this.getElementXPath(element), Xpath: this.getElementXPath(element),
Link: element.href || '无', Link: element.href || '无',
Name: element.name || '无', Name: element.name || '无',
Class: element.className || '无', Class: element.className || '无',
PartialLink: element.textContent.trim() || '无', PartialLink: element.textContent.trim() || '无',
Tag: element.tagName.toLowerCase(), Tag: element.tagName.toLowerCase(),
Css: _this.getElementCssSelector(element) Css: this.getElementCssSelector(element),
}; };
_this.elementInfo =elementInfo this.elementInfo = elementInfo;
_this.selectDisabled = false this.selectDisabled = false;
// 移除事件监听器 // 移除事件监听器
document.removeEventListener('contextmenu', contextMenuHandler); document.removeEventListener('contextmenu', this.contextMenuHandler);
} },
// 选择元素按钮调用
selectElement() {
// 添加事件监听器 // 添加事件监听器
document.addEventListener('contextmenu', contextMenuHandler, false); document.addEventListener('contextmenu', this.contextMenuHandler, false);
}, },
handleChange (val) { // 取消按钮调用
cancelSelect() {
// 在取消按钮点击时移除事件监听器
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 // this.actionType == val
let _this = this let _this = this
console.log(_this.elementInfo) console.log(_this.elementInfo)
console.log(_this.elementInfo[val]) console.log(_this.elementInfo[val])
_this.actionConfig.Target.Selector = _this.elementInfo[val] _this.actionConfig.Target.Selector = _this.elementInfo[val]
}, },
// 获取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;
...@@ -138,7 +173,7 @@ export default { ...@@ -138,7 +173,7 @@ export default {
} }
}, },
// 获取元素css // 获取元素css
getElementCssSelector (element) { getElementCssSelector(element) {
let selector = element.tagName.toLowerCase(); let selector = element.tagName.toLowerCase();
if (element.id) { if (element.id) {
selector += '#' + element.id; selector += '#' + element.id;
......
src/components/index.js
import elRightClick from './elRightClick.vue';
import onSelect from './onSelect.vue'; import onSelect from './onSelect.vue';
import elClick from './elClick.vue';
import wait from './wait.vue'; import wait from './wait.vue';
import loopClick from './loopClick.vue' import loopClick from './loopClick.vue'
import collectSingleElements from './collectSingleElements.vue'; import collectSingleElements from './collectSingleElements.vue';
...@@ -12,4 +12,4 @@ import actions from './actions.vue'; ...@@ -12,4 +12,4 @@ import actions from './actions.vue';
import onInput from './onInput.vue' import onInput from './onInput.vue'
// import ComponentC from './ComponentC.vue'; // import ComponentC from './ComponentC.vue';
export { onSelect, elClick, wait, onInput,loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions }; export { elRightClick, onSelect, wait, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file \ No newline at end of file
src/components/onSelect.vue
...@@ -4,19 +4,18 @@ ...@@ -4,19 +4,18 @@
<script> <script>
export default { export default {
name:'onSelect', name: 'onSelect',
components:{}, components: {},
props:{}, props: {},
data(){ data() {
return { return {
} }
}, },
created(){}, created() { },
mounted(){}, mounted() { },
watch:{}, watch: {},
computed:{}, computed: {},
methods:{}, methods: {},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style> \ No newline at end of file
\ No newline at end of file
src/components/wait.vue
<template> <template>
<div class="wait">等待</div> <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> </template>
<script> <script>
export default { export default {
name:'wait', name: 'wait',
components:{}, components: {},
props:{}, props: ['actionName', 'actionType'],
data(){ data() {
return { return {
selectDisabled: true,
elementInfo: {},
actionConfig:
{
"PauseMilliseconds": 2000,
"Name": this.actionName,//动作名称
"Alias": this.actionType//动作类型
},
} }
}, },
created(){}, created() { },
mounted(){}, mounted() { },
watch:{}, watch: {},
computed:{}, computed: {},
methods:{}, 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> </script>
<style lang="scss" scoped> <!-- <style lang="scss" scoped></style> -->
</style> \ No newline at end of file
\ 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