Other / python / web

python selenium 选择器的使用

  • 11 9 月, 2025

【python爬虫与自动化】selenium 元素定位器_selenium3 locator-CSDN博客
版权声明：本文为CSDN博主「景元元大猫猫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/2301_81084742/article/details/149386160
【python爬虫与自动化】selenium 元素定位器
原创
已于 2025-07-17 09:40:42 修改
·
623 阅读
·

26
·
10
·
CC 4.0 BY-SA版权
文章标签：

selenium

测试工具

I. 引言
什么是元素定位器

在 Web 自动化测试（如 Selenium）中，元素定位器（Locator） 是用于在页面上唯一识别和定位 HTML 元素的机制。无论是输入框、按钮、链接还是复杂的动态组件，自动化脚本都需要通过定位器来找到目标元素，并执行点击、输入、读取等交互操作。

为什么需要元素定位器？

自动化交互：测试脚本需要精确找到页面元素才能模拟用户操作。
动态页面适配：现代 Web 应用（如单页应用 SPA）常动态渲染元素，稳定的定位策略至关重要。
可维护性：良好的定位策略能减少脚本因前端改动而失效的情况。
基本使用方式 – selenium

from selenium.webdriver.common.by import By

通过ID定位

element = driver.find_element(By.ID, “username”)

通过CSS选择器定位

submit_button = driver.find_element(By.CSS_SELECTOR, “button.submit”)
AI运行代码
python
目录

I. 引言

II. By.ID

  1. 定位外层工具栏
  2. 定位内部元素

III. By.XPATH

  1. 基本用法
  2. 绝对路径 vs 相对路径
  3. 常用符号组合
  4. 常用表达式

IV. By.CSS_SELECTOR

  1. 基本用法
  2. 基础选择器
  3. attribute属性选择器
  4. 层级关系
  5. 通配符：*
  6. 组合选择器
  7. 伪类选择器
  8. 常见表达式

II. By.ID
优点：唯一标识，定位最快

定位只依靠id唯一标识，无需区分内外部元素框架

  1. 定位外层工具栏

toolbar = driver.find_element(By.ID, “csdn-toolbar”)
AI运行代码
python

  1. 定位内部元素

inputbox = driver.find_elemenet(By.ID, ‘toolbar-search-input’)
AI运行代码
python
III. By.XPATH

  1. 基本用法
    driver.find_elemenet(By.XPATH, xpath表达式)
    AI运行代码
    python
    例子

