# 灵梭RPA 教程文档 - 元素操作 ## 目录 - [概述](#概述) - [1. 拖拽元素](#1-拖拽元素) - [拖拽到指定坐标](#拖拽到指定坐标) - [拖拽到目标元素](#拖拽到目标元素) - [2. 设置下拉框](#2-设置下拉框) - [按选项内容选择](#按选项内容选择) - [按位置选择](#按位置选择) - [3. 上传文件](#3-上传文件) - [使用技巧](#使用技巧) - [常见问题](#常见问题) --- ## 概述 **元素操作**就像网页上的高级操作，包括拖拽元素、选择下拉框、上传文件等。这些操作比简单的点击、输入要复杂一点，但能帮你处理更多场景。 ### 主要功能 - ✅ **拖拽元素**：把网页上的元素拖到指定位置（可以拖到坐标位置，也可以拖到另一个元素上） - ✅ **设置下拉框**：选择下拉框里的选项（可以按文字选，也可以按位置选） - ✅ **上传文件**：向网页上传文件（就像在网页上点"选择文件"按钮一样） --- ## 1. 拖拽元素 **拖拽元素**就像用鼠标拖东西一样，把网页上的元素拖到指定位置。比如拖文件到上传区域、拖卡片到看板等。 ### 功能说明 - **拖到坐标位置**：拖到页面上指定的坐标位置（比如拖到(500, 300)这个位置） - **拖到目标元素**：拖到另一个元素上（比如把文件拖到上传框） - **定位元素**：可以用CSS选择器或XPath找到要拖的元素 - **自动等待**：会自动等源元素和目标元素出现，再开始拖拽 ### 需要填什么？ | 参数 | 说明 | 必填 | 默认值 | | ----------------- | ------------------------------------------------- | ------ | -------------- | | tab对象 | 要在哪个网页拖拽？填标签页变量名，比如`{{网页1}}` | ✅ | - | | css/xpath选择器 | 要拖拽什么元素？填选择器，比如`#文件1` | ✅ | - | | 拖拽目标 | 拖到哪里？选"拖拽到指定坐标"或"拖拽到目标元素" | ✅ | 拖拽到指定坐标 | | x坐标 | 如果选"拖拽到指定坐标"，要填X坐标（横坐标） | 看情况 | - | | y坐标 | 如果选"拖拽到指定坐标"，要填Y坐标（纵坐标） | 看情况 | - | | 目标元素css/xpath | 如果选"拖拽到目标元素"，要填目标元素的选择器 | 看情况 | - | ### 拖拽目标选项 - **拖拽到指定坐标**：拖到页面上指定的坐标位置（比如拖到(500, 300)） - **拖拽到目标元素**：拖到另一个元素上（比如把文件拖到上传框，填上传框的选择器） ### 什么时候用？ - **文件拖拽上传**：把文件拖到上传区域（比如拖图片到上传框） - **看板管理**：拖任务卡片到不同的列（比如把"待办"拖到"进行中"） - **可视化编辑器**：拖组件到画布上（比如拖按钮到页面编辑器） - **排序列表**：拖列表项调整顺序（比如拖商品调整显示顺序） - **游戏操作**：拖道具到指定位置（比如拖装备到角色身上） --- ### 拖拽到指定坐标将元素拖拽到页面上的指定坐标位置。 #### 坐标怎么理解？坐标系统就像数学里的坐标系： - **原点**：页面左上角是 (0, 0) - **X轴**：从左到右，数字越来越大（横坐标） - **Y轴**：从上到下，数字越来越大（纵坐标） - **单位**：像素（px），比如(500, 300)就是距离左边500像素，距离上边300像素的位置 **简单理解**：就像地图上的坐标，告诉你东西要放在页面的哪个位置。 #### 示例 **示例1**：拖拽文件到上传区域 ``` 场景：将文件图标拖拽到页面中心的上传区域配置： tab对象：{{main_tab}} css/xpath选择器：#file-item-1 拖拽目标：拖拽到指定坐标 x坐标：500 y坐标：300 ``` **说明**： - 找到id是`file-item-1`的元素（要拖的元素） - 把它拖到坐标(500, 300)的位置 - 坐标可能需要根据实际页面调整（可以用浏览器开发者工具查看坐标） **示例2**：使用变量控制坐标 ``` 前置步骤：设置变量 - 变量名：target_x - 变量值：600 - 变量名：target_y - 变量值：400 拖拽元素： tab对象：{{page_tab}} css/xpath选择器：.draggable-item 拖拽目标：拖拽到指定坐标 x坐标：{{target_x}} y坐标：{{target_y}} ``` **说明**： - 坐标值可以使用变量 - 适合需要动态计算坐标的场景 #### 获取坐标的方法 1. **使用浏览器开发者工具**： ```javascript // 在浏览器控制台执行，鼠标移动到目标位置时按回车 document.addEventListener('click', function(e) { console.log('X:', e.pageX, 'Y:', e.pageY); }); ``` 2. **使用截图工具**： - 使用截图工具查看像素坐标 - Windows：使用画图工具查看坐标 - Mac：使用预览工具查看坐标 3. **使用网页检查元素**： - 右键目标区域 → 检查元素 - 查看元素的位置属性 --- ### 拖拽到目标元素把元素拖到另一个元素上，这种方式比拖到坐标更灵活、更稳定。 #### 为什么更好？ - **不用算坐标**：不用知道精确的坐标位置，只要知道目标元素就行 - **布局变了也有效**：如果页面布局变了，只要目标元素还在，就能用 - **更容易理解**：代码更容易看懂，比如"把文件拖到上传框"比"拖到(500, 300)"更清楚 #### 示例 **示例1**：拖拽任务卡片到另一列 ``` 场景：看板管理，将任务从"待办"列拖拽到"进行中"列配置： tab对象：{{kanban_tab}} css/xpath选择器：#task-001 拖拽目标：拖拽到目标元素目标元素css/xpath：#column-in-progress ``` **说明**： - 源元素：id是`task-001`的任务卡片（要拖的东西） - 目标元素：id是`column-in-progress`的列容器（拖到哪里） - 系统会自动把任务卡片拖到"进行中"列 **示例2**：文件拖拽上传 ``` 场景：将文件拖拽到上传区域步骤1：打开网页 - 网址：https://example.com/upload - 标签页名称：upload_tab 步骤2：拖拽元素 - tab对象：{{upload_tab}} - css/xpath选择器：.file-item - 拖拽目标：拖拽到目标元素 - 目标元素css/xpath：.upload-dropzone ``` **示例3**：排序列表项 ``` 场景：将列表第3项拖拽到第1项位置配置： tab对象：{{list_tab}} css/xpath选择器：//ul[@class='sortable']/li[3] 拖拽目标：拖拽到目标元素目标元素css/xpath：//ul[@class='sortable']/li[1] ``` **说明**： - 用XPath找到列表项 - `li[3]` 是第3个列表项（要拖的） - `li[1]` 是第1个列表项（拖到这里） --- ### 高级设置 #### 等待元素出现时间 - **默认值**：20秒 - **说明**：拖拽前会等源元素和目标元素都出现，如果20秒内还没出现，就会报错 - **建议**： - 如果页面加载很慢，可以把等待时间调长一点（比如30秒、60秒） - 如果元素是动态加载的（比如滚动后才出现），需要更长的等待时间 #### 错误处理（出错了怎么办？） - **终止流程**（默认）：拖拽失败了就停止，不继续了 - **忽略异常继续执行**：拖拽失败了也不管，跳过这一步，继续执行后面的 - **重试该指令**：拖拽失败了就再试一次，可以设置试几次（比如试3次） --- ### 需要注意什么？ 1. **元素要支持拖拽**： - 元素必须支持拖拽操作（HTML5的draggable属性） - 有些网站可能把拖拽功能禁用了，那就拖不了 2. **坐标可能不准**： - 如果页面滚动了，坐标可能会偏移 - 建议先滚动到目标位置，再拖拽 3. **兼容性问题**： - 有些网站用自己写的拖拽代码，可能不兼容 - 如果拖不了，可以试试用"执行JS脚本"来模拟拖拽 4. **拖拽需要时间**： - 拖拽操作需要一点时间完成 - 拖拽后建议加一个"自定义等待时长"节点，等一会儿 --- ## 2. 设置下拉框 **设置下拉框**就像在网页的下拉选择框里选选项一样，比如选省份、选日期等。 ### 功能说明 - **按文字选**：根据选项显示的文字选择（比如选"中国"） - **按位置选**：根据选项的位置选择（比如选第1个、第2个） - **定位下拉框**：可以用CSS选择器或XPath找到下拉框 - **自动等待**：会自动等下拉框出现，再选择 ### 需要填什么？ | 参数 | 说明 | 必填 | 默认值 | | --------------------- | ------------------------------------------------------------ | ---- | -------------- | | tab对象 | 要在哪个网页选择？填标签页变量名，比如`{{网页1}}` | ✅ | - | | 下拉框css/xpath表达式 | 要选择哪个下拉框？填选择器，比如`#省份` | ✅ | - | | 选择方式 | 怎么选？选"按选项内容选择"或"按位置选择" | ✅ | 按选项内容选择 | | 选择值 | 选什么？如果按内容选，填文字；如果按位置选，填数字（从0开始） | ✅ | - | ### 选择方式选项 - **按选项内容选择**：根据选项显示的文字选择（推荐，比如选"中国"） - **按位置选择**：根据选项的位置选择（从0开始，比如0是第1个，1是第2个） ### 使用场景 - 表单填写（选择省市区、职业、学历等） - 筛选条件设置（选择排序方式、时间范围等） - 配置选项设置 - 搜索条件选择 --- ### 按选项内容选择根据下拉框选项显示的文字来选择，这是最常用、最直观的方式。 #### 为什么推荐这种方式？ - **容易理解**：一看就知道选的是什么（比如"中国"比"0"清楚） - **顺序变了也不怕**：如果下拉框的选项顺序变了，只要文字还在，就能选 - **和真人操作一样**：真人也是看文字选的，不是数位置 #### 示例 **示例1**：选择国家 ```html ``` ``` 配置： tab对象：{{form_tab}} 下拉框css/xpath表达式：#country 选择方式：按选项内容选择选择值：中国 ``` **说明**： - 根据选项显示的文字"中国"来选择 - 不用管选项的value值是什么（比如value是"cn"还是"china"都不重要） **示例2**：填写注册表单 ``` 场景：完整的表单填写流程步骤1：输入框输入（姓名） - tab对象：{{form_tab}} - css/xpath选择器：#name - 输入内容：张三步骤2：设置下拉框（性别） - tab对象：{{form_tab}} - 下拉框css/xpath表达式：#gender - 选择方式：按选项内容选择 - 选择值：男步骤3：设置下拉框（学历） - tab对象：{{form_tab}} - 下拉框css/xpath表达式：#education - 选择方式：按选项内容选择 - 选择值：本科步骤4：点击元素（提交按钮） - tab对象：{{form_tab}} - css/xpath选择器：#submit-button ``` **示例3**：使用变量动态选择 ``` 前置步骤：设置变量 - 变量名：selected_city - 变量值：北京设置下拉框： - tab对象：{{form_tab}} - 下拉框css/xpath表达式：#city - 选择方式：按选项内容选择 - 选择值：{{selected_city}} ``` **说明**： - 选择值可以使用变量 - 适合批量处理或配置化的场景 --- ### 按位置选择根据下拉框选项的位置来选择，位置从0开始数（第1个是0，第2个是1，以此类推）。 #### 什么时候用？ - **选项文字是动态的**：选项的文字每次都不一样，不能用文字选 - **选项没有固定文字**：选项没有固定的文字（比如都是数字） - **要选第几个**：明确知道要选第几个选项 - **文字有特殊字符**：选项文字包含特殊字符，不好匹配 #### 索引怎么数？ - **从0开始**：第1个选项的索引是0，第2个选项的索引是1，第3个是2... - **注意默认选项**：如果有"请选择"这样的默认选项，实际选项从索引1开始（"请选择"是0） #### 示例 **示例1**：选择第二个选项 ```html ``` ``` 配置： tab对象：{{task_tab}} 下拉框css/xpath表达式：#priority 选择方式：按位置选择选择值：1 ``` **说明**： - 索引0：请选择（默认选项，不选这个） - 索引1：紧急 ← 选这个（填1） - 索引2：正常 - 索引3：较低 **示例2**：循环选择不同选项 ``` 场景：测试所有选项循环：for次数循环 - 起始数：0 - 结束数：3 - 递增值：1 - 保存当前循环项至：index 设置下拉框： - tab对象：{{test_tab}} - 下拉框css/xpath表达式：#test-select - 选择方式：按位置选择 - 选择值：{{index}} 自定义等待时长：1秒 ``` **说明**： - 用循环把每个选项都选一遍（测试所有选项） - 每次选不同位置的选项（0、1、2、3） --- ### 怎么找到下拉框的选择器？ 1. **用浏览器开发者工具**（最简单）： - 在网页上右键下拉框 → 检查元素 - 在开发者工具里找到下拉框元素，复制它的ID或class 2. **常见选择器写法**： - 按ID：`#country-select`（下拉框的id是country-select） - 按name属性：`select[name="country"]`（下拉框的name是country） - 按class：`.form-select`（下拉框的class是form-select） - XPath：`//select[@id='country']`（用XPath找id是country的select） --- ### 高级设置 #### 等待元素出现时间 - **默认值**：20秒 - **说明**：选择前会等下拉框出现，如果20秒内还没出现，就会报错 - **什么时候调**：如果表单是动态加载的，可以把等待时间调长一点 #### 错误处理（出错了怎么办？） - **终止流程**：选择失败了就停止，不继续了（关键的表单字段建议用这个） - **忽略异常继续执行**：选择失败了也不管，跳过这一步，继续执行后面的（可选字段可以用这个） - **重试该指令**：选择失败了就再试一次，可以设置试几次 --- ### 需要注意什么？ 1. **下拉框类型**： - 只支持原生的HTML ``这种文件输入框 - 有些网站用自定义的上传组件（可能不兼容） --- ## 使用技巧 ### 1. 组合使用多个元素操作复杂的表单填写通常需要组合使用多种操作： ``` 完整的表单填写流程： 1. 打开网页 → 访问表单页面 2. 输入框输入 → 填写姓名 3. 输入框输入 → 填写邮箱 4. 设置下拉框 → 选择国家 5. 设置下拉框 → 选择城市 6. 上传文件 → 上传身份证照片 7. 点击元素 → 提交表单 ``` ### 2. 级联下拉框处理处理省市区这样的级联下拉框： ``` 步骤1：设置下拉框（省份） - 选择值：北京市步骤2：自定义等待时长 - 等待时长：1秒（等待城市列表加载）步骤3：设置下拉框（城市） - 选择值：朝阳区 ``` ### 3. 使用变量批量处理使用变量和循环实现批量操作： ``` 场景：批量填写多个表单外层循环：循环列表 - 列表：{{form_data_list}} - 保存当前循环项至：form_data 设置下拉框： - 选择值：{{form_data.country}} 输入框输入： - 输入内容：{{form_data.name}} 点击元素（提交）等待页面加载完成 ``` ### 4. 错误处理策略根据场景选择合适的错误处理： ``` 关键字段（必填）：错误处理：终止流程可选字段：错误处理：忽略异常继续执行不稳定的操作：错误处理：重试该指令重试次数：3 ``` --- ## 常见问题 ### Q1: 拖拽元素后，没有效果？ **A:** 可能的原因： 1. **元素不支持拖拽**：检查一下元素是不是真的可以拖（有些元素被禁用了） 2. **坐标不准**：如果拖到坐标，可能坐标不对，试试用"拖拽到目标元素"（更简单） 3. **页面滚动了**：如果页面滚动了，坐标会偏移，先滚动到目标位置再拖 4. **网站需要特殊事件**：有些网站的拖拽需要触发特定事件，试试用"执行JS脚本"模拟拖拽 ### Q2: 设置下拉框时，提示"选项不存在"？ **A:** 检查一下这几点： 1. **文字要完全一样**：确保选项文字完全一样（包括空格、大小写），"中国"和"中国 "不一样 2. **改用位置选择**：如果文字匹配不上，试试用"按位置选择"（填数字，比如0、1、2） 3. **等选项加载**：如果选项是动态加载的，先加一个"自定义等待时长"节点，等1-2秒 4. **选择器对不对**：确认一下选择器是不是找到了正确的下拉框 ### Q3: 上传文件时，没有反应？ **A:** 可以试试这些方法： 1. **检查文件路径**：确认路径是对的，文件确实存在（检查一下文件名有没有拼错） 2. **检查选择器**：确认选择器找到的是文件输入框（通常是``） 3. **自定义上传组件**：有些网站用自定义的上传组件，可能需要先点击上传按钮，再用"执行JS脚本" 4. **权限问题**：确认一下程序有没有读取文件的权限（文件被其他程序占用可能读不了） ### Q4: 怎么处理自定义样式的下拉框？ **A:** 自定义下拉框通常不是原生的`

元素操作教程