多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

火语言RPA攻克网页表单控件:单选框、复选框、下拉框操作实战

火语言RPA攻克网页表单控件:单选框、复选框、下拉框操作实战 做RPA最常踩的坑往往不是登录、不是翻页而是那些看似人畜无害的网页表单控件。单选框、复选框、下拉框随便哪个在页面里换了皮肤、套了框架、加了懒加载就能让脚本在运行到一半的时候突然“神经质”。我用火语言RPA处理网页表单从最早被这类控件折磨到怀疑人生到现在能一套逻辑覆盖大部分场景中间积累了不少可以照搬的经验。这篇文章不打算讲大而全的RPA概念就聚焦在火语言RPA操作网页表单单选框、复选框、下拉框这一条线上把定位思路、点击逻辑、状态校验、坑点排查全部摊开来讲希望能让正在跟表单控件较劲的朋友少走几步弯路。先说清楚这篇文章适合谁看正在用火语言RPA做网页自动化遇到表单控件点不动、选不准、校验不过的问题或者刚接触RPA想找一份能直接参考的操作案例。文章里不会绕弯子每一步都按实际能落地的标准来写。1. 网页表单三类控件的HTML差异决定你该选哪种操作方式RPA操作网页控件本质上是在模拟人的交互但人的眼睛能直接看到“这个单选框选中了”脚本不行脚本只能看到DOM。所以第一步要搞清楚这三类控件在HTML层面到底长什么样。只有把这一步吃透后面用火语言RPA配置选择器、写状态判断才不至于乱枪打鸟。1.1 单选框name分组与checked状态单选框在HTML里通常长这样input typeradio namegender valuemale idmale 男 input typeradio namegender valuefemale idfemale 女同组单选框的name属性相同value不同当前选中项通过checked属性体现。操作单选框本质就是让目标选项的checked变成true。火语言RPA最直接的做法是点击对应的input或它旁边的label文本。但有一个关键点要注意很多前端框架不会把选中态直接挂在input的checked上而是加一个class比如.active或者改变父元素的样式这种情况下回读状态时直接查checked会失灵。单选框的另一个特点是“互斥”同组只能选一个。脚本如果连续点击两个选项后点的会覆盖先点的这在自动化填写时反而方便因为不需要手动清除之前的选择。但反过来如果你要用脚本判断当前选中的是哪一个就必须遍历同组所有选项看看谁的checked为真。1.2 复选框独立状态与批量操作复选框的结构和单选框很接近只是type变成了checkbox同一组复选框的name通常相同但互不影响可以同时勾选多个input typecheckbox namehobby valueread 阅读 input typecheckbox namehobby valuemusic 音乐 input typecheckbox namehobby valuesport 运动复选框的操作逻辑比单选框复杂在“状态切换”点击一次从未选变选中再点一次取消。所以脚本在勾选前必须判断当前状态否则重复点击会把本来选中的项又取消掉。尤其做表单批量填写时同一套填写逻辑要跑多个账号二次运行时状态残留会导致结果不一致。复选框还经常遇到“全选”和“反选”的需求。全选按钮通常是一个单独的复选框控件通过checked状态控制所有子项操作时要注意是全选按钮驱动子项还是子项驱动全选按钮两者的事件方向不同火语言RPA配置时要分开处理。1.3 下拉框原生select与自定义组件的界线下拉框是三类控件里最分裂的。原生select长这样select namecity option valuebeijing北京/option option valueshanghai上海/option /select对原生selectRPA可以直接设置选中项不需要模拟点击展开。但问题在于现在大部分网站的下拉框都是自定义组件用div、ul、li仿造出来的你根本找不到select标签。自定义下拉框的操作步骤通常是点击触发区域展开列表等待列表项渲染再点击目标项。每一步都可能出现延迟这就要结合火语言RPA的等待机制来处理。下拉框还有一个常见类型是“可搜索下拉框”输入关键字后动态过滤选项。这类控件对RPA来说最麻烦因为选项是异步加载的点击后不能马上定位得等网络请求回来、列表刷新后才能操作。明白了HTML差异再回头配置火语言RPA会清晰很多。接下来聊定位这是整个表单操作的地基。2. 火语言RPA定位这些控件的完整套路火语言RPA定位网页元素核心思路和其他主流RPA工具类似都是通过选择器找到DOM节点再执行点击、设置值、读取属性等操作。但表单控件有几个特殊场景需要单独处理。2.1 选择器配置属性、层级、索引的组合对单选框、复选框这种input元素最稳的选择器是用id或namevalue的组合。比如input[namegender][valuemale]如果目标元素没有稳定的idclass又不停变化现在很多前端工程化项目用哈希类名比如_abc123_就不要硬抠class改用层级定位找到表单外层容器再定位内部的第几个input。火语言RPA支持在界面上直接拾取元素但拾取到的选择器往往包含了很长一串绝对路径稍微改版就断。我的习惯是拾取后手动精简选择器保留最稳定的属性。比如拾取出来是html body div#app div.form-wrap div:nth-child(2) input.form-control我会先看看有没有name、id、>期望状态 勾选 当前状态 读取复选框checked属性 如果 当前状态 期望状态: 跳过点击 否则: 点击复选框 再次读取状态确认这个逻辑看起来简单但能避免大量由状态错乱引发的bug。尤其是循环处理多行数据时每一行都执行一次“先读再点”整体稳定性会明显提升。5. 下拉框实操原生select、自定义下拉与异步加载项下拉框是表单控件里最“变态”的一个因为它的实现方式太多样。我把它拆成三种类型来讲每一种的应对思路都不一样。5.1 原生select直接用设置值动作别模拟点击如果页面元素是原生select标签最直接的方式不是点击展开再选而是用火语言RPA的“设置元素值”之类的动作直接把value设置成目标选项的value。操作流程拾取select元素确认是原生标签。获取所有option子元素的value和文本。根据业务需要构建“文本→value”的映射。使用设置值动作写入目标value然后触发change事件。注意设置值后可能要触发change事件否则页面上显示的文本不会更新或者后续联动逻辑不触发。火语言RPA在设置值动作里如果有“触发事件”选项记得勾上。5.2 自定义下拉框点击展开、等待、再选自定义下拉框结构一般是div classselect-box idcitySelect div classselect-display请选择/div ul classselect-options styledisplay: none; li>
返回列表