Selenium WebDriver测试举例 -- Antd DragSortTable

在Web应用中，可拖拽列表组件提供了极佳的用户体验，允许用户通过拖放操作来重新排序列表项。Ant Design (Antd) 是一个流行的React UI库，它提供了一个功能丰富的可拖拽列表组件：DragSortTable。本文将演示如何使用Selenium WebDriver对Antd Pro的DragSortTable组件进行自动化测试，确保其拖拽功能按预期工作。

测试目标 🎯

测试Antd的DragSortTable组件时，我们的目标是验证是否可以通过拖拽操作来改变列表项的顺序。具体来说，我们将执行以下步骤：

定位到可拖拽的列表项。
执行拖拽操作，改变列表项的顺序。
验证列表项的顺序是否已按照拖拽后的顺序进行了更新。

测试环境准备 🛠️

安装Selenium：确保已安装Selenium库。
bash 复制代码
```
pip install selenium
```
下载WebDriver：根据你使用的浏览器类型（如Chrome、Firefox等），从相应的官方网站下载WebDriver。
运行Antd Pro项目：确保你有一个运行中的Antd Pro项目，且其中包含DragSortTable组件。

编写测试脚本 📝

接下来，我们将编写一个Selenium测试脚本，模拟用户拖拽列表项的操作。

步骤 1: 初始化WebDriver

首先，我们需要创建一个WebDriver实例，并打开Antd Pro的DragSortTable组件所在的页面。

python 复制代码

from selenium import webdriver

driver = webdriver.Chrome()  # 或使用其他浏览器
driver.get("http://localhost:8000/path/to/drag-sort-table")  # Antd Pro拖拽列表页面的URL

步骤 2: 定位可拖拽的列表项

使用Selenium的定位功能找到我们想要拖拽的列表项。通常，可拖拽的列表项会有一个特定的类名或ID。

python 复制代码

from selenium.webdriver.common.action_chains import ActionChains

# 假设第一个和第二个列表项的选择器为.item-0和.item-1
source_element = driver.find_element_by_css_selector(".item-0")
target_element = driver.find_element_by_css_selector(".item-1")

步骤 3: 执行拖拽操作

使用ActionChains模拟拖拽操作。

python 复制代码

actions = ActionChains(driver)
actions.drag_and_drop(source_element, target_element).perform()

一般来说，拖拽完成之后，前端会发送一个post请求将最新顺序上报给后端，而后端会返回排序之后的新的列表数据。这就要求使用Selenium WebDriver检测HTTP请求。因此，在自动化测试中，除了验证UI的变化，有时还需要验证后台是否正确处理了这些操作。不过，直接通过Selenium WebDriver检测HTTP请求较为复杂，因为WebDriver主要关注于浏览器端的行为模拟和状态检测。为了实现这一需求，我们可以采用以下方法：

方法：使用浏览器开发者工具API（推荐Chrome DevTools Protocol）

某些浏览器，如Chrome，提供了一套开发者工具API（Chrome DevTools Protocol，简称CDP），允许我们检测浏览器的网络活动。Selenium 4及以上版本开始支持与CDP的集成，使我们能够捕获和分析HTTP请求。

步骤 3.1：捕获HTTP请求

在执行拖拽操作后，我们可以使用CDP来监听网络请求，并检测是否发送了特定的HTTP请求。

python 复制代码

from selenium.webdriver import Chrome
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from webdriver_manager.chrome import ChromeDriverManager

driver = Chrome(service=ChromeService(ChromeDriverManager().install()))

# 启用Network域
driver.execute_cdp_cmd('Network.enable', {})

# 设置网络请求的监听
def request_listener(request):
    print("Request URL:", request['request']['url'])
    # 这里可以添加更多的逻辑来检查请求的URL、方法等

driver.execute_cdp_cmd('Network.setRequestInterception', {
    'patterns': [{'urlPattern': '*', 'resourceType': 'XHR', 'interceptionStage': 'HeadersReceived'}]
})
driver.request_interceptor = request_listener

# 执行拖拽操作...

步骤 3.2：等待请求完成

由于网络请求是异步的，我们需要确保在验证列表顺序变化之前，特定的HTTP请求已经成功完成。这通常需要在测试脚本中实现逻辑等待，例如使用time.sleep()简单等待，或更好的是，使用WebDriverWait等待特定条件的满足。

python 复制代码

import time

# 简单等待示例
time.sleep(5)  # 等待5秒，确保请求完成

# 或使用WebDriverWait等待页面元素状态变化作为请求完成的标志

步骤 4: 验证列表项顺序变化

拖拽操作完成后，我们需要验证列表项的顺序是否发生了变化。这通常需要根据你的具体实现来编写相应的验证逻辑。

python 复制代码

# 验证第一个列表项是否已经变为之前的第二个列表项
# 注意：这里的验证逻辑依赖于你的具体实现，可能需要调整
new_first_item = driver.find_element_by_css_selector(".item-0")
assert new_first_item.text == target_element.text

步骤 5: 清理测试环境

测试完成后，别忘了关闭浏览器。

python 复制代码

driver.quit()

结语 🌟

通过上述步骤，我们演示了如何使用Selenium WebDriver对Antd Pro的DragSortTable组件进行自动化测试。这只是Selenium自动化测试能力的冰山一角。Selenium提供了丰富的API来支持复杂的Web应用测试，包括但不限于表单提交、弹窗处理、异步内容等。熟练掌握Selenium WebDriver，可以大大提高Web应用的测试效率和质量。希望本文能够为你在自动化测试的旅程上提供一些帮助和启发。