1. 项目概述为什么我们需要自动化测试ChatTTS WebUI最近在折腾一个基于ChatTTS的语音合成项目前端用WebUI做了个交互界面方便调整音色、语速和输入各种文本。功能上线后最头疼的问题来了每次更新模型、修改前端逻辑或者调整后端API都得手动点一遍各个功能测试不同音色合成效果、极端语速下的表现还有各种“奇葩”文本输入会不会导致服务崩溃。手动测试不仅耗时而且极不靠谱——人的注意力会疲劳很难保证每次测试的覆盖率和一致性。尤其是验证“鲁棒性”的时候你总不可能天天自己编一堆乱码、超长文本、特殊字符去点提交按钮吧于是一个自动化测试方案就变得非常必要。Selenium作为老牌的Web自动化测试工具自然成了首选。它能够模拟真实用户操作浏览器点击、输入、下拉选择然后获取结果进行断言。这个项目的核心目标就是编写一套Selenium脚本对ChatTTS WebUI的关键功能点进行批量、重复、可回归的验证确保核心体验的稳定性。这不仅仅是“写个脚本点按钮”更涉及到测试用例的设计、异常场景的模拟、测试结果的自动化校验以及测试报告的生成是一套完整的小型测试工程实践。2. 测试环境搭建与核心工具选型工欲善其事必先利其器。在开始编写测试脚本之前需要先把环境和工具链准备好。这里的选择基于稳定、易维护和团队协作的考虑。2.1 浏览器与WebDriver配置Selenium需要对应的浏览器驱动WebDriver才能控制浏览器。Chrome浏览器及其对应的ChromeDriver在稳定性和社区支持上表现最好是我们的首选。首先需要确定本地Chrome浏览器的版本。在浏览器地址栏输入chrome://version/即可查看。然后去ChromeDriver的官方下载站点或国内镜像站下载与之版本号完全匹配的驱动。这里有个关键点主版本号必须一致。例如Chrome版本是 124.0.6367.91那么ChromeDriver也应下载124.x.x.x版本。下载后将chromedriver可执行文件放在一个固定目录并将该目录添加到系统的PATH环境变量中。这是最通用的做法可以让Selenium在任意位置启动。另一种方式是在代码中指定驱动路径但不利于脚本的跨环境迁移。注意务必关闭所有正在运行的Chrome实例否则WebDriver可能无法启动新的浏览器进程。同时建议禁用Chrome的自动更新或者在CI/CD流水线中动态下载匹配版本的Driver以避免版本不匹配导致的脚本突然失败。2.2 Python环境与依赖库安装我们使用Python作为脚本语言因为它语法简洁Selenium的Python绑定也非常成熟。建议使用虚拟环境如venv或conda来隔离项目依赖。核心的Python库就两个selenium: Web自动化测试的核心库。pytest: 测试框架。它比unittest更灵活夹具fixture功能强大报告美观是我们组织测试用例和运行测试的骨架。通过pip安装pip install selenium pytest为了生成更美观的测试报告还可以安装pytest-html插件pip install pytest-html2.3 ChatTTS WebUI的本地部署与访问自动化测试需要一个稳定的测试目标。通常我们会在本地或测试服务器上部署一个专用于测试的ChatTTS WebUI实例。确保其服务地址例如http://localhost:7860是固定的并且网络可通。在开始编写测试脚本前手动访问这个地址熟悉一下WebUI的界面布局音色选择下拉框的HTMLid或name属性是什么语速调节滑块或输入框如何定位文本输入区域是普通的textarea还是富文本编辑器合成按钮的标识是什么音频播放器或结果展示区域在哪里这些信息需要通过浏览器的开发者工具F12来查看。我们测试脚本的所有“点击”和“输入”操作都依赖于这些页面元素的定位信息。3. 测试用例设计与Selenium脚本架构自动化测试不是漫无目的地操作而是有计划的验证。我们需要先设计测试用例再将其转化为脚本结构。3.1 核心测试维度拆解围绕“音色/语速/文本鲁棒性”我们可以拆解出以下几个测试维度音色选择功能验证所有可用的音色选项都能被正常选中并且前端UI状态如下拉框显示值能正确更新。语速参数边界与常规值验证语速输入框或滑块能接受有效范围内的值如0.5-2.0并对边界值最小值、最大值和非法值负数、非数字、超范围值做出正确处理如前端校验、后端拒绝。文本输入鲁棒性常规文本中英文混合、带标点的长段落。边界文本空文本、极短文本一个字、超长文本超过模型或前端限制。特殊字符包含Emoji、HTML标签、SQL注入片段、脚本片段等检查是否被安全过滤或导致错误。格式文本包含换行符\n、制表符\t等检查合成结果是否保留或正确处理了这些格式。端到端合成流程组合正常的音色、语速和文本点击合成验证是否能成功返回音频结果例如页面出现音频播放器元素或者有“合成成功”的提示。3.2 基于pytest的脚本架构我们将使用pytest来组织测试。一个清晰的结构有助于维护和扩展。chattts_webui_test/ ├── conftest.py # 全局pytest配置和共享fixture ├── pages/ # 页面对象模型Page Object Model │ └── chattts_page.py # 封装WebUI页面的所有元素和操作 ├── test_data/ # 测试数据 │ └── test_texts.py # 存放各种测试用的文本 ├── tests/ # 测试用例 │ ├── test_voice.py # 音色相关测试 │ ├── test_speed.py # 语速相关测试 │ ├── test_text_robustness.py # 文本鲁棒性测试 │ └── test_e2e.py # 端到端流程测试 └── reports/ # 测试报告输出目录自动生成conftest.py是关键它定义了pytest的fixture比如启动和关闭浏览器import pytest from selenium import webdriver from selenium.webdriver.chrome.options import Options pytest.fixture(scopesession) def driver(): 启动一个Chrome浏览器实例整个测试会话只启动一次 chrome_options Options() chrome_options.add_argument(--headless) # 无头模式不显示GUI适合CI环境 chrome_options.add_argument(--no-sandbox) chrome_options.add_argument(--disable-dev-shm-usage) # 初始化驱动 driver webdriver.Chrome(optionschrome_options) driver.implicitly_wait(10) # 设置隐式等待全局生效 driver.maximize_window() yield driver # 测试结束后关闭浏览器 driver.quit() pytest.fixture def chattts_page(driver): 访问ChatTTS WebUI并返回页面对象 from pages.chattts_page import ChatTTSPage page ChatTTSPage(driver) page.open(http://localhost:7860) return pagepages/chattts_page.py实现了页面对象模型POM将页面元素和操作封装起来使测试脚本更清晰元素定位变更时只需修改这一处from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC class ChatTTSPage: def __init__(self, driver): self.driver driver self.wait WebDriverWait(driver, 10) def open(self, url): self.driver.get(url) # 元素定位器 VOICE_SELECTOR (By.ID, voice-select) # 假设音色下拉框的id是voice-select SPEED_INPUT (By.ID, speed-input) # 语速输入框 TEXT_AREA (By.ID, text-input) # 文本输入框 SYNTHESIZE_BTN (By.ID, synthesize-btn) # 合成按钮 AUDIO_PLAYER (By.ID, audio-player) # 音频播放器 ERROR_MSG (By.CLASS_NAME, error-message) # 错误信息提示 # 页面操作方法 def select_voice(self, voice_name): 选择音色 from selenium.webdriver.support.ui import Select voice_select self.wait.until(EC.presence_of_element_located(self.VOICE_SELECTOR)) Select(voice_select).select_by_visible_text(voice_name) def set_speed(self, speed_value): 设置语速 speed_input self.wait.until(EC.element_to_be_clickable(self.SPEED_INPUT)) speed_input.clear() speed_input.send_keys(str(speed_value)) def input_text(self, text): 输入文本 text_area self.wait.until(EC.element_to_be_clickable(self.TEXT_AREA)) text_area.clear() text_area.send_keys(text) def click_synthesize(self): 点击合成按钮 synth_btn self.wait.until(EC.element_to_be_clickable(self.SYNTHESIZE_BTN)) synth_btn.click() def is_audio_player_present(self): 检查音频播放器是否出现合成成功 try: self.wait.until(EC.presence_of_element_located(self.AUDIO_PLAYER)) return True except: return False def get_error_message(self): 获取错误提示信息 try: return self.wait.until(EC.presence_of_element_located(self.ERROR_MSG)).text except: return None4. 核心测试脚本实现与详解有了稳固的基础设施我们就可以开始编写具体的测试用例了。每个测试文件对应一个测试维度。4.1 音色选择功能测试 (test_voice.py)这个测试的目标是遍历所有可用的音色选项确保UI能正确响应选择操作。import pytest from test_data.test_texts import NORMAL_TEXT class TestVoiceSelection: 测试音色选择功能 pytest.mark.parametrize(voice_name, [默认音色, 甜美女声, 沉稳男声, 卡通音效]) # 假设有这些音色 def test_select_each_voice(self, chattts_page, voice_name): 测试选择每一个音色并验证UI状态 page chattts_page # 1. 选择指定音色 page.select_voice(voice_name) # 2. 验证下拉框当前选中的值是否正确需要根据实际UI获取选中值的方法 # 这里假设通过Select对象的first_selected_option属性验证 from selenium.webdriver.support.ui import Select voice_select_element page.driver.find_element(*page.VOICE_SELECTOR) selected_option Select(voice_select_element).first_selected_option assert selected_option.text voice_name, f音色选择失败期望{voice_name}实际{selected_option.text} # 3. 可选输入固定文本点击合成确保不因音色切换而报错基础流程验证 page.input_text(NORMAL_TEXT) page.click_synthesize() # 不严格断言音频一定生成因为可能涉及网络或后端延迟但至少不应立即报错 # 可以断言错误信息元素没有出现 assert page.get_error_message() is None, f选择音色{voice_name}后合成出现错误{page.get_error_message()}实操心得音色测试的关键在于元素状态的验证。仅仅点击了下拉框还不够必须断言前端UI确实更新到了我们选择的选项。有时候前端框架如Vue、React的数据绑定有延迟可能需要加入短暂的显式等待time.sleep(0.5)或等待某个特定条件如选项元素的selected属性变化。4.2 语速参数测试 (test_speed.py)语速测试要覆盖有效值、边界值和无效值。import pytest class TestSpeedParameter: 测试语速参数输入 # 测试有效值常规值和边界值 pytest.mark.parametrize(valid_speed, [0.5, 0.8, 1.0, 1.5, 2.0]) def test_valid_speed_input(self, chattts_page, valid_speed): 测试输入有效的语速值 page chattts_page page.set_speed(valid_speed) # 验证输入框的值是否正确可能需要从input的value属性获取 speed_input page.driver.find_element(*page.SPEED_INPUT) input_value speed_input.get_attribute(value) # 注意前端可能对浮点数进行格式化所以用近似比较 assert abs(float(input_value) - valid_speed) 0.01, f语速输入值未正确更新期望{valid_speed}实际{input_value} # 测试无效值负数、零、非数字、超范围 pytest.mark.parametrize(invalid_speed, expected_behavior, [ (-0.1, error_or_default), # 可能报错或重置为最小值 (0, error_or_default), # 0可能无效 (abc, error_or_clear), # 非数字可能清空输入或报错 (3.0, error_or_clamp) # 超范围可能报错或自动限制为最大值 ]) def test_invalid_speed_input(self, chattts_page, invalid_speed, expected_behavior): 测试输入无效的语速值并验证前端或后端的处理行为 page chattts_page original_value page.driver.find_element(*page.SPEED_INPUT).get_attribute(value) page.set_speed(invalid_speed) # 行为验证是一个难点需要根据产品实际逻辑来断言 current_value page.driver.find_element(*page.SPEED_INPUT).get_attribute(value) error_msg page.get_error_message() if expected_behavior error_or_default: # 要么出现错误提示要么值被重置为一个默认有效值如1.0 assert error_msg is not None or (current_value ! str(invalid_speed) and float(current_value) 0.5) elif expected_behavior error_or_clear: # 要么出现错误提示要么输入框被清空值为空 assert error_msg is not None or current_value elif expected_behavior error_or_clamp: # 要么出现错误提示要么值被自动修正到边界如2.0 assert error_msg is not None or (current_value 2.0) # 如果产品设计是输入非法值后直接忽略保持原值则断言current_value original_value注意事项无效值测试是探索性的因为产品如何处理非法输入可能有多种设计。测试脚本需要能兼容不同的处理方式。最好的方法是先与开发人员确认产品规格或者通过手动测试观察行为再将观察到的行为转化为自动化断言。4.3 文本鲁棒性测试 (test_text_robustness.py)这是测试的核心和难点需要准备丰富的测试数据。 首先在test_data/test_texts.py中准备数据# 常规文本 NORMAL_TEXT 这是一段用于测试的中文文本包含标点符号。This is an English sentence for testing. # 边界文本 EMPTY_TEXT SINGLE_CHAR_TEXT A LONG_TEXT 很长很长很长... * 1000 # 构造一个超长字符串 # 特殊字符文本 SPECIAL_CHARS_TEXT 测试脚本alert(xss)/脚本 SQL 注入测试 HTML_TEXT h1标题/h1p段落/p SQL_INJECTION_TEXT 1 OR 11 # 格式文本 TEXT_WITH_NEWLINES 第一行\n第二行\n\t第三行带制表符然后编写测试用例import pytest from test_data.test_texts import * class TestTextRobustness: 测试文本输入的鲁棒性 pytest.mark.parametrize(test_text, description, [ (NORMAL_TEXT, 常规中英文混合文本), (EMPTY_TEXT, 空文本), (SINGLE_CHAR_TEXT, 单字符文本), (LONG_TEXT, 超长文本), (SPECIAL_CHARS_TEXT, 包含特殊字符和Emoji的文本), (HTML_TEXT, 包含HTML标签的文本), (SQL_INJECTION_TEXT, 类SQL注入文本), (TEXT_WITH_NEWLINES, 包含换行和制表符的文本) ]) def test_various_text_input(self, chattts_page, test_text, description): 批量测试各种文本输入主要验证前端是否接受输入以及合成按钮是否可点击 page chattts_page page.input_text(test_text) # 验证文本是否成功输入到文本框 actual_text page.driver.find_element(*page.TEXT_AREA).get_attribute(value) # 对于空文本actual_text可能是空字符串 if test_text : assert actual_text , f空文本输入失败实际内容{actual_text} else: # 对于非空文本前端可能会做trim或转义所以不能简单断言完全相等 # 这里我们至少断言输入框不是空的除非是空文本测试并且没有因为输入而立即报错 assert actual_text is not None, 文本输入后输入框值为None # 更稳健的做法尝试点击合成按钮看是否触发前端校验错误 page.click_synthesize() # 给一个短暂的等待让可能的错误信息出现 import time time.sleep(1) error_msg page.get_error_message() # 对于明显非法的输入如超长、危险字符产品可能设计为不允许合成此时出现错误信息是符合预期的。 # 因此这里的断言需要更精细。我们可以先定义一个“预期可合成”的文本列表。 # 为了简化这个测试我们只验证“输入操作本身不会导致页面崩溃或前端JS报错”。 # 更严格的断言可以在下面的test_text_synthesis_result中做。 def test_text_synthesis_result(self, chattts_page): 针对常规文本验证合成流程能走通并返回音频 page chattts_page page.input_text(NORMAL_TEXT) page.select_voice(默认音色) page.set_speed(1.0) page.click_synthesize() # 等待并断言音频播放器元素出现表示合成成功 assert page.is_audio_player_present(), 常规文本合成失败未检测到音频播放器 # 可以进一步验证音频元素的src属性是否包含有效的音频URL如blob:http或.wav后缀 audio_element page.driver.find_element(*page.AUDIO_PLAYER) src audio_element.get_attribute(src) assert src and (src.startswith(blob:) or .wav in src or .mp3 in src), f音频源地址异常{src}踩坑记录文本鲁棒性测试中最容易遇到异步加载和动态元素的问题。点击合成按钮后音频的生成和加载是异步的。is_audio_player_present()方法中的WebDriverWait就是用来处理这个的。但有时候即使元素出现了其src属性可能还是空的或无效的需要额外等待属性变化。可以考虑使用expected_conditions中的element_attribute_to_include来等待src属性包含特定字符串。4.4 端到端流程与组合测试 (test_e2e.py)最后我们需要模拟真实用户场景进行组合测试。import pytest from test_data.test_texts import NORMAL_TEXT class TestEndToEnd: 端到端流程测试 pytest.mark.parametrize(voice, speed, [ (默认音色, 1.0), (甜美女声, 0.8), (沉稳男声, 1.5), # 可以组合更多边界值如 (卡通音效, 2.0) ]) def test_synthesis_with_different_settings(self, chattts_page, voice, speed): 使用不同的音色和语速组合进行合成测试 page chattts_page page.select_voice(voice) page.set_speed(speed) page.input_text(NORMAL_TEXT) page.click_synthesize() # 核心断言合成成功有音频元素 assert page.is_audio_player_present(), f组合测试失败音色{voice}, 语速{speed} # 高级验证可以尝试播放一下音频通过JS触发play事件并监听是否有error事件 # 但这需要注入JavaScript且受浏览器自动播放策略限制复杂度较高。 # 一个更简单的方法是检查音频的duration属性是否大于0但同样需要音频加载完成。 # 这里我们暂时只做元素存在性检查作为流程通过的标志。5. 测试执行、报告生成与持续集成脚本写好了如何运行并得到清晰的结果5.1 使用pytest运行测试并生成报告在项目根目录下执行以下命令# 运行所有测试 pytest # 运行特定测试文件 pytest tests/test_voice.py # 运行带标记的测试例如标记为‘slow’的测试 pytest -m slow # 运行测试并生成HTML报告 pytest --htmlreports/report.html --self-contained-html--self-contained-html参数会将CSS和图片内嵌到HTML中生成一个独立的报告文件。打开reports/report.html你可以看到清晰的测试通过/失败列表、每个测试用例的执行时间以及失败时的错误信息和截图需要额外配置。5.2 添加失败截图功能在conftest.py中添加一个fixture或使用pytest的钩子函数可以在测试失败时自动截图这对于调试WebUI测试至关重要。import pytest from datetime import datetime pytest.hookimpl(tryfirstTrue, hookwrapperTrue) def pytest_runtest_makereport(item, call): 在测试执行完成后制作报告如果失败则截图 outcome yield report outcome.get_result() if report.when call and report.failed: # 获取测试用例中的driver fixture driver_fixture item.funcargs.get(driver) if driver_fixture: # 生成带时间戳的截图文件名 timestamp datetime.now().strftime(%Y%m%d_%H%M%S) screenshot_name fscreenshot_failure_{item.name}_{timestamp}.png screenshot_path f./reports/{screenshot_name} driver_fixture.save_screenshot(screenshot_path) # 将截图路径添加到测试报告中 report.extra [(image/png, screenshot_path)] print(f\n测试失败截图已保存至{screenshot_path})5.3 集成到持续集成CI流水线自动化测试的价值在于持续运行。你可以将这套测试集成到GitHub Actions、GitLab CI或Jenkins中。一个简单的GitHub Actions工作流示例 (.github/workflows/chattts-ui-test.yml)name: ChatTTS WebUI Automation Test on: [push, pull_request] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - name: Set up Python uses: actions/setup-pythonv4 with: python-version: 3.9 - name: Install dependencies run: | pip install -r requirements.txt # 你需要创建requirements.txt文件 sudo apt-get update sudo apt-get install -y wget unzip # 下载与Ubuntu默认Chrome版本匹配的ChromeDriver wget -q https://storage.googleapis.com/chrome-for-testing-public/latest/linux64/chromedriver-linux64.zip unzip chromedriver-linux64.zip sudo mv chromedriver-linux64/chromedriver /usr/local/bin/ chmod x /usr/local/bin/chromedriver - name: Start ChatTTS WebUI (假设有启动脚本) run: | # 这里需要启动你的测试环境ChatTTS WebUI服务 # 例如python app.py # 并等待服务就绪例如使用 sleep 或 curl 轮询 echo 假设服务已在 localhost:7860 启动 - name: Run tests with pytest run: | pytest --htmlreports/report.html --self-contained-html - name: Upload test report uses: actions/upload-artifactv3 if: always() with: name: ui-test-report path: reports/持续集成心得在CI环境中务必使用无头模式(--headless)。确保测试环境WebUI服务在测试开始前已经启动并可用。测试失败时的截图和日志是定位问题的关键一定要配置好归档步骤。6. 常见问题排查与脚本优化技巧在实际运行中你肯定会遇到各种问题。这里记录一些典型的坑和解决方案。6.1 元素定位失败最常见的问题问题NoSuchElementException脚本找不到按钮、输入框。排查页面未加载完成在操作元素前增加等待。优先使用WebDriverWait配合expected_conditions(如EC.element_to_be_clickable)而不是固定的time.sleep。iframe/Shadow DOM如果元素嵌套在iframe或Shadow DOM内需要先切换到对应的上下文。# 切换iframe iframe driver.find_element(By.TAG_NAME, iframe) driver.switch_to.frame(iframe) # 操作iframe内的元素... driver.switch_to.default_content() # 切回来动态ID或类名前端框架可能生成随机的属性值。改用更稳定的定位方式如By.XPATH结合文本内容或相对位置。# 不推荐使用可能变化的id # driver.find_element(By.ID, button-12345) # 推荐使用包含部分文本的XPath driver.find_element(By.XPATH, //button[contains(text(), 合成)])页面结构变更这是使用POM页面对象模型的最大好处。当页面元素变更时你只需要更新chattts_page.py文件中的定位器而不需要修改所有测试脚本。6.2 测试不稳定Flaky Tests问题测试有时成功有时失败没有规律。原因与解决网络或后端延迟合成语音需要时间。增加对于结果元素的等待时间并设置合理的超时。# 不好的做法 time.sleep(10) # 固定等待10秒太死板 # 好的做法 WebDriverWait(driver, 15).until( EC.presence_of_element_located((By.ID, audio-player)) )竞态条件在输入文本后立即点击按钮可能前端校验还未完成。可以在关键操作间加入短暂等待或者等待某个特定状态如按钮从禁用变为启用。# 等待合成按钮变为可点击状态假设初始是禁用的 WebDriverWait(driver, 5).until( EC.element_to_be_clickable(page.SYNTHESIZE_BTN) ) page.click_synthesize()浏览器缓存或状态残留确保每个测试用例是独立的。在conftest.py的driverfixture 中使用scopefunction默认让每个测试函数都使用一个新的浏览器会话。或者在测试开始前执行清理操作如driver.delete_all_cookies()和driver.refresh()。6.3 测试数据的管理与参数化当测试用例越来越多测试数据特别是文本最好外部化例如存放在JSON或YAML文件中方便管理和复用。# 例如创建一个 test_data/text_corpus.json [ {category: normal, text: 这是一段普通文本。}, {category: boundary, text: }, ... ]然后在测试中读取这个文件进行参数化。这使你的测试脚本更清晰数据与逻辑分离。6.4 性能与并发考虑如果测试用例很多串行执行会非常耗时。可以考虑使用pytest-xdist插件进行并行测试。pip install pytest-xdist pytest -n auto # 自动检测CPU核心数并行运行但需要注意并行测试时要确保测试环境WebUI服务能处理多个并发请求并且测试用例之间没有共享状态冲突。通常需要为每个测试进程提供独立的用户会话或测试数据。编写和维护Selenium自动化测试脚本是一个需要耐心和细致的工作它不仅仅是“录制回放”。清晰的架构设计、稳定的元素定位策略、合理的等待机制以及对异常情况的妥善处理是构建一套可靠、可维护的WebUI自动化测试套件的关键。这套针对ChatTTS WebUI的测试方案其思路和方法完全可以复用到其他任何Web应用的界面功能测试上。
Selenium自动化测试实战：ChatTTS WebUI鲁棒性测试方案
发布时间：2026/6/26 17:23:59
1. 项目概述为什么我们需要自动化测试ChatTTS WebUI最近在折腾一个基于ChatTTS的语音合成项目前端用WebUI做了个交互界面方便调整音色、语速和输入各种文本。功能上线后最头疼的问题来了每次更新模型、修改前端逻辑或者调整后端API都得手动点一遍各个功能测试不同音色合成效果、极端语速下的表现还有各种“奇葩”文本输入会不会导致服务崩溃。手动测试不仅耗时而且极不靠谱——人的注意力会疲劳很难保证每次测试的覆盖率和一致性。尤其是验证“鲁棒性”的时候你总不可能天天自己编一堆乱码、超长文本、特殊字符去点提交按钮吧于是一个自动化测试方案就变得非常必要。Selenium作为老牌的Web自动化测试工具自然成了首选。它能够模拟真实用户操作浏览器点击、输入、下拉选择然后获取结果进行断言。这个项目的核心目标就是编写一套Selenium脚本对ChatTTS WebUI的关键功能点进行批量、重复、可回归的验证确保核心体验的稳定性。这不仅仅是“写个脚本点按钮”更涉及到测试用例的设计、异常场景的模拟、测试结果的自动化校验以及测试报告的生成是一套完整的小型测试工程实践。2. 测试环境搭建与核心工具选型工欲善其事必先利其器。在开始编写测试脚本之前需要先把环境和工具链准备好。这里的选择基于稳定、易维护和团队协作的考虑。2.1 浏览器与WebDriver配置Selenium需要对应的浏览器驱动WebDriver才能控制浏览器。Chrome浏览器及其对应的ChromeDriver在稳定性和社区支持上表现最好是我们的首选。首先需要确定本地Chrome浏览器的版本。在浏览器地址栏输入chrome://version/即可查看。然后去ChromeDriver的官方下载站点或国内镜像站下载与之版本号完全匹配的驱动。这里有个关键点主版本号必须一致。例如Chrome版本是 124.0.6367.91那么ChromeDriver也应下载124.x.x.x版本。下载后将chromedriver可执行文件放在一个固定目录并将该目录添加到系统的PATH环境变量中。这是最通用的做法可以让Selenium在任意位置启动。另一种方式是在代码中指定驱动路径但不利于脚本的跨环境迁移。注意务必关闭所有正在运行的Chrome实例否则WebDriver可能无法启动新的浏览器进程。同时建议禁用Chrome的自动更新或者在CI/CD流水线中动态下载匹配版本的Driver以避免版本不匹配导致的脚本突然失败。2.2 Python环境与依赖库安装我们使用Python作为脚本语言因为它语法简洁Selenium的Python绑定也非常成熟。建议使用虚拟环境如venv或conda来隔离项目依赖。核心的Python库就两个selenium: Web自动化测试的核心库。pytest: 测试框架。它比unittest更灵活夹具fixture功能强大报告美观是我们组织测试用例和运行测试的骨架。通过pip安装pip install selenium pytest为了生成更美观的测试报告还可以安装pytest-html插件pip install pytest-html2.3 ChatTTS WebUI的本地部署与访问自动化测试需要一个稳定的测试目标。通常我们会在本地或测试服务器上部署一个专用于测试的ChatTTS WebUI实例。确保其服务地址例如http://localhost:7860是固定的并且网络可通。在开始编写测试脚本前手动访问这个地址熟悉一下WebUI的界面布局音色选择下拉框的HTMLid或name属性是什么语速调节滑块或输入框如何定位文本输入区域是普通的textarea还是富文本编辑器合成按钮的标识是什么音频播放器或结果展示区域在哪里这些信息需要通过浏览器的开发者工具F12来查看。我们测试脚本的所有“点击”和“输入”操作都依赖于这些页面元素的定位信息。3. 测试用例设计与Selenium脚本架构自动化测试不是漫无目的地操作而是有计划的验证。我们需要先设计测试用例再将其转化为脚本结构。3.1 核心测试维度拆解围绕“音色/语速/文本鲁棒性”我们可以拆解出以下几个测试维度音色选择功能验证所有可用的音色选项都能被正常选中并且前端UI状态如下拉框显示值能正确更新。语速参数边界与常规值验证语速输入框或滑块能接受有效范围内的值如0.5-2.0并对边界值最小值、最大值和非法值负数、非数字、超范围值做出正确处理如前端校验、后端拒绝。文本输入鲁棒性常规文本中英文混合、带标点的长段落。边界文本空文本、极短文本一个字、超长文本超过模型或前端限制。特殊字符包含Emoji、HTML标签、SQL注入片段、脚本片段等检查是否被安全过滤或导致错误。格式文本包含换行符\n、制表符\t等检查合成结果是否保留或正确处理了这些格式。端到端合成流程组合正常的音色、语速和文本点击合成验证是否能成功返回音频结果例如页面出现音频播放器元素或者有“合成成功”的提示。3.2 基于pytest的脚本架构我们将使用pytest来组织测试。一个清晰的结构有助于维护和扩展。chattts_webui_test/ ├── conftest.py # 全局pytest配置和共享fixture ├── pages/ # 页面对象模型Page Object Model │ └── chattts_page.py # 封装WebUI页面的所有元素和操作 ├── test_data/ # 测试数据 │ └── test_texts.py # 存放各种测试用的文本 ├── tests/ # 测试用例 │ ├── test_voice.py # 音色相关测试 │ ├── test_speed.py # 语速相关测试 │ ├── test_text_robustness.py # 文本鲁棒性测试 │ └── test_e2e.py # 端到端流程测试 └── reports/ # 测试报告输出目录自动生成conftest.py是关键它定义了pytest的fixture比如启动和关闭浏览器import pytest from selenium import webdriver from selenium.webdriver.chrome.options import Options pytest.fixture(scopesession) def driver(): 启动一个Chrome浏览器实例整个测试会话只启动一次 chrome_options Options() chrome_options.add_argument(--headless) # 无头模式不显示GUI适合CI环境 chrome_options.add_argument(--no-sandbox) chrome_options.add_argument(--disable-dev-shm-usage) # 初始化驱动 driver webdriver.Chrome(optionschrome_options) driver.implicitly_wait(10) # 设置隐式等待全局生效 driver.maximize_window() yield driver # 测试结束后关闭浏览器 driver.quit() pytest.fixture def chattts_page(driver): 访问ChatTTS WebUI并返回页面对象 from pages.chattts_page import ChatTTSPage page ChatTTSPage(driver) page.open(http://localhost:7860) return pagepages/chattts_page.py实现了页面对象模型POM将页面元素和操作封装起来使测试脚本更清晰元素定位变更时只需修改这一处from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC class ChatTTSPage: def __init__(self, driver): self.driver driver self.wait WebDriverWait(driver, 10) def open(self, url): self.driver.get(url) # 元素定位器 VOICE_SELECTOR (By.ID, voice-select) # 假设音色下拉框的id是voice-select SPEED_INPUT (By.ID, speed-input) # 语速输入框 TEXT_AREA (By.ID, text-input) # 文本输入框 SYNTHESIZE_BTN (By.ID, synthesize-btn) # 合成按钮 AUDIO_PLAYER (By.ID, audio-player) # 音频播放器 ERROR_MSG (By.CLASS_NAME, error-message) # 错误信息提示 # 页面操作方法 def select_voice(self, voice_name): 选择音色 from selenium.webdriver.support.ui import Select voice_select self.wait.until(EC.presence_of_element_located(self.VOICE_SELECTOR)) Select(voice_select).select_by_visible_text(voice_name) def set_speed(self, speed_value): 设置语速 speed_input self.wait.until(EC.element_to_be_clickable(self.SPEED_INPUT)) speed_input.clear() speed_input.send_keys(str(speed_value)) def input_text(self, text): 输入文本 text_area self.wait.until(EC.element_to_be_clickable(self.TEXT_AREA)) text_area.clear() text_area.send_keys(text) def click_synthesize(self): 点击合成按钮 synth_btn self.wait.until(EC.element_to_be_clickable(self.SYNTHESIZE_BTN)) synth_btn.click() def is_audio_player_present(self): 检查音频播放器是否出现合成成功 try: self.wait.until(EC.presence_of_element_located(self.AUDIO_PLAYER)) return True except: return False def get_error_message(self): 获取错误提示信息 try: return self.wait.until(EC.presence_of_element_located(self.ERROR_MSG)).text except: return None4. 核心测试脚本实现与详解有了稳固的基础设施我们就可以开始编写具体的测试用例了。每个测试文件对应一个测试维度。4.1 音色选择功能测试 (test_voice.py)这个测试的目标是遍历所有可用的音色选项确保UI能正确响应选择操作。import pytest from test_data.test_texts import NORMAL_TEXT class TestVoiceSelection: 测试音色选择功能 pytest.mark.parametrize(voice_name, [默认音色, 甜美女声, 沉稳男声, 卡通音效]) # 假设有这些音色 def test_select_each_voice(self, chattts_page, voice_name): 测试选择每一个音色并验证UI状态 page chattts_page # 1. 选择指定音色 page.select_voice(voice_name) # 2. 验证下拉框当前选中的值是否正确需要根据实际UI获取选中值的方法 # 这里假设通过Select对象的first_selected_option属性验证 from selenium.webdriver.support.ui import Select voice_select_element page.driver.find_element(*page.VOICE_SELECTOR) selected_option Select(voice_select_element).first_selected_option assert selected_option.text voice_name, f音色选择失败期望{voice_name}实际{selected_option.text} # 3. 可选输入固定文本点击合成确保不因音色切换而报错基础流程验证 page.input_text(NORMAL_TEXT) page.click_synthesize() # 不严格断言音频一定生成因为可能涉及网络或后端延迟但至少不应立即报错 # 可以断言错误信息元素没有出现 assert page.get_error_message() is None, f选择音色{voice_name}后合成出现错误{page.get_error_message()}实操心得音色测试的关键在于元素状态的验证。仅仅点击了下拉框还不够必须断言前端UI确实更新到了我们选择的选项。有时候前端框架如Vue、React的数据绑定有延迟可能需要加入短暂的显式等待time.sleep(0.5)或等待某个特定条件如选项元素的selected属性变化。4.2 语速参数测试 (test_speed.py)语速测试要覆盖有效值、边界值和无效值。import pytest class TestSpeedParameter: 测试语速参数输入 # 测试有效值常规值和边界值 pytest.mark.parametrize(valid_speed, [0.5, 0.8, 1.0, 1.5, 2.0]) def test_valid_speed_input(self, chattts_page, valid_speed): 测试输入有效的语速值 page chattts_page page.set_speed(valid_speed) # 验证输入框的值是否正确可能需要从input的value属性获取 speed_input page.driver.find_element(*page.SPEED_INPUT) input_value speed_input.get_attribute(value) # 注意前端可能对浮点数进行格式化所以用近似比较 assert abs(float(input_value) - valid_speed) 0.01, f语速输入值未正确更新期望{valid_speed}实际{input_value} # 测试无效值负数、零、非数字、超范围 pytest.mark.parametrize(invalid_speed, expected_behavior, [ (-0.1, error_or_default), # 可能报错或重置为最小值 (0, error_or_default), # 0可能无效 (abc, error_or_clear), # 非数字可能清空输入或报错 (3.0, error_or_clamp) # 超范围可能报错或自动限制为最大值 ]) def test_invalid_speed_input(self, chattts_page, invalid_speed, expected_behavior): 测试输入无效的语速值并验证前端或后端的处理行为 page chattts_page original_value page.driver.find_element(*page.SPEED_INPUT).get_attribute(value) page.set_speed(invalid_speed) # 行为验证是一个难点需要根据产品实际逻辑来断言 current_value page.driver.find_element(*page.SPEED_INPUT).get_attribute(value) error_msg page.get_error_message() if expected_behavior error_or_default: # 要么出现错误提示要么值被重置为一个默认有效值如1.0 assert error_msg is not None or (current_value ! str(invalid_speed) and float(current_value) 0.5) elif expected_behavior error_or_clear: # 要么出现错误提示要么输入框被清空值为空 assert error_msg is not None or current_value elif expected_behavior error_or_clamp: # 要么出现错误提示要么值被自动修正到边界如2.0 assert error_msg is not None or (current_value 2.0) # 如果产品设计是输入非法值后直接忽略保持原值则断言current_value original_value注意事项无效值测试是探索性的因为产品如何处理非法输入可能有多种设计。测试脚本需要能兼容不同的处理方式。最好的方法是先与开发人员确认产品规格或者通过手动测试观察行为再将观察到的行为转化为自动化断言。4.3 文本鲁棒性测试 (test_text_robustness.py)这是测试的核心和难点需要准备丰富的测试数据。 首先在test_data/test_texts.py中准备数据# 常规文本 NORMAL_TEXT 这是一段用于测试的中文文本包含标点符号。This is an English sentence for testing. # 边界文本 EMPTY_TEXT SINGLE_CHAR_TEXT A LONG_TEXT 很长很长很长... * 1000 # 构造一个超长字符串 # 特殊字符文本 SPECIAL_CHARS_TEXT 测试脚本alert(xss)/脚本 SQL 注入测试 HTML_TEXT h1标题/h1p段落/p SQL_INJECTION_TEXT 1 OR 11 # 格式文本 TEXT_WITH_NEWLINES 第一行\n第二行\n\t第三行带制表符然后编写测试用例import pytest from test_data.test_texts import * class TestTextRobustness: 测试文本输入的鲁棒性 pytest.mark.parametrize(test_text, description, [ (NORMAL_TEXT, 常规中英文混合文本), (EMPTY_TEXT, 空文本), (SINGLE_CHAR_TEXT, 单字符文本), (LONG_TEXT, 超长文本), (SPECIAL_CHARS_TEXT, 包含特殊字符和Emoji的文本), (HTML_TEXT, 包含HTML标签的文本), (SQL_INJECTION_TEXT, 类SQL注入文本), (TEXT_WITH_NEWLINES, 包含换行和制表符的文本) ]) def test_various_text_input(self, chattts_page, test_text, description): 批量测试各种文本输入主要验证前端是否接受输入以及合成按钮是否可点击 page chattts_page page.input_text(test_text) # 验证文本是否成功输入到文本框 actual_text page.driver.find_element(*page.TEXT_AREA).get_attribute(value) # 对于空文本actual_text可能是空字符串 if test_text : assert actual_text , f空文本输入失败实际内容{actual_text} else: # 对于非空文本前端可能会做trim或转义所以不能简单断言完全相等 # 这里我们至少断言输入框不是空的除非是空文本测试并且没有因为输入而立即报错 assert actual_text is not None, 文本输入后输入框值为None # 更稳健的做法尝试点击合成按钮看是否触发前端校验错误 page.click_synthesize() # 给一个短暂的等待让可能的错误信息出现 import time time.sleep(1) error_msg page.get_error_message() # 对于明显非法的输入如超长、危险字符产品可能设计为不允许合成此时出现错误信息是符合预期的。 # 因此这里的断言需要更精细。我们可以先定义一个“预期可合成”的文本列表。 # 为了简化这个测试我们只验证“输入操作本身不会导致页面崩溃或前端JS报错”。 # 更严格的断言可以在下面的test_text_synthesis_result中做。 def test_text_synthesis_result(self, chattts_page): 针对常规文本验证合成流程能走通并返回音频 page chattts_page page.input_text(NORMAL_TEXT) page.select_voice(默认音色) page.set_speed(1.0) page.click_synthesize() # 等待并断言音频播放器元素出现表示合成成功 assert page.is_audio_player_present(), 常规文本合成失败未检测到音频播放器 # 可以进一步验证音频元素的src属性是否包含有效的音频URL如blob:http或.wav后缀 audio_element page.driver.find_element(*page.AUDIO_PLAYER) src audio_element.get_attribute(src) assert src and (src.startswith(blob:) or .wav in src or .mp3 in src), f音频源地址异常{src}踩坑记录文本鲁棒性测试中最容易遇到异步加载和动态元素的问题。点击合成按钮后音频的生成和加载是异步的。is_audio_player_present()方法中的WebDriverWait就是用来处理这个的。但有时候即使元素出现了其src属性可能还是空的或无效的需要额外等待属性变化。可以考虑使用expected_conditions中的element_attribute_to_include来等待src属性包含特定字符串。4.4 端到端流程与组合测试 (test_e2e.py)最后我们需要模拟真实用户场景进行组合测试。import pytest from test_data.test_texts import NORMAL_TEXT class TestEndToEnd: 端到端流程测试 pytest.mark.parametrize(voice, speed, [ (默认音色, 1.0), (甜美女声, 0.8), (沉稳男声, 1.5), # 可以组合更多边界值如 (卡通音效, 2.0) ]) def test_synthesis_with_different_settings(self, chattts_page, voice, speed): 使用不同的音色和语速组合进行合成测试 page chattts_page page.select_voice(voice) page.set_speed(speed) page.input_text(NORMAL_TEXT) page.click_synthesize() # 核心断言合成成功有音频元素 assert page.is_audio_player_present(), f组合测试失败音色{voice}, 语速{speed} # 高级验证可以尝试播放一下音频通过JS触发play事件并监听是否有error事件 # 但这需要注入JavaScript且受浏览器自动播放策略限制复杂度较高。 # 一个更简单的方法是检查音频的duration属性是否大于0但同样需要音频加载完成。 # 这里我们暂时只做元素存在性检查作为流程通过的标志。5. 测试执行、报告生成与持续集成脚本写好了如何运行并得到清晰的结果5.1 使用pytest运行测试并生成报告在项目根目录下执行以下命令# 运行所有测试 pytest # 运行特定测试文件 pytest tests/test_voice.py # 运行带标记的测试例如标记为‘slow’的测试 pytest -m slow # 运行测试并生成HTML报告 pytest --htmlreports/report.html --self-contained-html--self-contained-html参数会将CSS和图片内嵌到HTML中生成一个独立的报告文件。打开reports/report.html你可以看到清晰的测试通过/失败列表、每个测试用例的执行时间以及失败时的错误信息和截图需要额外配置。5.2 添加失败截图功能在conftest.py中添加一个fixture或使用pytest的钩子函数可以在测试失败时自动截图这对于调试WebUI测试至关重要。import pytest from datetime import datetime pytest.hookimpl(tryfirstTrue, hookwrapperTrue) def pytest_runtest_makereport(item, call): 在测试执行完成后制作报告如果失败则截图 outcome yield report outcome.get_result() if report.when call and report.failed: # 获取测试用例中的driver fixture driver_fixture item.funcargs.get(driver) if driver_fixture: # 生成带时间戳的截图文件名 timestamp datetime.now().strftime(%Y%m%d_%H%M%S) screenshot_name fscreenshot_failure_{item.name}_{timestamp}.png screenshot_path f./reports/{screenshot_name} driver_fixture.save_screenshot(screenshot_path) # 将截图路径添加到测试报告中 report.extra [(image/png, screenshot_path)] print(f\n测试失败截图已保存至{screenshot_path})5.3 集成到持续集成CI流水线自动化测试的价值在于持续运行。你可以将这套测试集成到GitHub Actions、GitLab CI或Jenkins中。一个简单的GitHub Actions工作流示例 (.github/workflows/chattts-ui-test.yml)name: ChatTTS WebUI Automation Test on: [push, pull_request] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - name: Set up Python uses: actions/setup-pythonv4 with: python-version: 3.9 - name: Install dependencies run: | pip install -r requirements.txt # 你需要创建requirements.txt文件 sudo apt-get update sudo apt-get install -y wget unzip # 下载与Ubuntu默认Chrome版本匹配的ChromeDriver wget -q https://storage.googleapis.com/chrome-for-testing-public/latest/linux64/chromedriver-linux64.zip unzip chromedriver-linux64.zip sudo mv chromedriver-linux64/chromedriver /usr/local/bin/ chmod x /usr/local/bin/chromedriver - name: Start ChatTTS WebUI (假设有启动脚本) run: | # 这里需要启动你的测试环境ChatTTS WebUI服务 # 例如python app.py # 并等待服务就绪例如使用 sleep 或 curl 轮询 echo 假设服务已在 localhost:7860 启动 - name: Run tests with pytest run: | pytest --htmlreports/report.html --self-contained-html - name: Upload test report uses: actions/upload-artifactv3 if: always() with: name: ui-test-report path: reports/持续集成心得在CI环境中务必使用无头模式(--headless)。确保测试环境WebUI服务在测试开始前已经启动并可用。测试失败时的截图和日志是定位问题的关键一定要配置好归档步骤。6. 常见问题排查与脚本优化技巧在实际运行中你肯定会遇到各种问题。这里记录一些典型的坑和解决方案。6.1 元素定位失败最常见的问题问题NoSuchElementException脚本找不到按钮、输入框。排查页面未加载完成在操作元素前增加等待。优先使用WebDriverWait配合expected_conditions(如EC.element_to_be_clickable)而不是固定的time.sleep。iframe/Shadow DOM如果元素嵌套在iframe或Shadow DOM内需要先切换到对应的上下文。# 切换iframe iframe driver.find_element(By.TAG_NAME, iframe) driver.switch_to.frame(iframe) # 操作iframe内的元素... driver.switch_to.default_content() # 切回来动态ID或类名前端框架可能生成随机的属性值。改用更稳定的定位方式如By.XPATH结合文本内容或相对位置。# 不推荐使用可能变化的id # driver.find_element(By.ID, button-12345) # 推荐使用包含部分文本的XPath driver.find_element(By.XPATH, //button[contains(text(), 合成)])页面结构变更这是使用POM页面对象模型的最大好处。当页面元素变更时你只需要更新chattts_page.py文件中的定位器而不需要修改所有测试脚本。6.2 测试不稳定Flaky Tests问题测试有时成功有时失败没有规律。原因与解决网络或后端延迟合成语音需要时间。增加对于结果元素的等待时间并设置合理的超时。# 不好的做法 time.sleep(10) # 固定等待10秒太死板 # 好的做法 WebDriverWait(driver, 15).until( EC.presence_of_element_located((By.ID, audio-player)) )竞态条件在输入文本后立即点击按钮可能前端校验还未完成。可以在关键操作间加入短暂等待或者等待某个特定状态如按钮从禁用变为启用。# 等待合成按钮变为可点击状态假设初始是禁用的 WebDriverWait(driver, 5).until( EC.element_to_be_clickable(page.SYNTHESIZE_BTN) ) page.click_synthesize()浏览器缓存或状态残留确保每个测试用例是独立的。在conftest.py的driverfixture 中使用scopefunction默认让每个测试函数都使用一个新的浏览器会话。或者在测试开始前执行清理操作如driver.delete_all_cookies()和driver.refresh()。6.3 测试数据的管理与参数化当测试用例越来越多测试数据特别是文本最好外部化例如存放在JSON或YAML文件中方便管理和复用。# 例如创建一个 test_data/text_corpus.json [ {category: normal, text: 这是一段普通文本。}, {category: boundary, text: }, ... ]然后在测试中读取这个文件进行参数化。这使你的测试脚本更清晰数据与逻辑分离。6.4 性能与并发考虑如果测试用例很多串行执行会非常耗时。可以考虑使用pytest-xdist插件进行并行测试。pip install pytest-xdist pytest -n auto # 自动检测CPU核心数并行运行但需要注意并行测试时要确保测试环境WebUI服务能处理多个并发请求并且测试用例之间没有共享状态冲突。通常需要为每个测试进程提供独立的用户会话或测试数据。编写和维护Selenium自动化测试脚本是一个需要耐心和细致的工作它不仅仅是“录制回放”。清晰的架构设计、稳定的元素定位策略、合理的等待机制以及对异常情况的妥善处理是构建一套可靠、可维护的WebUI自动化测试套件的关键。这套针对ChatTTS WebUI的测试方案其思路和方法完全可以复用到其他任何Web应用的界面功能测试上。
