UI自动化定位“字典”

一、核心心法先看这个在写脚本前记住这三个优先级看文本用户能看到什么我们就用什么label,span,button里的字。看属性如果没文本看id,name,placeholder,role。看层级如果以上都没有看它坐在哪个“稳定的椅子”上父级节点。二、基础标签字典网页积木的含义HTML标签中文名在UI自动化中的意义常见坑点div盒子/容器最不推荐用来定位。它就像快递盒什么都能装长得都一样。class经常变。千万别用纯div定位除非它有独特的id或class。span行内文本常用。通常用来显示单纯的文字比如表格里的数据、“用户名”后面的冒号。它本身不可点击点击时要找它的上级爸爸或爷爷。label标签强烈推荐。表单项的“名字”。比如“采购单位”、“计划名称”。它是输入框的“身份证”。点击label通常会自动聚焦到对应的输入框。input输入框必用。文本输入、单选、复选、文件上传都在这里。文件上传必须是input typefile。button按钮必用。凡是能点的“提交”、“保存”、“查询”都是它。有时候按钮文字藏在span或i里脚本要找button这个外壳。i图标辅助定位。放大镜、下拉箭头、日历图标。本身无文本不能直接用text()定位。a链接常用。页面跳转、下载链接。有些按钮为了样式好看也会伪装成a。img图片少用。验证码、Logo。可以通过src属性定位。li列表项必用。下拉框选项、菜单项、单选框选项。通常配合roleoption或rolemenuitem。td/th单元格表格专用。数据存放地。定位时通常需要先找行(tr)再找列。iframe画中画噩梦开始。页面嵌页面。必须先switch_to.frame()否则永远找不到元素。​三、Element UI 常见组件结构拆解你的主战场1. 输入框 (Input)结构特征labelinputlabel计划名称/label div input placeholder请输入计划名称 /div✅ 定位策略首选placeholder因为唯一且稳定。次选label文本 找兄弟节点的input。你的脚本self.ele_input(lable请输入计划名称, ...)2. 下拉框 (Select)结构特征input(伪装) ul(列表)!-- 点击前 -- input readonly placeholder请选择项目类型 !-- 点击后弹出的列表 -- ul li货物/li li服务/li /ul✅ 定位策略点击input或旁边的箭头触发下拉。在弹出的ul里找li的文本。你的脚本self.ele_click(货物, tag_typeli)3. 单选/复选框 (Radio/Checkbox)结构特征隐藏原生input 美化spanlabel roleradio input typeradio styledisplay:none; !-- 藏起来了 -- span classel-radio__inner/span !-- 那个圆圈 -- span classel-radio__label集采计划/span!-- 文字 -- /label✅ 定位策略不要点input它被隐藏了。不要点span可能没绑定事件。必须点最外层的label或带有roleradio的元素。你的脚本self.ele_click(集采计划, tag_typelabel)4. 表格 (Table)结构特征thead(表头) tbody(数据)table thead trth企业名称/thth操作/th/tr /thead tbody tr td采购企业二/td tdbutton选择/button/td !-- 操作列 -- /tr /tbody /table✅ 定位策略场景点击“采购企业二”那一行的“选择”按钮。逻辑先找到包含“采购企业二”的td然后找它同级(following-sibling)的td里的button。你的脚本self.ele_click(采购企业二, tag_typebutton, depth5)5. 文件上传 (Upload)结构特征div(外观) input[typefile](灵魂)div classel-upload-dragger i classiconfont/i span点击上传/span /div !-- 灵魂在这里通常隐藏 -- input typefile styledisplay:none;✅ 定位策略不要点div或span。必须找到input[typefile]然后用send_keys传文件路径。你的脚本self.file_upload(附件, value路径)6. 弹窗 (Dialog)结构特征divaria-modaltruediv roledialog aria-modaltrue aria-label选择采购单位 div classel-dialog__header.../div div classel-dialog__body.../div /div✅ 定位策略弹窗出来后所有操作都在这个div里面。如果页面有多个弹窗用aria-label或标题文本来区分。四、如何在 DevTools 中“侦查”实战技巧选中元素按F12-Elements- 点击左上角箭头图标 - 点页面上的按钮。验证文本在 Console 中输入$x(//button[contains(text(),查询)])回车。如果返回数组长度大于0说明定位到了。查看层级看右侧的 Styles/Computed 面板理解元素的嵌套关系。检查隐藏看display:none或visibility:hidden。如果是input且被隐藏了那就是文件上传控件。五、给你的“定位决策树”当你不知道怎么定位时按这个顺序问自己我要操作的是什么填字 - 找input(看placeholder)点按钮 - 找button(看内部文本)选一项 - 找li(看role)传文件 - 找input[typefile]它有没有独特的文字有 - 直接用lable文字没有 - 找离它最近的label或div的文字作为锚点。它在不在表格里是 - 用文字定位行再用depth或xpath找操作按钮。它在不在 iframe 里顶部有iframe标签 - 必须先切换上下文。六、总结从“看标签”到“写脚本”看到的结构脑海里想的脚本原因label采购单位/labellable采购单位这是锚点input placeholder请输入主体代码lable请输入主体代码这是唯一IDbuttonspan查询/span/buttonlable查询, tag_typebutton点外壳li中粮集团/lilable中粮集团, tag_typeli选列表项input typefilefile_upload(...)特殊控件