YYDS Space

Appearance

Selenium 元素定位与交互 ​

前置配置 ​

python
import os.path
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     # 用于元素定位


def setup():
    option = Options()
    option.add_argument('--no-sandbox')
    option.add_experimental_option('detach', True)
    chromedriver_path = os.path.join(os.path.dirname(__file__), 'chromedriver')
    service = Service(chromedriver_path)
    return webdriver.Chrome(options=option, service=service)

drive = setup()
drive.get('https://www.baidu.com')

1、 元素定位 ​

1.1 单元素定位 ​

定位一个元素，如果定位成功，返回结果，否则报错。

python
element = driver.find_element(By.ID, "id")
print(element)

1.2 多元素定位 ​

定位多个元素，如果定位成功，返回结果列表，否则返回空列表。

python
elements = driver.find_elements(By.ID, "id")
print(elements)

2、 元素交互 ​

2.1 元素输入 ​

python
input_element = drive.find_element(By.ID, "kw")
input_element.send_keys("selenium")

2.2 元素清除 ​

python
input_element = drive.find_element(By.ID, "kw")
input_element.clear()

2.3 元素点击 ​

python
input_element = drive.find_element(By.ID, "su")
input_element.click()

3、 元素定位方式 ​

小知识

可以通过浏览器控制台查看到元素的 ID、Name、Class Name 等属性

html
document.getElementById("id")

3.1 ID ​

python
element = driver.find_element(By.ID, "id")

特点

ID 是最常用且最可靠的定位方式，因为 ID 在页面中通常是唯一的。

示例：下面的元素 ID 为 kw

html
<input type="text" id="kw" name="wd" class="s_ipt">

使用示例：

python
search_input = driver.find_element(By.ID, "kw")
search_input.send_keys("selenium")

3.2 Name ​

python
element = driver.find_element(By.NAME, "name")

特点

Name 属性通常用于表单元素，同一个页面中可能存在多个相同的 name。

示例：下面的元素 name 为 wd

html
<input type="text" name="wd" class="s_ipt">

使用示例：

python
search_input = driver.find_element(By.NAME, "wd")
search_input.send_keys("selenium")

3.3 Class Name ​

python
element = driver.find_element(By.CLASS_NAME, "class_name")

特点

Class Name 是一种常用的定位方式，但不支持复合类名和空格，同一个类名可能用在多个元素上。

示例：下面的元素的 class 为 nav-item

html
<div class="nav-item active">导航项</div>

使用示例：

python
# 使用单个类名定位
nav_items = driver.find_elements(By.CLASS_NAME, "nav-item")
first_nav = nav_items[0]  # 获取第一个导航项

3.4 Tag Name ​

python
element = driver.find_elements(By.TAG_NAME, "tag_name")

特点

Tag Name 的值一般会存在多个，使用时，需要切片处理。

Tag Name 的值是 HTML 标签名，常用于获取同类型的一组元素。

示例：下面的 tag 名称为 input

html
<input type="text" name="wd" id="kw" class="s_ipt" value="请输入您要搜索的内容" maxlength="100">

使用示例：

python
# 获取页面所有的输入框
inputs = driver.find_elements(By.TAG_NAME, "input")
# 操作第一个输入框
inputs[0].send_keys("selenium")

3.5 Link Text ​

python
element = driver.find_elements(By.LINK_TEXT, "link_text")

特点

Link Text 的值有的时候存在多个，使用时需要切片处理。

Link Text 的值是 a 标签的链接文本，示例：下面的链接文本为 新闻

html
<a href="https://news.baidu.com" target="_blank">新闻</a>

Link Text 使用示例：

python
drive.find_element(By.LINK_TEXT, "新闻").click()

3.6 Partial Link Text ​

python
element = driver.find_element(By.PARTIAL_LINK_TEXT, "partial_link_text")

特点

Partial Link Text 是链接文本的模糊匹配，只要包含指定文本就能匹配到。

