一文带你深入浅出 Web 的自动化测试工具 Selenium 4.xx【建议收藏】

一、Selenium 简介

Selenium 是一个强大的开源自动化测试工具，广泛用于 Web 应用的自动化测试和爬虫开发。随着 Selenium 4.xx 的发布，工具的功能和性能得到了进一步增强，新增了支持 Chrome DevTools 协议、相对定位等新特性，大大提升了 Web 测试的灵活性和可操作性。

本文将带你深入浅出地了解 Selenium 4.xx 的核心功能与使用方法，并通过丰富的代码示例帮助你掌握如何进行自动化测试。

二、Selenium 4.xx 新特性

2.1 支持 Chrome DevTools 协议

Selenium 4.xx 支持 Chrome DevTools 协议（CDP），这使得开发者可以更加方便地进行浏览器的调试操作，例如捕获网络请求、监控性能等。

2.2 相对定位（Relative Locators）

Selenium 4 提供了相对定位功能，使得测试人员可以根据其他元素的位置来定位目标元素。这对复杂页面中的元素选择更加直观和高效。

2.3 更加简化的 API

Selenium 4 重新设计了部分 API，使得代码更加简洁直观，开发体验更加友好。

三、Selenium 环境搭建

3.1 安装 Selenium

首先，你需要确保已安装了 Python 及其包管理工具 pip，然后通过以下命令安装 Selenium：

pip install selenium

3.2 配置 WebDriver

Selenium 依赖于 WebDriver 与不同浏览器进行交互。我们以 Chrome 为例，首先需要下载并配置 ChromeDriver。

1. 下载 ChromeDriver：ChromeDriver 下载地址
2. 将 chromedriver 添加到系统路径或直接指定路径。

3.3 示例：启动 Chrome 浏览器

以下是使用 Selenium 4.xx 启动 Chrome 浏览器并访问某个 URL 的示例代码：

from selenium import webdriver

# 指定 ChromeDriver 路径
driver = webdriver.Chrome(executable_path='/path/to/chromedriver')

# 访问指定的网页
driver.get("https://www.example.com")

# 输出当前页面标题
print(driver.title)

# 关闭浏览器
driver.quit()

四、常用操作示例

4.1 定位元素

Selenium 提供了多种定位方式，包括 id、name、class、tag、xpath 和 css selector 等。以下是一些常见的定位示例：

# 通过 ID 定位元素
element = driver.find_element_by_id("element_id")

# 通过 Name 定位元素
element = driver.find_element_by_name("element_name")

# 通过 Xpath 定位元素
element = driver.find_element_by_xpath("//div[@class='example']")

# 通过 CSS 选择器定位元素
element = driver.find_element_by_css_selector(".example-class")

4.2 元素交互

Selenium 允许与网页元素进行交互，例如点击按钮、输入文本等。以下是一些常见的交互操作：

# 输入文本
input_element = driver.find_element_by_id("input_field")
input_element.send_keys("Hello, Selenium!")

# 点击按钮
button_element = driver.find_element_by_id("submit_button")
button_element.click()

# 清除文本框内容
input_element.clear()

4.3 使用相对定位

相对定位是 Selenium 4.xx 中的新功能，允许根据其他元素的相对位置来定位元素：

from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with

# 定位 "Submit" 按钮，位于某个特定元素的右边
submit_button = driver.find_element(locate_with(By.TAG_NAME, "button").to_right_of(By.ID, "other_element"))

# 点击相对定位到的按钮
submit_button.click()

4.4 截图功能

Selenium 允许自动化脚本在测试过程中对网页进行截图：

# 截取当前页面并保存为 screenshot.png
driver.save_screenshot('screenshot.png')

4.5 等待元素加载

在某些情况下，网页中的元素可能并未在脚本执行的瞬间加载完成，因此我们需要显式等待某些条件的满足。Selenium 提供了两种等待方式：显式等待 和 隐式等待。

4.5.1 隐式等待

隐式等待是在代码执行时，允许 WebDriver 等待一定时间以确保元素加载完成。

# 设置隐式等待时间为 10 秒
driver.implicitly_wait(10)

4.5.2 显式等待

显式等待更加灵活，它允许你定义某个条件，并等待该条件成立。

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 显式等待某个元素出现
element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "my_element"))
)

五、WebDriver 与 DevTools 实例

Selenium 4 引入了与 Chrome DevTools 协议的集成，支持调试浏览器的网络请求、日志等。以下是一个使用 DevTools 获取网络请求的示例：

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options

options = Options()
options.add_experimental_option("w3c", False)
service = Service('/path/to/chromedriver')

driver = webdriver.Chrome(service=service, options=options)
driver.get("https://www.example.com")

# 开启 DevTools 协议
devtools = driver.execute_cdp_cmd('Network.enable', {})

# 监听网络请求
def log_request(request):
    print(f"Request URL: {request['request']['url']}")

driver.execute_cdp_cmd("Network.requestWillBeSent", {"callback": log_request})
driver.quit()

六、Selenium 与 CI/CD 集成

Selenium 非常适合与持续集成（CI）工具集成，用于自动化测试流程。以下是将 Selenium 测试集成到 Jenkins 的简单步骤：

1. 在 Jenkins 中配置 Selenium 测试项目。
2. 在 Jenkinsfile 中定义构建和测试步骤：

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                // 编译项目
                sh 'mvn clean package'
            }
        }
        stage('Test') {
            steps {
                // 运行 Selenium 测试
                sh 'python selenium_test.py'
            }
        }
    }
}

3. 在 Jenkins 中配置浏览器的运行环境，确保 Jenkins 能够正确执行 Selenium 测试。

七、实战示例：自动化测试电商网站登录

接下来，我们将通过一个实际的电商网站登录测试，展示如何使用 Selenium 编写自动化测试脚本。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 配置 WebDriver
driver = webdriver.Chrome(executable_path='/path/to/chromedriver')

# 访问电商网站登录页面
driver.get("https://www.ecommerce.com/login")

# 输入用户名和密码
username_field = driver.find_element(By.NAME, "username")
password_field = driver.find_element(By.NAME, "password")

username_field.send_keys("testuser")
password_field.send_keys("testpassword")

# 提交登录表单
login_button = driver.find_element(By.ID, "loginButton")
login_button.click()

# 等待登录成功后跳转至用户首页
WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "userDashboard"))
)

# 验证登录成功
dashboard = driver.find_element(By.ID, "userDashboard")
assert "Welcome, testuser" in dashboard.text

# 关闭浏览器
driver.quit()

八、总结

Selenium 4.xx 是一个功能强大且易于使用的 Web 自动化测试工具，特别是它的新特性如 Chrome DevTools 协议和相对定位功能，为开发者和测试人员提供了更大的灵活性。本文通过丰富的代码示例，详细介绍了 Selenium 4.xx 的安装配置、常用操作及其高级功能。

无论是 Web 自动化测试、CI/CD 集成，还是实际项目中的应用，Selenium 都能帮助开发者快速实现自动化测试，大幅提升测试效率。如果你对自动化测试有需求，Selenium 4.xx 无疑是一个值得深入学习和掌握的工具。