Selenium元素定位和交互基础总结

元素定位：查找我们要进行交互的元素。我遇到两种情况：第一种是简单的查找网页固定元素；第二种是在初步定位的元素集合中依靠元素之间的相对关系进一步搜索定位到元素。
1.简单的HTML知识
浏览器的元素对应了HTML元素（标签），以下图谷歌浏览器的搜索元素为例，右键搜索框点击检查之后，弹出界面（或者按F12）。图中还框选了搜索栏的容器元素和容器内部的文本框元素。我们要使用代码交互浏览器元素首先要定位到对应的标签。

2.简单的元素定位

from selenium import webdriver  # 用于操作浏览器
from selenium.webdriver.chrome.options import Options  # 用于设置谷歌浏览器
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By

if __name__ == "__main__":
    driver = link()

    # 标签样式：<标签名 属性名1=属性值1 属性名2=属性值2>
    # 一个标签的定位方式多种多样，在不同场景下按需选择即可，在浏览器的查看器中右键对应标签，在右键菜单栏中可以复制定位值

    # 1.通过标签名（Tag Name）进行定位
    element = driver.find_element(By.TAG_NAME, "input")

    # 2.通过（常见的）标签属性进行简单定位
    # 通过ID定位
    element = driver.find_element(By.ID, "elementId")
    # 通过Name定位
    element = driver.find_element(By.NAME, "elementName")
    # 通过Class Name定位
    element = driver.find_element(By.CLASS_NAME, "className")

    # 通过Link Text定位：一种专门用于定位超链接（即<a>标签）的方法。它根据链接的可见文本进行精确匹配或部分匹配。
    element = driver.find_element(By.LINK_TEXT, "完整链接文本")  # 精确匹配
    element = driver.find_element(By.PARTIAL_LINK_TEXT, "部分文本")  # 部分匹配

    # 定位多个元素
    elements = driver.find_elements(By.TAG_NAME, "input")  # 返回列表

3. 通过CSS Selector定位，类似于正则表达式匹配字符串

    element = driver.find_element(By.CSS_SELECTOR, "#elementId")                # “#”表示ID方式
    element = driver.find_element(By.CSS_SELECTOR, ".className")                # “.”表示Class选择器方式
    # 属性定位
    element = driver.find_element(By.CSS_SELECTOR, "input[type='text']")        # 标签名[属性名=“属性值”]
    element = driver.find_element(By.CSS_SELECTOR, "div[class*='partial']")     # 标签名[属性名=“属性值”]包含特定值
    element = driver.find_element(By.CSS_SELECTOR, "div[class^='start']")       # 标签名[属性名=“属性值”]以特定值开头
    element = driver.find_element(By.CSS_SELECTOR, "div[class$='end']")         # 标签名[属性名=“属性值”]以特定值结尾
    # 相邻关系
    element = driver.find_element(By.CSS_SELECTOR, "div.container input")       # 后代选择器
    element = driver.find_element(By.CSS_SELECTOR, "ul > li")                   # 子元素选择器
    element = driver.find_element(By.CSS_SELECTOR, "label + input")             # 相邻兄弟选择器
    element = driver.find_element(By.CSS_SELECTOR, "h1 ~ p")                    # 后续兄弟选择器

4.通过XPath(XML Path Language)定位,类似于路径定位的方式

    # 路径定位
    element = driver.find_element(By.XPATH, "/html/body/div[1]/div/span")       # 绝对路径（不推荐）
    element = driver.find_element(By.XPATH, "//div[@id='content']")             # 相对路径（推荐）
    element = element.find_element(By.XPATH, ".")                               # 当前节点
    parent = element.find_element(By.XPATH, "..")                               # 父节点

    # 属性定位
    element = driver.find_element(By.XPATH, "//input[@type='text']")                        # 基础属性定位
    element = driver.find_element(By.XPATH, "//input[@type='text' and @name='username']")   # 多属性组合
    element = driver.find_element(By.XPATH, "//div[contains(@class, 'container')]")         # 属性包含特定值
    element = driver.find_element(By.XPATH, "//input[starts-with(@id, 'user')]")            # 属性以特定值开头
    element = driver.find_element(By.XPATH, "//input[ends-with(@id, 'name')]")              # 属性以特定值结尾

    # 轴定位
    ancestor = element.find_element(By.XPATH, "./ancestor::div")                        # 祖先节点
    descendants = element.find_elements(By.XPATH, ".//span")                            # 后代节点
    parent = element.find_element(By.XPATH, "./parent::*")                              # 父节点
    following_sibling = element.find_element(By.XPATH, "./following-sibling::div")      # 兄弟节点
    preceding_sibling = element.find_element(By.XPATH, "./preceding-sibling::div")      # 兄弟节点