使用更简洁的方式在 Selenium 中定位元素

霞舞

发布时间：2025-10-19 09:34:32

960人浏览过

来源于php中文网

原创

使用更简洁的方式在 selenium 中定位元素

本文旨在帮助开发者在使用 Selenium 进行网页元素定位时，摆脱冗长复杂的 XPath 表达式，转而使用更简洁、高效的 CSS 选择器。通过具体示例，展示如何利用页面结构和元素属性，编写易于维护和理解的定位策略，提升自动化测试脚本的稳定性和可读性。

在使用 Selenium 进行网页自动化操作时，精准且高效地定位页面元素至关重要。冗长且硬编码的 XPath 表达式不仅难以维护，而且在页面结构发生变化时容易失效。本文将探讨如何利用 CSS 选择器简化元素定位，并提供代码示例。

利用 CSS 选择器简化元素定位

CSS 选择器相比 XPath，通常更加简洁易懂，并且在性能上略有优势。它们基于元素的标签名、类名、ID、属性等特征来定位元素。以下是一些常用的 CSS 选择器及其用法：

ID 选择器： 使用 # 符号，例如 #elementId。
类选择器： 使用 . 符号，例如 .className。
标签选择器： 直接使用标签名，例如 div。
属性选择器： 使用 [] 符号，例如 [attribute=value]。
后代选择器： 使用空格分隔，例如 div p (选择 div 元素内的所有 p 元素)。
子元素选择器： 使用 > 符号，例如 div > p (选择 div 元素的直接子元素 p)。

示例：简化 CoinMarketCap 链接抓取

假设我们需要从 CoinMarketCap 网站的表格中抓取所有加密货币的链接。原始代码可能使用了冗长的 XPath 表达式：

CSS3圆形图片鼠标经过旋转效果

CSS3圆形图片鼠标经过旋转效果，图片上有简短标题和说明，兼容主流浏览器，php中文网推荐下载！使用方法： 1、在head区域引入样式表文件lrtk.css 2、在你的网页中加入注释区域代码即可 3、图片为方形，宽高在220像素以上，并有一定空白边距效果较好。

下载

from selenium import webdriver
from selenium.webdriver.common.by import By

def get_all_links(driver):
    """
    Return a list of links from the webpage
    """
    prop_container = driver.find_element(by=By.XPATH, value='//*[@id="__next"]/div/div[1]/div[2]/div/div[1]/div[4]/table')
    table_body_container = prop_container.find_element(by=By.XPATH, value='./tbody')
    table_row_list = table_body_container.find_elements(by=By.XPATH, value='./tr')

    link_list = []

    for crypto in table_row_list:
        a_tag = crypto.find_element(by=By.TAG_NAME, value='a')
        link = a_tag.get_attribute('href')
        link_list.append(link)


    return link_list

# 示例使用
driver = webdriver.Chrome()  # 替换为你的 WebDriver
driver.get("https://coinmarketcap.com/")
links = get_all_links(driver)
print(links)
driver.quit()

通过分析页面结构，我们可以发现表格位于 ID 为 section-coin-markets 的 section 中，并且所有链接都具有类名 cmc-link。因此，我们可以使用以下 CSS 选择器简化定位：

from selenium import webdriver
from selenium.webdriver.common.by import By

def get_all_links_optimized(driver):
    """
    Return a list of links from the webpage using CSS selectors.
    """
    table_row_list = driver.find_elements(By.CSS_SELECTOR, '#section-coin-markets tbody tr')

    link_list = []

    for crypto in table_row_list:
       a_tag = crypto.find_element(By.CSS_SELECTOR, 'a.cmc-link')
       link = a_tag.get_attribute('href')
       link_list.append(link)

    return link_list

# 示例使用
driver = webdriver.Chrome()  # 替换为你的 WebDriver
driver.get("https://coinmarketcap.com/")
links = get_all_links_optimized(driver)
print(links)
driver.quit()

这段代码首先使用 #section-coin-markets tbody tr 定位表格中的每一行，然后使用 a.cmc-link 定位每行中的链接。