CSS 选择器是使用 Selenium 自动化浏览器测试时定位网页上元素的强大工具。使用 CSS 选择器可以让您以精确且灵活的方式定位元素。在这份综合指南中，我们将涵盖您成为在 Selenium 中通过 CSS 选择器查找元素的专家所需了解的所有内容。
CSS 选择器简介
CSS 选择器允许您根据 id、类、属性、DOM 树中的位置等来选择 HTML 元素。以下是一些最常用的 CSS 选择器：
ID选择器 – 根据元素的唯一 ID 选择元素。例如
#main-header将选择 id="main-header" 的元素。类选择器 – 根据类名选择元素。例如
.article将选择 class="article" 的所有元素。属性选择器 – 根据特定属性或属性值选择元素。例如
input[type="text"]将选择所有 type="text" 的输入元素。后代选择器 – 选择作为另一个指定元素的后代的元素。例如
div p将选择 div 元素内的所有 p 元素。子选择器 – 选择作为另一个指定元素的直接子元素的元素。例如
div > p将选择 div 的直接子元素 p 元素。相邻兄弟选择器 – 选择紧随另一个元素的同级元素。例如
h2 + p将选择紧随 h2 元素之后的 p 元素。通用兄弟选择器 – 选择另一个元素之后的所有同级元素。例如
h2 ~ p将选择 h2 元素之后的所有 p 元素。
这些只是众多 CSS 选择器类型中的几个示例。您可以以非常具体的方式将多个选择器组合到目标元素。
在 Selenium 中通过 CSS 选择器查找元素
Selenium 提供了两种使用 CSS 选择器查找元素的主要方法：
driver.find_element_by_css_selector()
该方法将返回第一个匹配的元素。
element = driver.find_element_by_css_selector(‘#main-header‘)driver.find_elements_by_css_selector()
该方法将返回所有匹配元素的列表。
elements = driver.find_elements_by_css_selector(‘.article‘)使用这些方法时，您可以将 CSS 选择器作为字符串传递。以下是如何使用不同选择器定位元素的一些示例：
通过 ID：
driver.find_element_by_css_selector(‘#signup-form‘)按类别：
driver.find_element_by_css_selector(‘.footer-links‘)按属性：
driver.find_element_by_css_selector(‘input[name="first_name"]‘)后裔：
driver.find_element_by_css_selector(‘div#content p.summary‘)儿童：
driver.find_element_by_css_selector(‘ul.menu > li.active‘) 相邻兄弟姐妹：
driver.find_element_by_css_selector(‘h1 + p.intro‘)一般兄弟姐妹：
driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)正如您所看到的，CSS 选择器为您提供了许多以不同方式定位元素的选项。
编写有效 CSS 选择器的技巧
以下是在编写用于在 Selenium 中查找元素的 CSS 选择器时需要遵循的一些提示：
尽可能具体 – 使用 id、class、attributes 和多个选择器来精确定位元素。这可以避免误报匹配。
优先选择类而不是标签名称——div、p、a 等标签名称不是很有特色。类允许更具体的定位。
使用名称或标题等唯一属性 - 名称和标题属性通常具有可以精确定位单个元素的唯一值。
小心使用同级选择器——如果编写不当，相邻和一般同级选择器可能会匹配比预期更多的元素。
避免复杂的嵌套选择器——链接大量后代选择器可能会使选择器容易损坏。尝试将每个选择器限制为 3-4 个链接级别。
将长选择器分成多行 – CSS 选择器不必是单行。将它们分成多行可以提高可读性。
遵循这些技巧将帮助您编写健壮且可维护的 CSS 选择器来自动化 Web 测试。
常见示例和用例
现在让我们看一些如何使用 CSS 选择器通过 Selenium 进行网页抓取和浏览器测试的常见示例：
选择导航链接
要选择主要导航链接，我们可以使用类选择器：
nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)选择表单字段
我们可以根据输入标签和类型属性选择表单输入字段：
username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)选择表格行和列
CSS 选择器可以轻松定位 HTML 表格中的特定行和单元格：
# Get second row
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘)
# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)选择子元素
要仅选择容器的直接 div 子级，我们可以使用子选择器：
children = driver.find_elements_by_css_selector(‘#container > div‘)根据文本选择元素
我们可以使用 * 选择器部分匹配链接文本：
contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]这些示例演示了如何在现实世界的测试自动化场景中使用 CSS 选择器。
在其他语言中使用 CSS 选择器
到目前为止的示例使用了 Python，但 CSS 选择器可以在 Selenium 的任何语言绑定中使用：
爪哇岛
// By.cssSelector
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));C#
// FindElement
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));JavaScript的
// $
const element = await driver.$(‘div.main #login-form‘);无论您使用哪种语言，CSS 选择器都提供了一种强大而灵活的方式来定位元素。
通过类名定位元素
一个常见的用例是通过类名定位元素。以下是在 Selenium 中按类别选择的一些提示：
匹配确切的类名 –
driver.find_element_by_class_name(‘primary-btn‘)使用 CSS 类选择器 –
driver.find_element_by_css_selector(‘.primary-btn‘)部分匹配多个类 –
driver.find_element_by_css_selector(‘.primary.btn‘)将后代与班级相匹配 –
driver.find_element_by_css_selector(‘div .primary-btn‘)使用多个类来实现唯一性 –
driver.find_element_by_css_selector(‘.primary-btn.large‘)
按类名匹配非常有用，但请确保目标类在页面上是唯一的。
通过标签名称查找元素
通过 HTML 标签名称定位元素是另一个常见的 Selenium 任务。这里有些例子：
查找标签名称的第一个实例：
element = driver.find_element_by_tag_name(‘button‘) 查找标签名称的所有实例：
buttons = driver.find_elements_by_tag_name(‘button‘)与 CSS 选择器结合：
submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)由于标签名称类似于 <div> 和 <span> 很常见，也尝试使用 ID、类或属性来唯一标识元素。
按名称或 ID 查找元素
如果元素具有 id 或 name 属性，最简单的选项是按名称或 ID 定位。
通过精确ID查找：
element = driver.find_element_by_id(‘signup-form‘)按确切名称查找：
element = driver.find_element_by_name(‘email‘) ID 和名称定位器将仅与确切的属性值匹配。这使得它们非常具体，但如果 ID 或名称发生变化，也很容易被破坏。
通过 XPath 与 CSS 选择器查找元素
XPath 是 Selenium 中另一个常见的元素定位策略。那么什么时候应该使用 XPath 和 CSS 选择器呢？
以下是一些差异：
可读性 – CSS 选择器对于大多数开发人员来说更具可读性和更容易理解。
维护 – 与长而复杂的 XPath 相比，CSS 选择器不那么脆弱，并且容易发生破坏性更改。
公司能力 – XPath 可以访问 CSS 选择器无法访问的某些元素属性，例如文本内容。
性能 – 与复杂的 XPath 相比，CSS 选择器的浏览器匹配速度更快。
一般来说，出于可维护性和性能的考虑，更喜欢 CSS 选择器。仅当需要访问 CSS 无法访问的内容时才使用 XPath。
使用 CSS 选择器的最佳实践
以下是使用 CSS 选择器定位元素时应遵循的一些最佳实践：
优先考虑唯一性而不是复杂性——如果可能的话，避免使用长链的嵌套选择器。
使用 ID 和类而不是标签名称和嵌套。
尝试匹配 3 个或更少的连锁关卡 – 更多关卡会增加脆弱性。
避免使用通用选择器，例如
*– 这些很容易出现误报匹配。将长选择器分成多行 – 提高可读性。
缓存常用选择器——保存重复的选择器查找。
使用描述性选择器名称 - 有助于阐明意图并避免魔术字符串。
遵循这些最佳实践将有助于为 Selenium 自动化编写健壮、可读且可靠的 CSS 选择器。
调试 CSS 选择器的技巧
调试 CSS 选择器是测试自动化的一项基本技能。以下是一些故障排除提示：
使用浏览器的开发人员工具来测试选择器 - Chrome DevTools 提供了方便的元素检查器。
打印并检查匹配的元素 – 运行后
find_elements()，打印结果以查看匹配的内容。摔角
NoSuchElementException– 在 try/ except 块中包裹查找以捕获未找到元素的情况。从目标元素生成 XPath – 许多浏览器允许您复制 XPath，这可以帮助构建 CSS 选择器。
简化复杂的选择器 - 尝试删除属性/类/嵌套，直到选择器起作用。
如果需要，请使用显式等待 - 动态页面可能需要等待选择器变得可用。
验证选择器的准确性 - 确保选择器确实找到所需的元素，而不仅仅是任何元素。
花时间仔细调试选择器将通过更稳定的测试得到回报。
结论
本指南涵盖了在 Selenium 中通过 CSS 选择器定位元素的所有关键方面：
- CSS 选择器语法和类型
- 与 Selenium 一起使用
find_element方法 - 编写精确且可维护的选择器
- 常见用例和示例
- 与 XPath 的比较
- 调试和最佳实践
CSS 选择器提供了一种强大、灵活的方式来定位元素以进行网页抓取和测试自动化。通过掌握此处所示的技术，您可以编写强大的自动化脚本，以抵抗应用程序 UI 中的更改。正确使用 CSS 选择器是任何经验丰富的 Selenium 工程师的必备技能。
