1. 什么是 XPath 和 CSS 选择器？
今天我们将迈出一大步，进入 Selenium 自动化的世界，学习 XPath 和 CSS 选择器。这些小但是强大的工具将成为你在网页中查找元素时的忠实伙伴。让我们深入了解选择器的世界，并学会如何更精确、高效地使用它们。
如果 HTML 文档是一片茂密的森林，那么 XPath 和 CSS 选择器就是你的地图和提示工具。它们能帮你找到需要的树（或者元素，如果你更习惯编程术语）。即使元素藏在代码堆积如山的地方，这些工具也能帮你找到它们。
XPath
XPath (XML Path Language) 是一种用于在 XML 文档中导航的语言。但有人曾经说过 HTML 是 XML 的一种混合体，对吧？这就是为什么 XPath 也很适合用在 HTML 文档上。它可以通过你指定的任何路径准确地找到目标元素。
CSS 选择器
CSS 选择器来自层叠样式表的世界。别担心，学习它并不需要你成为设计师！它们可以用来根据元素的类型、类、ID，甚至状态选择元素。使用它们比你想象的要简单——实际上，你可能在给网页添加样式时已经无意中用过它们了。
2. 在代码中使用 XPath 和 CSS 选择器
现在你已经了解了什么是选择器，让我们直接进入实践吧。我们将学习如何与 Selenium 一起使用它们，实现神奇效果！
使用 XPath
下面是一个如何通过 XPath 在 Selenium 找到元素的例子：
from selenium import webdriver
# 配置驱动程序
driver = webdriver.Chrome()
# 打开页面
driver.get('https://example.com')
# 使用 XPath 找到元素
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')
# 输出元素的文本
print(element.text)
# 关闭浏览器
driver.quit()
解释：
-
//div[@id="menu"]/ul/li/a—— 这是我们的 XPath。 它的意思是：“嘿，驱动程序，帮我找到一个在li中，位于ul内，并且属于div且id="menu"的a元素。”
使用 CSS 选择器
接下来我们看看如何使用 CSS 选择器：
from selenium import webdriver
# 配置驱动程序
driver = webdriver.Chrome()
# 打开页面
driver.get('https://example.com')
# 使用 CSS 选择器找到元素
element = driver.find_element_by_css_selector('div#menu > ul > li > a')
# 输出元素的文本
print(element.text)
# 关闭浏览器
driver.quit()
解释：
-
div#menu > ul > li > a—— 这是我们的 CSS 选择器。 它寻找元素的方式与 XPath 类似，但语法更加简洁。
3. XPath 和 CSS 选择器之间的区别
你可能会问，XPath 和 CSS 选择器之间有什么区别？好问题！让我们来看看在什么情况下使用哪一个。
灵活性 vs. 简洁性
XPath 更灵活：你可以使用它在 DOM 树中“向上”移动，还能应用复杂的逻辑条件。这让它在处理复杂查询时特别有用。然而，有时 CSS 选择器的简单性和简洁性使其更受青睐。CSS 选择器特别适合通过类或 ID 查找元素时使用，因为它们更容易阅读和书写。
功能支持
XPath 支持使用函数，比如检查文本、处理属性（例如 contains() 或 starts-with()）。而 CSS 选择器在这一点上没有那么强大。
运行速度
在某些场景下，CSS 选择器的运行速度更快。这是因为浏览器原本就是为 CSS 选择器的工作进行了优化，因此它们是用于简单任务的默认选择。
语法
XPath 的语法更复杂，这既是它的优点，也是它的缺点。而 CSS 选择器的语法更简单，学习和使用都更容易。
4. 实际应用
让我们把这些知识应用到一个实际的任务中。假设我们有一个包含商品列表的网页，我们需要收集所有商品的名称和价格。以下是实现方法：
使用 XPath 的示例
from selenium import webdriver
# 配置驱动程序
driver = webdriver.Chrome()
# 打开页面
driver.get('https://example.com/products')
# 查找所有商品元素
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')
# 提取每个商品的数据
for product in products:
name = product.find_element_by_xpath('.//td[@class="product-name"]').text
price = product.find_element_by_xpath('.//td[@class="product-price"]').text
print(f"商品: {name}, 价格: {price}")
# 关闭浏览器
driver.quit()
使用 CSS 选择器的示例
from selenium import webdriver
# 配置驱动程序
driver = webdriver.Chrome()
# 打开页面
driver.get('https://example.com/products')
# 查找所有商品元素
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')
# 提取每个商品的数据
for product in products:
name = product.find_element_by_css_selector('td.product-name').text
price = product.find_element_by_css_selector('td.product-price').text
print(f"商品: {name}, 价格: {price}")
# 关闭浏览器
driver.quit()
5. 特点与常见错误
在使用 XPath 和 CSS 选择器时，有一些陷阱需要避免。例如，当你在 XPath 中使用绝对路径时，HTML 结构的任何微小变动都可能导致代码出错。为了保持灵活性，请始终尝试使用相对路径。
CSS 选择器则可能会因为过于复杂而变得难以阅读，因此在精确性和简洁性之间找到平衡点很重要。
此外，还要提及错误处理。如果找不到元素，Selenium 会抛出 NoSuchElementException。使用 try-except 块或等待方法（如 WebDriverWait）可以更可靠地应对这种情况，并让你的脚本更健壮。
GO TO FULL VERSION