LLM Transparency Tool端到端测试：使用Cypress与Selenium自动化UI测试
项目地址: https://gitcode.com/GitHub_Trending/ll/llm-transparency-tool 为什么需要UI自动化测试？
你是否遇到过这样的情况：前端团队刚修复一个按钮点击bug，后端API调整后又导致图表加载失败？LLM Transparency Tool作为交互式Transformer模型分析工具，其前端界面包含ContributionGraph.tsx可视化组件和Selector.tsx交互控件，任何UI故障都可能影响模型透明度分析结果的准确性。本文将带你用Cypress和Selenium构建端到端测试体系，确保从组件渲染到数据流转的全链路可靠性。
测试环境准备
技术栈匹配分析
从项目package.json可知，前端基于React 18.2.0和TypeScript 5.3.3构建，这与现代UI测试工具兼容性良好。测试环境需满足：
- Node.js 16+（匹配react-scripts 5.0.1要求）
- Chrome/Firefox浏览器（支持d3可视化渲染）
- Python 3.8+（后端服务运行环境）
测试工具安装
# 克隆项目仓库
git clone https://gitcode.com/GitHub_Trending/ll/llm-transparency-tool
# 安装前端依赖
cd llm-transparency-tool/llm_transparency_tool/components/frontend
npm install
# 安装Cypress
npm install cypress --save-dev
# 安装Selenium Python依赖
pip install selenium pytest
Cypress测试实现
基础测试架构
创建cypress/e2e/llm_viewer.cy.ts测试文件，构建三层测试架构：
- 页面加载验证层：检查public/index.html基础资源加载
- 组件交互测试层：验证Selector.tsx下拉选择功能
- 数据可视化层：测试ContributionGraph.tsx图表渲染
核心测试用例
// 测试初始化加载
describe('LLM Viewer Initialization', () => {
it('loads and displays main components', () => {
cy.visit('/');
// 验证标题渲染
cy.title().should('include', 'LLM Transparency Tool');
// 验证选择器组件加载
cy.get('[data-testid="selector-component"]').should('be.visible');
// 验证图表容器存在
cy.get('[data-testid="contribution-graph"]').should('exist');
});
});
// 测试模型选择功能
describe('Model Selection Flow', () => {
it('changes model parameters and triggers graph update', () => {
cy.visit('/');
// 选择BERT模型
cy.get('[data-testid="model-select"]').select('bert-base-uncased');
// 验证参数面板更新
cy.get('[data-testid="layer-slider"]').should('have.value', '12');
// 确认图表重新渲染
cy.get('[data-testid="contribution-graph"] svg').should('have.descendants', 'path');
});
});
Selenium测试实现
Python测试套件
创建tests/ui/test_frontend.py文件，使用pytest组织测试用例：
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import Select
import time
def test_graph_rendering():
driver = webdriver.Chrome()
driver.get("http://localhost:3000")
# 验证页面标题
assert "LLM Transparency Tool" in driver.title
# 选择模型并验证加载状态
model_select = Select(driver.find_element(By.ID, "model-select"))
model_select.select_by_visible_text("gpt2-small")
# 等待图表加载完成
time.sleep(2) # 实际项目应使用显式等待
graph_element = driver.find_element(By.CLASS_NAME, "contribution-graph")
assert graph_element.is_displayed()
driver.quit()
测试数据驱动设计
创建测试数据集tests/ui/test_data.csv：
| 模型名称 | 预期层数 | 可视化类型 |
|---|---|---|
| bert-base | 12 | heatmap |
| gpt2 | 12 | network |
| roberta | 12 | matrix |
测试集成与持续集成
测试命令配置
修改package.json添加测试脚本：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"e2e:cypress": "cypress run",
"e2e:selenium": "pytest tests/ui/"
}
多工具测试策略对比
| 测试工具 | 优势场景 | 性能消耗 | 学习曲线 |
|---|---|---|---|
| Cypress | 组件交互测试 | 中 | 平缓 |
| Selenium | 跨浏览器测试 | 高 | 陡峭 |
测试最佳实践
- 元素定位策略：优先使用
data-testid属性（如在common.tsx中定义测试标识） - 等待机制：用Cypress的
cy.wait()或Selenium的WebDriverWait替代固定延迟 - 测试数据隔离：为不同测试场景创建独立的sample_input.txt副本
- 可视化验证：结合LlmViewer.css样式规则验证UI一致性
测试报告与问题追踪
测试覆盖率分析
使用istanbul生成前端测试覆盖率报告：
npx cypress run --env coverage=true
# 报告输出至 coverage/lcov-report/index.html
常见问题排查流程
- 图表不加载：检查server/app.py中的API端点是否返回正确数据
- 选择器无响应：验证Selector.tsx的onChange事件绑定
- 测试稳定性：对ContributionGraph.tsx添加加载状态指示器
总结与下一步
本文构建了覆盖LLM Transparency Tool前端界面的自动化测试体系，通过Cypress实现组件交互测试，用Selenium验证跨浏览器兼容性。下一步可扩展：
- 实现graph_node.py后端数据接口的契约测试
- 集成视觉回归测试工具（如Percy）验证d3可视化效果
- 开发自定义Cypress命令封装components/frontend/src的通用测试逻辑
通过持续完善测试体系，可确保LLM透明度分析工具在迭代过程中的交互可靠性与数据准确性。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
