Selenium CSS 选择器详细讲解

详细介绍 CSS 选择器 `By.CSS_SELECTOR`

在 Selenium 中，By.CSS_SELECTOR 是一种强大且灵活的定位方式。它使用 CSS 选择器语法来查找页面上的元素。CSS 选择器支持复杂的查询语法，可以根据元素的标签、类名、ID、属性等进行组合定位。

示例 HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Selenium Selectors Example</title>
</head>
<body><div id="main" class="container"><h1 class="header">Welcome to Selenium Tutorial</h1><p name="description">This is a tutorial for learning Selenium.</p><a href="https://example.com" id="link1" class="link">Click here</a><a href="https://example.com/about" id="link2" class="link special-link">Learn more</a><form><input type="text" name="username" class="input-field"><input type="password" name="password" class="input-field"><button type="submit" class="button primary">Submit</button></form></div>
</body>
</html>

在上面的 HTML 示例中，有一个 <button> 元素，其类名为 button primary。我们将详细介绍如何使用 CSS 选择器来定位这个元素。

CSS 选择器 `By.CSS_SELECTOR`

用法示例

from selenium import webdriver
from selenium.webdriver.common.by import By# 初始化 WebDriver
driver = webdriver.Chrome()# 打开 HTML 文件（假设文件名为 example.html，放在当前工作目录）
driver.get("file:///path/to/your/example.html")# 使用 CSS 选择器定位具有类名 'button primary' 的 <button> 元素
element = driver.find_element(By.CSS_SELECTOR, '.button.primary')
print(element.text)  # 输出: Submit# 关闭浏览器
driver.quit()

解释

driver.find_element(By.CSS_SELECTOR, '.button.primary')：这行代码使用 CSS 选择器 .button.primary 来定位元素。.button.primary 选择器表示具有 button 和 primary 两个类名的元素。
print(element.text)：打印出找到的元素的文本内容，这里是 Submit。

CSS 选择器语法

CSS 选择器语法支持多种形式，以下是常见的一些用法：

通过标签名定位：

element = driver.find_element(By.CSS_SELECTOR, 'button')

选择所有 <button> 元素。

通过类名定位：
```
element = driver.find_element(By.CSS_SELECTOR, '.button')
```
选择所有类名包含 button 的元素。

通过ID定位：

element = driver.find_element(By.CSS_SELECTOR, '#link1')

选择 ID 为 link1 的元素。

通过属性定位：

element = driver.find_element(By.CSS_SELECTOR, 'input[name="username"]')

选择 name 属性为 username 的 <input> 元素。

组合选择器：
```
element = driver.find_element(By.CSS_SELECTOR, 'div#main.container')
```
选择 ID 为 main 并且类名为 container 的 <div> 元素。
后代选择器：
```
element = driver.find_element(By.CSS_SELECTOR, 'div.container h1.header')
```
选择类名为 container 的 <div> 内部的类名为 header 的 <h1> 元素。

子元素选择器：

element = driver.find_element(By.CSS_SELECTOR, 'form > input')

选择所有 form 的直接子元素 <input>。

属性存在选择器：
```
element = driver.find_element(By.CSS_SELECTOR, 'input[name]')
```
选择所有具有 name 属性的 <input> 元素。
属性值以某个字符串开头：
```
element = driver.find_element(By.CSS_SELECTOR, 'a[href^="https"]')
```
选择所有 href 属性以 https 开头的 <a> 元素。
属性值以某个字符串结尾：
```
element = driver.find_element(By.CSS_SELECTOR, 'a[href$=".com"]')
```
选择所有 href 属性以 .com 结尾的 <a> 元素。
属性值包含某个字符串：
```
element = driver.find_element(By.CSS_SELECTOR, 'a[href*="example"]')
```
选择所有 href 属性包含 example 的 <a> 元素。