driver.find_elemenet(By.XPATH, “//div[@class=’aClass’])”)
AI运行代码
python

  1. 绝对路径 vs 相对路径

绝对路径（完整路径）

当我们在开发者工具中复制xpath的时候，我们一定会发现这个xpath元素比较丑陋，直接将所有页面元素拼起来组成的。

/html/body/div/div[2]/div[1]/input
AI运行代码
python
试想，如果前端代码一有改动，那我们的xpath是不是全部都要变化。因此，相对路径更适合写在程序中。

相对路径

//input[@id=’toolbar-search-input’]
AI运行代码
python
//*[@id=”toolbar-search-input”]
AI运行代码
python

  1. 常用符号组合
    3.1 斜杠：//
    // 是一个 缩写符号，表示 从当前节点开始，递归搜索所有子孙节点（即任意层级的后代）

在 Selenium WebDriver 中使用 XPath 时，以 // 开头的表达式会从 整个 HTML 文档的根节点（即 标签）开始递归搜索

对比 / 与 //

/ 表示 直接子节点（严格的一级层级关系）。

// 表示 任意深度的后代节点（无论嵌套多深）。

例子

AI运行代码
html
XPath 表达式 匹配的节点 说明
//input 所有 标签（#username 和 #pwd）
递归搜索整个文档中的 input，无论嵌套多深。

会把所有input标签都找出来

/html/body/div//input 所有 标签（#username 和 #pwd） 从绝对路径开始，但在 div 后使用 // 表示其所有后代中的 input。
//div[@id=’container’]//input 所有 标签（#username 和 #pwd） 先定位 id=”container” 的 div，再在其后代中找 input。
//form/input 仅匹配 #username input 必须是 form 的 直接子节点（因为用了单斜杠 /）。
3.2 通配符：‘ * ’
‘ * ’ 代表 任意 HTML 标签（如

、

、 等）。

它不关心具体的标签类型，只关注 属性条件（比如 @id=”toolbar-search-input”）

例子

精准匹配标签名

//input[@id=’toolbar-search-input’]
AI运行代码
python
仅匹配 标签且 id 为 toolbar-search-input 的元素。

通配符 ‘ * ’

//*[@id=”toolbar-search-input”]
AI运行代码
python
匹配 任何标签（、

、 等）中 id 为 toolbar-search-input 的元素

3.3 匹配元素属性：@
在 XPath 中，@ 表示 选择元素的属性，用于按属性值过滤元素。

标签名：tag

属性名：attribute

//标签名[@属性名=’属性值’]
AI运行代码
python
匹配id

driver.find_element(By.XPATH, ‘//input[@id=”username”]’)
AI运行代码
python
匹配class

driver.find_element(By.XPATH, ‘//button[contains(@class, “submit-btn”)]’)
AI运行代码
python
3.4 字符串匹配函数：contains()
判断一个字符串中是否包含目标片段，返回布尔值（true/false）

匹配属性名

contains(@属性名, ‘子字符串’)
AI运行代码
python
匹配文本内容

contains(text(), ‘文本片段’)
AI运行代码
python
注意： contains() 区分大小写（’Search’ ≠ ‘search’）

a. 匹配部分值
HTML 中 class 通常是多个值的组合（如 class=”btn btn-primary”），用 = 精确匹配会失败，此时需用 contains

例子：匹配所有 class 包含 btn-primary 的

class=”btn btn-primary”

//div[contains(@class, ‘btn-primary’)]
AI运行代码
python
对比精准匹配

遇到空格的时候，用‘ . ’ 代替空格

//div[@class = ‘btn.btn-primary’]
AI运行代码
python
b. 模糊匹配
匹配动态变化属性

若属性值的一部分是动态生成的（如 id=”user-12345″）

//*[contains(@id, ‘user-‘)]
AI运行代码
python
模糊匹配文本

匹配 标签内文本包含“搜索”的元素（如“高级搜索”、“搜索图标”等）

//span[contains(text(), ‘搜索’)]
AI运行代码
python
3.5 多条件组合：and
当你不仅希望匹配一个属性，还需要匹配另一个

例子：匹配 class 包含 search 且 placeholder 为“关键词”的输入框

//input[contains(@class, ‘search’) and @placeholder=’关键词’]
AI运行代码
python

  1. 常用表达式
    表达式 说明 示例
    //tag[@attr=’value’] 属性精确匹配 //input[@placeholder=’cubumber’]
    //tag[contains(@attr,’value’)] 属性部分匹配 //div[contains(@class,’toolbar’)]
    //tag[text()=’text’] 文本精确匹配 //span[text()=’搜索’]
    //tag[starts-with(@attr,’val’)] 属性开头匹配 //a[starts-with(@href,’https://blog’)]
    //tag1//tag2 层级关系（tag2是tag1的后代） //div[@id=’csdn-toolbar’]//input
    //tag1/tag2 直接子节点 //ul/li
    IV. By.CSS_SELECTOR
  2. 基本用法
    driver.find_elemenet(By.CSS_SELECTOR, css_selector表达式)
    AI运行代码
    python
    from selenium.webdriver.common.by import By

element = driver.find_element(By.CSS_SELECTOR, “css_selector_expression”)
AI运行代码
python

  1. 基础选择器
    2.1 标签定位
    driver.find_element(By.CSS_SELECTOR, “input”)

driver.find_element(By.CSS_SELECTOR, “div”)
AI运行代码
python
2.2 class类定位

前面有个 ‘ . ’

driver.find_element(By.CSS_SELECTOR, “.username-field”)
AI运行代码
python
2.3 ID 定位

前面有个 ‘ # ’

driver.find_element(By.CSS_SELECTOR, “#submit-btn”)
AI运行代码
python
2.4 组合使用
driver.find_element(By.CSS_SELECTOR, “‘标签名’ + ‘.’ + ‘类/id/…'”)
AI运行代码
python
driver.find_element(By.CSS_SELECTOR, “input.username-field”)
AI运行代码
python

  1. attribute属性选择器
    3.1 属性名定位
    driver.find_element(By.CSS_SELECTOR, “[name]”)
    AI运行代码
    python
    3.2 属性值完全匹配 element_value = target_value
    driver.find_element(By.CSS_SELECTOR, “[type=’submit’]”)
    AI运行代码
    python
    3.3 属性值部分匹配
    driver.find_element(By.CSS_SELECTOR, “[href*=’example.com’]”) # 包含
    driver.find_element(By.CSS_SELECTOR, “[href^=’https’]”) # 开头
    driver.find_element(By.CSS_SELECTOR, “[href$=’.pdf’]”) # 结尾
    AI运行代码
    python
  2. 层级关系
    4.1 空格 – 后代选择器（任意层级）
    选择div内的所有span（任何嵌套层级）

div span
AI运行代码
css
4.2 直接子元素：>
只选择div的直接子span

这个选择器专门用于选择直接嵌套在父元素内的子元素，无论有多少符合条件的子元素。

也就是说，可以选择多个子元素。

div > span
AI运行代码
css
示例

直接子元素1直接子元素2 非直接子元素

直接子元素3

AI运行代码
html
直接选择所有子元素

会匹配到3个元素：

  1. “直接子元素1”
  2. “直接子元素2”
  3. “直接子元素3”

spans = driver.find_elements(By.CSS_SELECTOR, “div.container > span”)
AI运行代码
python
结合其他选择器

选择直接子元素中特定class的span

spans = driver.find_elements(By.CSS_SELECTOR, “div.container > span.highlight”)

选择直接子元素中特定属性的span

spans = driver.find_elements(By.CSS_SELECTOR, “div.container > span[data-id]”)
AI运行代码
python
与其他选择器组合

选择直接子元素中的第一个span

first_span = driver.find_element(By.CSS_SELECTOR, “div.container > span:first-child”)

选择直接子元素中的最后一个span

last_span = driver.find_element(By.CSS_SELECTOR, “div.container > span:last-child”)

选择直接子元素中的第n个span

third_span = driver.find_element(By.CSS_SELECTOR, “div.container > span:nth-child(3)”)
AI运行代码
python
4.3 相邻兄弟选择器：+
选择紧接在h1后的第一个p元素

h1 + p
AI运行代码
css
4.4 通用兄弟选择器：~
h1后面的所有同级p元素

h1 ~ p
AI运行代码
css

  1. 通配符：*
    选择div内的所有元素

div *
AI运行代码
css

  1. 组合选择器
    6.1 AND

无间隔连续写

input.form-control[name=”username”] /* class为form-control且name为username的input */
AI运行代码
css
6.2 OR

逗号分隔

button, input[type=”button”] /* 所有button和type为button的input */
AI运行代码
css

  1. 伪类选择器
    7.1 选择第一个元素/最后一个元素：first-child / :last-child
    li:first-child /* 第一个li元素 / li:last-child / 最后一个li元素 / AI运行代码 css 7.2 选择第n行：nth-child(n) tr:nth-child(odd) / 奇数行 / tr:nth-child(even) / 偶数行 / tr:nth-child(3) / 第3行 */
    AI运行代码
    css
    7.3 :not(selector)
    排除某个属性

input:not([type=”hidden”]) /* 不是隐藏输入框的input / AI运行代码 css 7.4 selenium支持 – contains语法 div:contains(“Hello”) / 包含”Hello”文本的div */
AI运行代码
css

  1. 常见表达式
    表达式 说明 示例
    tag#id ID选择器 input#username
    tag.class 类选择器 button.submit-btn
    [attr=”value”] 属性精确匹配 [placeholder=”关键词”]
    [attr=”value”] 属性部分匹配 [class=”toolbar”]
    :contains(“text”) 文本包含 div:contains(“搜索”)
    [attr^=”val”] 属性开头匹配 a[href^=”https://blog”]
    parent child 后代选择器 div.container input
    parent > child 直接子元素 ul > li

Tags:

You may also like...

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Catetories