python+chrome自动化11-Selenium元素定位终极指南

大飞记Python

发布于 2026-04-14 20:22:30

330

小伙伴们，大家好～

今天给大家梳理一下自动化测试里面的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: 02px10pxrgba(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: 12px20px;
            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 定位

通过元素的标签名定位（如 div、input等）。非常快速找到同类标签

语法：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 定位

通过链接的文本内容定位（适用于 a 标签）

语法：find_element(By.LINK_TEXT, "link_text")

代码实现：

 element = driver.find_element(By.LINK_TEXT, "Click Here")

8、通过 Partial Link Text 定位

通过链接的部分文本内容定位（适用于 a 标签）。算是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的组合定位会比较准确和简单一些。