小伙伴们，大家好～
今天给大家梳理一下自动化测试里面的selenium的八种元素定位方式
概念
元素定位：就是要让我们自动化代码找到前端网页中的元素（比如：按钮、输入框等）
注意：selenium定位前端元素有多个时，会默认返回第一个符合条件的元素
假设我们的前端代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selenium元素定位示例</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f7f9;
color: #333;
}
.container {
background-color: white;
border-radius: 8px;
padding: 25px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.submit-btn {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
width: 100%;
margin-top: 10px;
}
.submit-btn:hover {
background-color: #2980b9;
}
.links {
margin-top: 20px;
text-align: center;
}
.footer {
margin-top: 30px;
text-align: center;
font-size: 14px;
color: #7f8c8d;
}
</style>
</head>
<body>
<div class="container">
<h1>登录页面</h1>
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" class="submit-btn" placeholder="输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" class="submit-btn" placeholder="输入密码">
</div>
<button type="submit" class="submit-btn">登录</button>
</form>
<div class="links">
<a href="#">忘记密码?</a> |
<a href="#" id="registerLink">点击这里注册</a> |
<a href="#">联系我们</a>
</div>
<div class="footer">
<p>© 2023 示例公司. 所有权利保留.</p>
</div>
</div>
</body>
</html>
元素定位
1、通过 ID 定位
通过元素的 id 属性定位。id属性几乎是唯一，定位会非常准确
语法：find_element(By.ID, "id_value")
实现代码：
from selenium.webdriver.common.by import By
element = driver.find_element(By.ID, "username")
2、通过 Name 定位
通过元素的 name 属性定位。前提是元素有name属性
语法：find_element(By.NAME, "name_value")
实现代码：
element = driver.find_element(By.NAME, "password")
3、通过 Class 定位
通过元素的 class 属性定位。但一般class属性不会唯一
语法：find_element(By.CLASS_NAME, "class_name")
代码实现：
element = driver.find_element(By.CLASS_NAME, "submit-btn")
4、通过 Tag Name 定位
通过元素的标签名定位（如
语法：find_element(By.TAG_NAME, "tag_name")
代码实现：
element = driver.find_element(By.TAG_NAME, "input")
5、通过 CSS 选择器定位
通过 CSS 选择器定位元素。功能强大，写法灵活，强烈推荐！（可直接浏览器右键复制，简单易上手）
语法：find_element(By.CSS_SELECTOR, "css_selector")
代码实现：
element = driver.find_element(By.CSS_SELECTOR, "input#username")
6、通过 XPath 定位
通过 XPath 表达式定位元素。比CSS稍微复杂，但几乎没有它搞不定的定位，强烈推荐！（可直接浏览器右键复制，简单易上手，但可能因为定位过长导致失败）
语法：find_element(By.XPATH, "xpath_expression")
代码实现：
element = driver.find_element(By.XPATH, "//input[@id='username']")
7、通过 Link Text 定位
通过链接的文本内容定位（适用于 标签）
语法：find_element(By.LINK_TEXT, "link_text")
代码实现：
element = driver.find_element(By.LINK_TEXT, "Click Here")
8、通过 Partial Link Text 定位
通过链接的部分文本内容定位（适用于 标签）。算是Link Text定位的简化版
语法：find_element(By.PARTIAL_LINK_TEXT, "partial_link_text")
代码实现：
element = driver.find_element(By.PARTIAL_LINK_TEXT, "Click")
特殊：多个元素定位
有时无论如何修改定位，元素始终有多个，Selenium 提供了 find_elements 方法，返回一个元素列表，而不是直接返回元素（可以解决老大难的问题，尤其在vue等前端框架下非常好用）
语法： find_elements_by_class_name("class_value")
代码实现：
elements = driver.find_elements_by_class_name("csu")
元素定位黄金法则
尽量使用
id、name等唯一属性定位元素如果元素属性是动态生成的（如随机 ID），不要使用这些属性定位
使用代码等待确保元素加载完成后再进行操作
在我们实际的项目中使用最多的是CSS和XPath定位，由于现在vue等前端框架的使用，ID，name等属性都是由框架进行动态生成，所以使用CSS和XPath的组合定位会比较准确和简单一些。
