Python Selenium 获取元素 CSS 选择器：正确方法与示例

在使用 Selenium 自动化网页操作时，获取元素的 CSS 选择器是必不可少的步骤。本文将介绍两种方法来获取元素的 CSS 选择器，并讨论如何避免错误的索引值。

问题：错误的索引值

以下代码示例使用父元素和子元素的关系来生成 CSS 选择器：

from selenium.webdriver.common.by import By

def get_css_selector_with_pseudo(element):
    # 获取元素的标签名称
    tag_name = element.tag_name

    # 获取元素的属性
    attributes = element.get_attribute('outerHTML')

    # 生成 CSS 选择器
    css_selector = f"{tag_name}"
    parent = element.find_element(By.XPATH, "..")

    while parent is not None:
        # 获取父元素的标签名称
        parent_tag_name = parent.tag_name

        # 获取父元素的所有子元素
        siblings = parent.find_elements(By.CSS_SELECTOR, f"{parent_tag_name}")

        # 确认父元素是否包含当前元素
        if element in siblings:
            parent_index = siblings.index(element)

            # 拼接父元素的 CSS 选择器
            css_selector = f"{parent_tag_name}:nth-child({parent_index + 1}) > {css_selector}"
        else:
            css_selector = f"{parent_tag_name} > {css_selector}"

        # 获取父元素的属性
        parent_attributes = parent.get_attribute('outerHTML')

        # 如果父元素的属性与子元素相同，则不再向上查找
        if parent_attributes == attributes:
            break

        # 继续向上查找父元素
        attributes = parent_attributes
        element = parent
        try:
            parent = parent.find_element(By.XPATH, "..")
        except:
            return css_selector

    return css_selector

这段代码存在一个问题，即它假设父元素的所有子元素都是同类型的。实际上，父元素的子元素可能包含不同类型的元素，导致生成的 CSS 选择器是错误的。例如，div:nth-child(367) 可能并非实际的索引值。

正确方法

为了避免错误的索引值，可以使用更简单的方法来获取元素的 CSS 选择器。以下示例函数使用元素的 id 属性、class 属性和其他属性来生成 CSS 选择器：

def get_css_selector(element):
    css_selector = element.tag_name

    # 检查是否有 id 属性
    element_id = element.get_attribute("id")
    if element_id:
        css_selector = f"#{element_id}"

    # 检查是否有 class 属性
    element_class = element.get_attribute("class")
    if element_class:
        css_selector = f"{css_selector}.{element_class.replace(' ', '.')}"

    # 检查其他属性
    attributes = element.get_property("attributes")
    for attr in attributes:
        attr_name = attr["name"]
        attr_value = attr["value"]

        if attr_name not in ["id", "class"]:
            css_selector = f"{css_selector}[{attr_name}='{attr_value}']"

    return css_selector

这个函数首先获取元素的标签名称，并检查是否有 id 属性和 class 属性。然后，它遍历其他属性并添加到 CSS 选择器中。最后，它返回生成的 CSS 选择器。

总结

通过使用元素的属性来生成 CSS 选择器，您可以避免错误的索引值，并获得更准确的 CSS 选择器。这将使您的 Selenium 自动化代码更加稳定可靠。