元素选择页面 ​

页面概述 ​

元素选择页面是MakAgent工具的核心功能之一，提供多种元素定位方式和详细元素信息展示，帮助用户精准选择和操作网页元素，实现自动化流程的精确控制。

核心功能 ​

启动或关闭元素选择 ​

通过右上角眼睛图标控制元素选择功能的启用状态：

• 启用状态：眼睛图标显示，可进行元素选择和操作
• 关闭状态：眼睛图标隐藏，无法进行元素选择

选择器类型配置 ​

提供多种元素定位方式，满足不同场景需求：

选择器模式切换 ​

• CSS选择器：使用标准的CSS选择器语法定位元素
• XPath：支持XPath语法进行元素定位
• 元素路径：直观显示元素的路径表达式，支持上下切换显示不同层级的元素

单选或多选模式 ​

通过右上角菜单图标控制元素选择模式：

• 单选模式：每次只能选择一个元素
• 多选模式：支持同时选择多个元素进行批量操作

选择器设置优化 ​

点击右上角设置按钮进入配置页面，灵活定制元素选择器的生成规则：

选择器生成选项 ​

• 包含元素ID：在选择器中包含元素的ID属性
• 包含标签名：包含HTML标签名称
• 包含类名：包含CSS类名信息
• 包含属性：包含指定的元素属性

属性配置管理 ​

• 属性名称：自定义要包含的属性名（如data-testid）
• 多属性支持：使用逗号分隔多个属性名称

元素信息展示 ​

通过三种视图模式展示元素的详细信息：

属性视图 ​

显示元素的完整属性信息：

• 角色属性：元素的ARIA角色（如button）
• 状态属性：如aria-disabled等状态信息
• 类名信息：完整的CSS类名列表
• 交互属性：tabindex等交互相关属性
• 样式信息：元素的内联样式定义

坐标视图 ​

提供元素的精确位置和尺寸信息：

• 中心点坐标：元素中心在页面中的X、Y坐标
• 左上角坐标：元素左上角在页面中的坐标位置
• 元素尺寸：元素的宽度和高度像素值

模块视图 ​

提供可应用于当前元素的操作模块选择：

操作模块分类 ​

• 选择操作模块：选择需要执行的具体动作
  • 处理表单：自动化表单填写和提交
  • 获取文本：提取元素中的文本内容
  • 点击元素：模拟鼠标点击操作
  • 触发器事件：触发特定DOM事件
  • 滚动元素：控制页面滚动行为
• 执行模块：标记为已选中的待执行模块

操作指南 ​

元素选择方式 ​

1. 点击选择：直接点击目标元素进行选择
2. 快捷键选择：按Space空格键快速选择当前高亮元素
3. 路径切换：在元素路径显示区域上下切换选择不同层级的元素

视图切换操作 ​

在属性、坐标、模块三种视图间自由切换，获取不同类型的元素信息

选择器优化策略 ​

根据实际自动化需求配置选择器设置，生成更稳定、更精确的元素定位器

应用场景 ​

• 网页自动化：精确选择需要操作的表单元素、按钮等交互组件
• 数据采集：定位需要提取数据的具体页面元素和内容区域
• 测试脚本：为自动化测试生成可靠的元素定位器
• 流程录制：在录制工作流时准确捕捉用户操作目标元素
• 批量操作：多选模式下对多个相似元素执行相同操作