Selenium 通过 CSS 选择器查找元素

在 Selenium 中，可以使用多种方式查找网页元素，其中之一就是使用 CSS 选择器。

CSS 选择器是一种用于选择 Web 页面元素的语法规则。它可以根据元素的属性、标签名、层级关系等进行选择，并支持多个选择器组合使用。通过使用 CSS 选择器，可以提高查找元素的效率和准确性。

使用方法

在 Selenium 中，可以使用 find_element_by_css_selector 方法来通过 CSS 选择器查找元素。该方法接受一个 CSS 选择器作为参数，并返回第一个匹配到的元素。

# 导入 webdriver
from selenium import webdriver

# 创建 Chrome 浏览器实例
driver = webdriver.Chrome()

# 打开网页
driver.get('https://www.example.com')

# 使用 CSS 选择器查找元素
element = driver.find_element_by_css_selector('a[href="https://www.iana.org/domains/example"]')

# 输出元素文本内容
print(element.text)

# 关闭浏览器
driver.quit()

上述代码中，我们使用了 CSS 选择器 a[href="https://www.iana.org/domains/example"] 来查找网页中第一个跳转到 https://www.iana.org/domains/example 的链接。

CSS 选择器语法

CSS 选择器语法包括元素选择器、类选择器、ID 选择器、属性选择器、子选择器、后代选择器、相邻兄弟选择器、通用选择器等。

以下是一些常用的 CSS 选择器示例：

• 使用元素名称选择元素：

div   /* 选择所有 <div> 元素 */
a     /* 选择所有 <a> 元素 */

• 使用类选择器选择元素：

.class-name   /* 选择所有具有 class="class-name" 的元素 */

• 使用 ID 选择器选择元素：

#element-id   /* 选择具有 id="element-id" 的元素 */

• 使用属性选择器选择元素：

[name="example"]   /* 选择所有具有 name="example" 属性的元素 */
[type="text"]      /* 选择所有具有 type="text" 属性的元素 */

• 使用后代选择器选择元素：

div a   /* 选择所有 <div> 元素内的 <a> 元素 */

• 使用子选择器选择元素：

ul > li   /* 选择所有 <ul> 元素下的直接子元素 <li> */

• 使用相邻兄弟选择器选择元素：

h1 + p   /* 选择紧接在所有 <h1> 元素后面的第一个 <p> 元素 */

• 使用通用选择器选择元素：

*   /* 选择所有元素 */

以上只是 CSS 选择器语法中的一部分，需要根据具体场景选择合适的选择器进行元素查找。

总结

通过使用 CSS 选择器，可以实现较为高效、准确的元素查找操作。在编写 Selenium 测试脚本时，建议掌握一定的 CSS 选择器语法，从而更好地进行元素定位。