UI自动化定位“字典”-平芜编程栈

一、核心心法（先看这个）

在写脚本前，记住这三个优先级：

看文本：用户能看到什么，我们就用什么（label,span,button里的字）。
看属性：如果没文本，看id,name,placeholder,role。
看层级：如果以上都没有，看它坐在哪个“稳定的椅子”上（父级节点）。

二、基础标签字典（网页积木的含义）

HTML标签	中文名	在UI自动化中的意义	常见坑点
`<div>`	盒子/容器	最不推荐用来定位。它就像快递盒，什么都能装，长得都一样。`class`经常变。	千万别用纯`div`定位，除非它有独特的`id`或`class`。
`<span>`	行内文本	常用。通常用来显示单纯的文字，比如表格里的数据、“用户名”后面的冒号。	它本身不可点击，点击时要找它的上级（爸爸或爷爷）。
`<label>`	标签	强烈推荐。表单项的“名字”。比如“采购单位”、“计划名称”。它是输入框的“身份证”。	点击`label`通常会自动聚焦到对应的输入框。
`<input>`	输入框	必用。文本输入、单选、复选、文件上传都在这里。	文件上传必须是`<input type="file">`。
`<button>`	按钮	必用。凡是能点的“提交”、“保存”、“查询”都是它。	有时候按钮文字藏在`<span>`或`<i>`里，脚本要找`button`这个外壳。
`<i>`	图标	辅助定位。放大镜、下拉箭头、日历图标。	本身无文本，不能直接用`text()`定位。
`<a>`	链接	常用。页面跳转、下载链接。	有些按钮为了样式好看，也会伪装成`<a>`。
`<img>`	图片	少用。验证码、Logo。	可以通过`src`属性定位。
`<li>`	列表项	必用。下拉框选项、菜单项、单选框选项。	通常配合`role='option'`或`role='menuitem'`。
`<td>`/`<th>`	单元格	表格专用。数据存放地。	定位时通常需要先找行(`<tr>`)，再找列。
`<iframe>`	画中画	噩梦开始。页面嵌页面。	必须先`switch_to.frame()`，否则永远找不到元素。

三、Element UI 常见组件结构拆解（你的主战场）

1. 输入框 (Input)

结构特征：label+input

<label>计划名称</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_type='li')

3. 单选/复选框 (Radio/Checkbox)

结构特征：隐藏原生input+ 美化span

<label role="radio"> <input type="radio" style="display:none;"> <!-- 藏起来了 --> <span class="el-radio__inner"></span> <!-- 那个圆圈 --> <span class="el-radio__label">集采计划</span><!-- 文字 --> </label>

✅ 定位策略：

不要点input（它被隐藏了）。
不要点span（可能没绑定事件）。
必须点最外层的label或带有role='radio'的元素。
你的脚本：self.ele_click('集采计划', tag_type='label')

4. 表格 (Table)

结构特征：thead(表头) +tbody(数据)

<table> <thead> <tr><th>企业名称</th><th>操作</th></tr> </thead> <tbody> <tr> <td>采购企业二</td> <td><button>选择</button></td> <!-- 操作列 --> </tr> </tbody> </table>

✅ 定位策略：

场景：点击“采购企业二”那一行的“选择”按钮。
逻辑：先找到包含“采购企业二”的<td>，然后找它同级(following-sibling)的<td>里的<button>。
你的脚本：self.ele_click('采购企业二', tag_type='button', depth=5)

5. 文件上传 (Upload)

结构特征：div(外观) +input[type=file](灵魂)

<div class="el-upload-dragger"> <i class="iconfont"></i> <span>点击上传</span> </div> <!-- 灵魂在这里（通常隐藏） --> <input type="file" style="display:none;">

✅ 定位策略：

不要点div或span。
必须找到input[type='file']，然后用send_keys传文件路径。
你的脚本：self.file_upload('附件', value='路径')

6. 弹窗 (Dialog)

结构特征：div+aria-modal="true"

<div role="dialog" aria-modal="true" aria-label="选择采购单位"> <div class="el-dialog__header">...</div> <div class="el-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[type='file']
它有没有独特的文字？
- 有 -> 直接用lable='文字'
- 没有 -> 找离它最近的label或div的文字作为锚点。
它在不在表格里？
- 是 -> 用文字定位行，再用depth或xpath找操作按钮。
它在不在 iframe 里？
- 顶部有<iframe>标签 -> 必须先切换上下文。

六、总结：从“看标签”到“写脚本”

看到的结构	脑海里想的脚本	原因
`<label>采购单位</label>`	`lable='采购单位'`	这是锚点
`<input placeholder="请输入主体代码">`	`lable='请输入主体代码'`	这是唯一ID
`<button><span>查询</span></button>`	`lable='查询', tag_type='button'`	点外壳
`<li>中粮集团</li>`	`lable='中粮集团', tag_type='li'`	选列表项
`<input type="file">`	`file_upload(...)`	特殊控件