Skip to content

V
Vue-WebDriver
Commit adf30c4e by 郁子恒
Options

完成页面跳转、点击、等待、输入、取值的数据结构更改，优化界面

parent 96ddaeb9
Showing with 86 additions and 201 deletions
src/App.vue
......@@ -79,7 +79,7 @@
<!-- 容器配置 -->
<div v-if="isShowAction">
<div style="height: 35px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #888888;">
<div style="width: 211px;display: flex;align-items: center;">
<div style="width: 211px;display: flex;align-items: center;margin-left: 15px;">
<span style="width: 90px;">动作名称:</span>
<el-input class="input-new-tag dongzuo" v-model="actionName" size="small" placeholder="请输入动作名称">
</el-input>
......@@ -95,7 +95,7 @@
<div style="margin-left: 15px;margin-top: 10px;" v-if="actionType == 'actions'">
<el-button @click="toActions">进入容器</el-button>
</div>
<component :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" :dynamicTagObj="dynamicTagObj" v-if="actionType !== ''"></component>
<component style="height: 345px;" :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" :dynamicTagObj="dynamicTagObj" v-if="actionType !== ''"></component>
</div>
</div>
</div>
......@@ -105,10 +105,10 @@
// 导出json文件使用的库
import { saveAs } from 'file-saver';
import draggable from 'vuedraggable'
import { pageNavigate, elClick, sysSleep, elOutput, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
import { pageNavigate, elClick, sysSleep, elOutput, loopClick, onInput, pageJavascript, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions } from './components/index.js'
export default {
name: 'App',
components: { pageNavigate, elClick, sysSleep, draggable, elOutput, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
components: { pageNavigate, elClick, sysSleep, elOutput, loopClick, onInput, pageJavascript, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions },
props: {},
data () {
return {
......@@ -123,19 +123,19 @@ export default {
winHeight: window.outerHeight,
isShowAction: false,
options: [{
value: 'page.Navigate',
value: 'page.navigate',
label: '页面跳转'
}, {
value: 'elClick',
value: 'el.click',
label: '点击'
}, {
value: 'sysSleep',
value: 'sys.sleep',
label: '等待'
}, {
value: 'el.input',
label: '输入'
}, {
value: 'elOutput',
value: 'el.output',
label: '取值'
}, {
value: 'collectionTable',
......@@ -153,7 +153,7 @@ export default {
value: 'mouseMove',
label: '鼠标移动'
}, {
value: 'pageJavascipt',
value: 'page.javascript',
label: '脚本执行'
}, {
value: 'submit',
......@@ -243,21 +243,21 @@ export default {
// 组件配置
loadComponent (componentName) {
switch (componentName) {
case 'page.Navigate':
case 'page.navigate':
this.dynamicComponent = pageNavigate
break;
case 'elClick':
case 'el.click':
this.dynamicComponent = elClick
break;
case 'sysSleep':
case 'sys.sleep':
this.dynamicComponent = sysSleep
break;
case 'elOutput':
this.dynamicComponent = elOutput
break;
case 'el.input':
this.dynamicComponent = onInput
break;
case 'el.output':
this.dynamicComponent = elOutput
break;
case 'loopClick':
this.dynamicComponent = loopClick
break;
......@@ -270,8 +270,8 @@ export default {
case 'mouseMove':
this.dynamicComponent = mouseMove
break;
case 'pageJavascipt':
this.dynamicComponent = pageJavascipt
case 'page.javascript':
this.dynamicComponent = pageJavascript
break;
case 'collectionTable':
this.dynamicComponent = collectionTable
......@@ -288,7 +288,8 @@ export default {
},
// 接收子组件信息
handleDataChange (newData) {
this.subData = [newData];
// this.subData = [newData];
this.subData.push(newData);
// console.log(this.subData);
// console.log('接收到的数据:', newData);
const targetObject = this.dynamicTags.find(obj => obj.Kvid === this.dynamicTagObj.Kvid);
......@@ -611,11 +612,11 @@ export default {
// 保存任务
submitPlan (formName) {
this.isShowAction = true
console.log(this.subData)
// console.log(this.subData)
// console.log(this.treeNode)
// 将JSON对象转换为JSON字符串
// const arrayOfObjects = [this.subData];
const jsonString = JSON.stringify(this.subData, null, 2);
// const jsonString = JSON.stringify(this.treeNode, null, 2);
// 创建一个Blob对象
const blob = new Blob([jsonString], { type: 'application/json' });
// 使用file-saver库保存文件
......
src/components/collectionTable.vue
......@@ -6,7 +6,7 @@
<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;">
<div style="width: 460px;overflow: auto;">
<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 }">
......@@ -64,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
......@@ -87,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
//表格展示配置
......@@ -168,7 +168,7 @@ export default {
},
// 获取xpath
getElementXPath(element) {
getElementXPath (element) {
let _this = this
if (element.tagName === 'BODY') {
return '/HTML/' + element.tagName;
......@@ -184,7 +184,7 @@ export default {
}
}
},
validateNames(arr) {
validateNames (arr) {
let _this = this;
let names = new Set();
// 检查表名是否为空
......
src/components/elInput.vue deleted 100644 → 0
<template>
<div class="onInput">
<!-- 操作按钮区域 -->
<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>
</div>
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig">
<el-form-item label="查找方式">
<el-input v-model="actionConfig.Target.Type" disabled></el-input>
</el-form-item>
<el-form-item label="当前标签">
<el-input v-model="actionConfig.Target.tagName" disabled></el-input>
</el-form-item>
<el-form-item label="文本内容">
<el-input v-model="actionConfig.Attributes.innerText"></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: 'onInput',
components: {},
props: ['actionName', 'actionType', 'dynamicTagObj'],
data () {
return {
elementInfos: {}, // 存储当前选中元素的信息
actionConfig: {
"Target": {
"Type": "xpath",
"Xpath": "",
"Timeout": 5000,
"tagName": ''
},
"Attributes": {
"innerText": ""
},
"Name": this.actionName,
"Alias": this.actionType
},
selectDisabled: true // 控制选择按钮的禁用状态
}
},
created () {
console.log(this.dynamicTagObj);
// if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
// this.actionConfig = this.dynamicTagObj.actionConfigs
},
mounted () { },
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),
TagName: element.tagName
};
this.elementInfos = elementInfo;
console.log(event);
this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.actionConfig.Target.tagName = elementInfo.TagName;
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 lang="scss" scoped></style>
\ No newline at end of file
src/components/elOutput.vue
<template>
<div class="elOutput">
<!-- 操作按钮区域 -->
<div style="height: 35px; margin-left: 15px; text-align: left;">
<div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div>
......@@ -18,9 +18,7 @@
</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>
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
</div>
</template>
......@@ -35,7 +33,7 @@ export default {
actionConfig: {
"Target": {
"Type": "xpath",
"Xpath": "",
"Selector": "",
"Timeout": 5000
},
"Attributes": {
......@@ -80,7 +78,7 @@ export default {
Text: element.innerText
};
this.elementInfos = elementInfo;
this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.actionConfig.Target.Selector = elementInfo.Xpath;
this.actionConfig.Attributes.innerText = elementInfo.Text;
// 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
......
src/components/elclick.vue
......@@ -2,7 +2,7 @@
<!-- 点击菜单组件 -->
<div class="elClick">
<!-- 操作按钮区域 -->
<div style="height: 35px; margin-left: 15px; text-align: left;">
<div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div>
......@@ -19,9 +19,7 @@
</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>
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
</div>
</template>
......@@ -62,8 +60,8 @@ export default {
submit () {
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);
},
......
src/components/index.js
......@@ -2,14 +2,14 @@ import pageNavigate from './pageNavigates.vue';
import elClick from './elClick.vue';
import sysSleep from './sysSleep.vue';
import elOutput from './elOutput.vue';
import loopClick from './loopClick.vue'
import onInput from './onInput.vue';
import pageJavascript from './pageJavascript.vue';
import loopClick from './loopClick.vue';
import collectSingleElements from './collectSingleElements.vue';
import pageClose from './pageClose.vue';
import mouseMove from './mouseMove.vue';
import pageJavascipt from './pageJavascipt.vue'
import collectionTable from './collectionTable.vue';
import submit from './submit.vue';
import actions from './actions.vue';
import onInput from './onInput.vue'
export { pageNavigate, elClick, sysSleep, elOutput, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
export { pageNavigate, elClick, sysSleep, elOutput, onInput, pageJavascript, loopClick, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions };
\ No newline at end of file
src/components/onInput.vue
<template>
<div class="onInput">
<!-- 操作按钮区域 -->
<div style="height: 35px; margin-left: 15px; text-align: left;">
<div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div>
......@@ -20,10 +20,7 @@
<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>
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
</div>
</template>
......@@ -63,6 +60,8 @@ export default {
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType;
this.$emit('dataChanged', this.actionConfig);
},
......@@ -115,4 +114,14 @@ export default {
},
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
<style scoped>
.el-form-item {
margin-bottom: 0 !important;
}
.tooltips button {
width: 60px !important;
height: 30px !important;
}
</style>
\ No newline at end of file
src/components/pageJavascipt.vue deleted 100644 → 0
<template>
<div class="pageJavascipt">页面执行</div>
</template>
<script>
export default {
name:'pageJavascipt',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/pageJavascript.vue 0 → 100644
<template>
<div class="pageJavascipt">页面执行</div>
</template>
<script>
export default {
name: 'pageJavascipt',
components: {},
props: {},
data () {
return {
}
},
created () { },
mounted () { },
watch: {},
computed: {},
methods: {},
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
src/components/pageNavigates.vue
......@@ -13,9 +13,9 @@
<div style="width: 100%; text-align: right; display: flex; justify-content: space-between;">
<!-- 获取当前页面地址的按钮 -->
<el-button size="small" class="button-new-tag" @click="getCurrentPageUrl" style="margin-left: 15px;">获取当前页面地址</el-button>
<!-- 提交信息的按钮 -->
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 15px">提交信息</el-button>
</div>
<!-- 提交信息的按钮 -->
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
</div>
</template>
<script>
......@@ -47,6 +47,8 @@ export default {
submit () {
// 防止父级改变，子级未改变重新赋值
// 将当前组件中的actionConfig对象通过自定义事件传递给父组件
this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType;
this.$emit("dataChanged", this.actionConfig);
},
// 获取当前页面地址的方法
......
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