Skip to content

V
Vue-WebDriver
Commit d3631b1e by 郁子恒
Options

新增json导出功能

parent d172cacb
Showing with 134 additions and 71 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 @@
},
"dependencies": {
"element-ui": "^2.5.4",
"file-saver": "^2.0.5",
"jquery": "^3.7.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
......
src/components/elClick.vue → src/components/elRightClick.vue
<template>
<div class="elClick">
<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-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-form-item>
<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-form-item>
<el-form-item label="标签名称">
<el-input v-model="actionConfig.Target.Selector"></el-input>
</el-form-item>
......@@ -28,12 +28,12 @@
<script>
export default {
name: 'elClick',
name: 'elRightClick',
components: {},
props: ['actionName', 'actionType'],
data () {
data() {
return {
elementInfo:{},
elementInfo: {},
actionConfig:
{
"Target": {//点击的目标元素配置信息
......@@ -69,16 +69,23 @@ export default {
value: 'Css',
label: 'Css'
}],
selectDisabled:true
selectDisabled: true
}
},
created () { },
mounted () { },
created() { },
mounted() {
// 在组件挂载后调用selectElement来添加事件监听器
this.selectElement();
},
beforeDestroy() {
// 在组件销毁前移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
watch: {},
computed: {},
methods: {
submit () {
submit() {
console.log(this.actionConfig)
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName
......@@ -86,42 +93,70 @@ export default {
this.$emit('dataChanged', this.actionConfig);
// console.log(this.actionName)
},
// 获取页面元素
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);
}
// 获取页面元素方法
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', 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
let _this = this
console.log(_this.elementInfo)
console.log(_this.elementInfo[val])
_this.actionConfig.Target.Selector = _this.elementInfo[val]
},
// 获取xpath
getElementXPath (element) {
getElementXPath(element) {
let _this = this
if (element.tagName === 'BODY') {
return '/HTML/' + element.tagName;
......@@ -138,7 +173,7 @@ export default {
}
},
// 获取元素css
getElementCssSelector (element) {
getElementCssSelector(element) {
let selector = element.tagName.toLowerCase();
if (element.id) {
selector += '#' + element.id;
......
src/components/index.js
import elRightClick from './elRightClick.vue';
import onSelect from './onSelect.vue';
import elClick from './elClick.vue';
import wait from './wait.vue';
import loopClick from './loopClick.vue'
import collectSingleElements from './collectSingleElements.vue';
......@@ -12,4 +12,4 @@ import actions from './actions.vue';
import onInput from './onInput.vue'
// import ComponentC from './ComponentC.vue';
export { onSelect, elClick, wait, onInput,loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
export { elRightClick, onSelect, wait, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
src/components/onSelect.vue
......@@ -4,19 +4,18 @@
<script>
export default {
name:'onSelect',
components:{},
props:{},
data(){
name: 'onSelect',
components: {},
props: {},
data() {
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
created() { },
mounted() { },
watch: {},
computed: {},
methods: {},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<style lang="scss" scoped></style>
\ No newline at end of file
src/components/wait.vue
<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>
<script>
export default {
name:'wait',
components:{},
props:{},
data(){
name: 'wait',
components: {},
props: ['actionName', 'actionType'],
data() {
return {
selectDisabled: true,
elementInfo: {},
actionConfig:
{
"PauseMilliseconds": 2000,
"Name": this.actionName,//动作名称
"Alias": this.actionType//动作类型
},
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
created() { },
mounted() { },
watch: {},
computed: {},
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>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<!-- <style lang="scss" scoped></style> -->
\ 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