新增跳转页面动作，完善点击、输入动作，单个动作导出软件可执行

src/components/elInput.vue

+<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/elclick.vue

@@ -36,7 +36,7 @@ export default {
             actionConfig: {
                 "Target": {
                     "Type": "xpath",
-                    "Xpath": "",
+                    "Selector": "",
                     "InnerText": "",
                     "Timeout": 5000
                 },
@@ -62,8 +62,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);
         },
 
@@ -76,7 +76,7 @@ export default {
                 Text: element.innerText
             };
             this.elementInfos = elementInfo;
-            this.actionConfig.Target.Xpath = elementInfo.Xpath;
+            this.actionConfig.Target.Selector = elementInfo.Xpath;
             this.actionConfig.Target.InnerText = elementInfo.Text;
             console.log(element.innerText);
             // 移除事件监听器

src/components/index.js

+import pageNavigate from './pageNavigates.vue';
 import elClick from './elClick.vue';
 import sysSleep from './sysSleep.vue';
 import elOutput from './elOutput.vue';
@@ -10,6 +11,5 @@ import collectionTable from './collectionTable.vue';
 import submit from './submit.vue';
 import actions from './actions.vue';
 import onInput from './onInput.vue'
-// import ComponentC from './ComponentC.vue';
 
-export { elClick, sysSleep, elOutput, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
+export { pageNavigate, elClick, sysSleep, elOutput, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file

src/components/onInput.vue

@@ -14,7 +14,7 @@
         <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-input v-model="actionConfig.InputValue"></el-input>
       </el-form-item>
       <el-form-item label="查询时间">
         <el-input v-model="actionConfig.Target.Timeout"></el-input>
@@ -38,13 +38,12 @@ export default {
       actionConfig: {
         "Target": {
           "Type": "xpath",
-          "Xpath": "",
+          "Selector": "",
           "Timeout": 5000,
           "tagName": ''
         },
-        "Attributes": {
-          "innerText": ""
-        },
+        "InputValue": "",//输入的内容
+        "Script": null,
         "Name": this.actionName,
         "Alias": this.actionType
       },
@@ -64,8 +63,6 @@ export default {
     submit () {
       console.log(this.actionConfig);
       // 防止父级改变，子级未改变重新赋值
-      this.actionConfig.Name = this.actionName;
-      this.actionConfig.Alias = this.actionType;
       this.$emit('dataChanged', this.actionConfig);
     },
 
@@ -79,7 +76,7 @@ export default {
       };
       this.elementInfos = elementInfo;
       console.log(event);
-      this.actionConfig.Target.Xpath = elementInfo.Xpath;
+      this.actionConfig.Target.Selector = elementInfo.Xpath;
       this.actionConfig.Target.tagName = elementInfo.TagName;
       this.selectDisabled = false;
       // 移除事件监听器

src/components/pageNavigates.vue

+<template>
+    <!-- 页面导航组件的根元素 -->
+    <div class="pageNavigates">
+        <!-- 表单元素，用于配置页面导航 -->
+        <el-form style="margin-left: 4px;" label-position="right" label-width="80px" :model="actionConfig">
+            <!-- 表单项，用于输入页面地址 -->
+            <el-form-item label="页面地址">
+                <!-- 输入框，双向绑定到 actionConfig.Url -->
+                <el-input v-model="actionConfig.Url"></el-input>
+            </el-form-item>
+        </el-form>
+        <!-- 按钮区域 -->
+        <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>
+    </div>
+</template>
+<script>
+export default {
+    name: "pageNavigates", // 组件名称
+    components: {},
+    props: ["actionName", "actionType", "dynamicTagObj"], // 父组件传递的属性
+    data () {
+        return {
+            // 页面导航配置对象
+            actionConfig: {
+                Url: "", // 页面地址
+                Name: this.actionName, // 页面名称，从父组件传递而来
+                Alias: this.actionType, // 页面类型，从父组件传递而来
+            },
+        };
+    },
+    created () {
+        // 如果动态标签对象中的actionConfigs属性为空，则直接返回
+        if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return;
+        // 使用动态标签对象中的actionConfigs属性初始化actionConfig
+        this.actionConfig = this.dynamicTagObj.actionConfigs;
+    },
+    mounted () { },
+    watch: {},
+    computed: {},
+    methods: {
+        // 提交表单信息的方法
+        submit () {
+            // 防止父级改变，子级未改变重新赋值
+            // 将当前组件中的actionConfig对象通过自定义事件传递给父组件
+            this.$emit("dataChanged", this.actionConfig);
+        },
+        // 获取当前页面地址的方法
+        getCurrentPageUrl (event) {
+            // 使用window.location.href获取当前页面地址
+            let currentUrl = window.location.href;
+            // 将获取到的地址设置到actionConfig对象的Url属性中
+            this.actionConfig.Url = currentUrl;
+        }
+    },
+};
+</script>
+<style scoped>
+/* 样式表，限定在当前组件的作用域内生效 */
+.el-form-item {
+    margin-bottom: 0;
+}
+
+.tooltips button {
+    width: 100px !important;
+    height: 30px !important;
+}
+</style>