适用于链接文本较长或者动态变化的情况。

示例：下面的链接可以用部分文本 百度 匹配

html
<a href="https://www.baidu.com">百度一下，你就知道</a>

使用示例：

python
# 点击包含"百度"文本的链接
driver.find_element(By.PARTIAL_LINK_TEXT, "百度").click()

3.7 XPath ​

python
element = driver.find_element(By.XPATH, "xpath")

特点

XPath 是一种非常灵活的定位方式，可以通过元素的路径、属性、文本等多种方式来定位元素。 缺点是性能相对较差，且如果页面结构变化，XPath 可能会失效。

常用的 XPath 语法：

  • //标签名 - 选择所有该标签的元素
  • //标签名[@属性='值'] - 选择具有指定属性值的元素
  • //标签名[text()='文本'] - 选择具有指定文本的元素
  • //*[@属性='值'] - 选择任意标签具有指定属性值的元素

示例：

html
<div class="search-box">
    <input type="text" id="search-input">
    <button class="search-btn">搜索</button>
</div>

使用示例：

python
# 通过属性定位
search_input = driver.find_element(By.XPATH, "//input[@id='search-input']")
# 通过文本定位
search_button = driver.find_element(By.XPATH, "//button[text()='搜索']")

浏览器快速方式

image-20250124184606132

3.8 CSS Selector ​

python
element = driver.find_element(By.CSS_SELECTOR, "css_selector")

特点

CSS Selector 是一种灵活且高效的定位方式，性能比 XPath 好。 可以通过元素的 id、class、属性等进行定位。

常用的 CSS 选择器语法：

  • #id - 选择指定 id 的元素
  • .class - 选择指定 class 的元素
  • 标签名 - 选择指定标签的元素
  • [属性='精准值'] - 选择具有指定属性值的元素
  • [属性*='模糊值'] - 选择具有指定属性值的元素
  • [属性^='开头值'] - 选择具有指定属性值开头的元素
  • [属性$='结尾值'] - 选择具有指定属性值结尾的元素

示例：

html
<div class="search-container">
    <input type="text" id="search" class="search-input">
    <button class="btn-primary search-btn">搜索</button>
</div>

使用示例：

python
# 通过 id 定位
search_input = driver.find_element(By.CSS_SELECTOR, "#search")
# 通过 class 定位
search_input = driver.find_element(By.CSS_SELECTOR, ".search-input")
# 通过多个 class 组合定位
search_button = driver.find_element(By.CSS_SELECTOR, ".btn-primary.search-btn")
# 通过标签定位  
search_input = driver.find_element(By.CSS_SELECTOR, "input")
# 通过属性定位
search_input = driver.find_element(By.CSS_SELECTOR, "[type='text']")

浏览器快速方式

image-20250124182132173

4、 四开浏览器实战 ​

python
import threading
import os.path
from selenium import webdriver  # 用于操作浏览器
from selenium.webdriver.chrome.options import Options  # 用于设置谷歌浏览器
from selenium.webdriver.chrome.service import Service  # 用于管理谷歌驱动


class Browser:
    def __init__(self, x, y):
        self.x = x
        self.y = y

    def setup(self):
        option = Options()
        option.add_argument('--no-sandbox')
        option.add_experimental_option('detach', True)
        chromedriver_path = os.path.join(os.path.dirname(__file__), 'chromedriver')
        service = Service(chromedriver_path)
        drive = webdriver.Chrome(options=option, service=service)
        drive.implicitly_wait(30)
        drive.get("https://www.baidu.com")
        drive.set_window_position(self.x, self.y)
        drive.set_window_size(200, 400)
        return drive


browser0 = Browser(0, 0)
browser1 = Browser(500, 0)
browser2 = Browser(0, 500)
browser3 = Browser(500, 500)

threading.Thread(target=browser0.setup).start()
threading.Thread(target=browser1.setup).start()
threading.Thread(target=browser2.setup).start()
threading.Thread(target=browser3.setup).start()