467 lines
17 KiB
HTML
467 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>系统功能测试</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.container {
|
||
background-color: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
h1 {
|
||
color: #333;
|
||
border-bottom: 2px solid #409eff;
|
||
padding-bottom: 10px;
|
||
}
|
||
.test-section {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 4px;
|
||
}
|
||
.test-section h2 {
|
||
color: #409eff;
|
||
margin-top: 0;
|
||
}
|
||
.test-item {
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 4px;
|
||
}
|
||
.test-item.success {
|
||
border-left: 4px solid #67c23a;
|
||
}
|
||
.test-item.error {
|
||
border-left: 4px solid #f56c6c;
|
||
}
|
||
.test-item.pending {
|
||
border-left: 4px solid #e6a23c;
|
||
}
|
||
.status {
|
||
font-weight: bold;
|
||
margin-left: 10px;
|
||
}
|
||
.success .status {
|
||
color: #67c23a;
|
||
}
|
||
.error .status {
|
||
color: #f56c6c;
|
||
}
|
||
.pending .status {
|
||
color: #e6a23c;
|
||
}
|
||
button {
|
||
background-color: #409eff;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
margin: 5px;
|
||
}
|
||
button:hover {
|
||
background-color: #66b1ff;
|
||
}
|
||
button:disabled {
|
||
background-color: #c0c4cc;
|
||
cursor: not-allowed;
|
||
}
|
||
.result {
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
background-color: #f0f9ff;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
}
|
||
.summary {
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
background-color: #e6f7ff;
|
||
border-radius: 4px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
.summary.success {
|
||
background-color: #f0f9ff;
|
||
color: #67c23a;
|
||
}
|
||
.summary.error {
|
||
background-color: #fef0f0;
|
||
color: #f56c6c;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>系统功能自动化测试</h1>
|
||
|
||
<div class="test-section">
|
||
<h2>测试控制</h2>
|
||
<button id="runAllTests" onclick="runAllTests()">运行所有测试</button>
|
||
<button id="resetTests" onclick="resetTests()">重置测试</button>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>登录测试</h2>
|
||
<div class="test-item pending" id="loginTest">
|
||
<span>测试用户登录</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="loginResult"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>配置管理API测试</h2>
|
||
<div class="test-item pending" id="getConfigsTest">
|
||
<span>获取所有配置</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="getConfigsResult"></div>
|
||
</div>
|
||
<div class="test-item pending" id="addConfigTest">
|
||
<span>添加测试配置</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="addConfigResult"></div>
|
||
</div>
|
||
<div class="test-item pending" id="getConfigTest">
|
||
<span>获取单个配置</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="getConfigResult"></div>
|
||
</div>
|
||
<div class="test-item pending" id="deleteConfigTest">
|
||
<span>删除测试配置</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="deleteConfigResult"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>算法比较API测试</h2>
|
||
<div class="test-item pending" id="compareAlgorithmsTest">
|
||
<span>算法效果比较</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="compareAlgorithmsResult"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>现有API测试</h2>
|
||
<div class="test-item pending" id="healthCheckTest">
|
||
<span>健康检查</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="healthCheckResult"></div>
|
||
</div>
|
||
<div class="test-item pending" id="getCurrentUserTest">
|
||
<span>获取当前用户</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="getCurrentUserResult"></div>
|
||
</div>
|
||
<div class="test-item pending" id="getAlgorithmsTest">
|
||
<span>获取算法列表</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="getAlgorithmsResult"></div>
|
||
</div>
|
||
<div class="test-item pending" id="getServicesTest">
|
||
<span>获取服务列表</span>
|
||
<span class="status">待测试</span>
|
||
<div class="result" id="getServicesResult"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary" id="testSummary">
|
||
点击"运行所有测试"开始测试
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const API_BASE_URL = 'http://localhost:8001/api/v1';
|
||
let authToken = null;
|
||
let testResults = {
|
||
total: 0,
|
||
passed: 0,
|
||
failed: 0
|
||
};
|
||
|
||
async function makeRequest(url, options = {}) {
|
||
try {
|
||
const response = await fetch(url, options);
|
||
const data = await response.json();
|
||
return { success: response.ok, status: response.status, data };
|
||
} catch (error) {
|
||
return { success: false, error: error.message };
|
||
}
|
||
}
|
||
|
||
function updateTestItem(testId, success, message) {
|
||
const testItem = document.getElementById(testId);
|
||
const resultDiv = document.getElementById(testId + 'Result');
|
||
|
||
testItem.classList.remove('pending', 'success', 'error');
|
||
testItem.classList.add(success ? 'success' : 'error');
|
||
|
||
const statusSpan = testItem.querySelector('.status');
|
||
statusSpan.textContent = success ? '✓ 通过' : '✗ 失败';
|
||
|
||
resultDiv.textContent = message;
|
||
|
||
testResults.total++;
|
||
if (success) {
|
||
testResults.passed++;
|
||
} else {
|
||
testResults.failed++;
|
||
}
|
||
}
|
||
|
||
async function testLogin() {
|
||
const result = await makeRequest(`${API_BASE_URL}/users/login`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ username: 'admin', password: 'admin123' })
|
||
});
|
||
|
||
if (result.success && result.data.access_token) {
|
||
authToken = result.data.access_token;
|
||
updateTestItem('loginTest', true, `登录成功，用户ID: ${result.data.user_id}`);
|
||
return true;
|
||
} else {
|
||
updateTestItem('loginTest', false, `登录失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function testGetConfigs() {
|
||
const result = await makeRequest(`${API_BASE_URL}/config/`, {
|
||
headers: { 'Authorization': `Bearer ${authToken}` }
|
||
});
|
||
|
||
if (result.success) {
|
||
const configs = result.data.configs || [];
|
||
updateTestItem('getConfigsTest', true, `获取成功，配置数量: ${configs.length}`);
|
||
return true;
|
||
} else {
|
||
updateTestItem('getConfigsTest', false, `获取失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function testAddConfig() {
|
||
const result = await makeRequest(`${API_BASE_URL}/config/test_frontend_config`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Authorization': `Bearer ${authToken}`,
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
value: 'frontend_test_value',
|
||
type: 'system',
|
||
service_id: null,
|
||
description: '前端测试配置'
|
||
})
|
||
});
|
||
|
||
if (result.success) {
|
||
updateTestItem('addConfigTest', true, '添加配置成功');
|
||
return true;
|
||
} else {
|
||
updateTestItem('addConfigTest', false, `添加失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function testGetConfig() {
|
||
const result = await makeRequest(`${API_BASE_URL}/config/test_frontend_config`, {
|
||
headers: { 'Authorization': `Bearer ${authToken}` }
|
||
});
|
||
|
||
if (result.success) {
|
||
updateTestItem('getConfigTest', true, `获取成功，配置值: ${result.data.value}`);
|
||
return true;
|
||
} else {
|
||
updateTestItem('getConfigTest', false, `获取失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function testDeleteConfig() {
|
||
const result = await makeRequest(`${API_BASE_URL}/config/test_frontend_config`, {
|
||
method: 'DELETE',
|
||
headers: { 'Authorization': `Bearer ${authToken}` }
|
||
});
|
||
|
||
if (result.success) {
|
||
updateTestItem('deleteConfigTest', true, '删除配置成功');
|
||
return true;
|
||
} else {
|
||
updateTestItem('deleteConfigTest', false, `删除失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function testCompareAlgorithms() {
|
||
const result = await makeRequest(`${API_BASE_URL}/comparison/compare-algorithms`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Authorization': `Bearer ${authToken}`,
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
input_data: { text: '前端测试文本' },
|
||
algorithm_configs: [
|
||
{
|
||
algorithm_id: 'frontend_test_1',
|
||
algorithm_name: '前端测试算法1',
|
||
version: '1.0.0',
|
||
config: '{}'
|
||
},
|
||
{
|
||
algorithm_id: 'frontend_test_2',
|
||
algorithm_name: '前端测试算法2',
|
||
version: '1.0.0',
|
||
config: '{}'
|
||
}
|
||
]
|
||
})
|
||
});
|
||
|
||
if (result.success && result.data.success) {
|
||
const resultsCount = result.data.results ? result.data.results.length : 0;
|
||
updateTestItem('compareAlgorithmsTest', true, `比较成功，结果数量: ${resultsCount}`);
|
||
return true;
|
||
} else {
|
||
updateTestItem('compareAlgorithmsTest', false, `比较失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function testHealthCheck() {
|
||
const result = await makeRequest(`${API_BASE_URL.replace('/api/v1', '')}/health`);
|
||
|
||
if (result.success) {
|
||
updateTestItem('healthCheckTest', true, `健康检查通过: ${result.data.status}`);
|
||
return true;
|
||
} else {
|
||
updateTestItem('healthCheckTest', false, `健康检查失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function testGetCurrentUser() {
|
||
const result = await makeRequest(`${API_BASE_URL}/users/me`, {
|
||
headers: { 'Authorization': `Bearer ${authToken}` }
|
||
});
|
||
|
||
if (result.success) {
|
||
updateTestItem('getCurrentUserTest', true, `获取成功，用户名: ${result.data.username}`);
|
||
return true;
|
||
} else {
|
||
updateTestItem('getCurrentUserTest', false, `获取失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function testGetAlgorithms() {
|
||
const result = await makeRequest(`${API_BASE_URL}/algorithms/`, {
|
||
headers: { 'Authorization': `Bearer ${authToken}` }
|
||
});
|
||
|
||
if (result.success) {
|
||
const count = Array.isArray(result.data) ? result.data.length : 0;
|
||
updateTestItem('getAlgorithmsTest', true, `获取成功，算法数量: ${count}`);
|
||
return true;
|
||
} else {
|
||
updateTestItem('getAlgorithmsTest', false, `获取失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function testGetServices() {
|
||
const result = await makeRequest(`${API_BASE_URL}/services`, {
|
||
headers: { 'Authorization': `Bearer ${authToken}` }
|
||
});
|
||
|
||
if (result.success) {
|
||
const count = Array.isArray(result.data) ? result.data.length : 0;
|
||
updateTestItem('getServicesTest', true, `获取成功，服务数量: ${count}`);
|
||
return true;
|
||
} else {
|
||
updateTestItem('getServicesTest', false, `获取失败: ${result.error || result.data.detail}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function runAllTests() {
|
||
// 重置测试结果
|
||
testResults = { total: 0, passed: 0, failed: 0 };
|
||
|
||
// 禁用按钮
|
||
document.getElementById('runAllTests').disabled = true;
|
||
document.getElementById('resetTests').disabled = true;
|
||
|
||
// 运行测试
|
||
await testLogin();
|
||
|
||
if (authToken) {
|
||
await testHealthCheck();
|
||
await testGetCurrentUser();
|
||
await testGetAlgorithms();
|
||
await testGetServices();
|
||
await testGetConfigs();
|
||
await testAddConfig();
|
||
await testGetConfig();
|
||
await testDeleteConfig();
|
||
await testCompareAlgorithms();
|
||
}
|
||
|
||
// 更新摘要
|
||
const summaryDiv = document.getElementById('testSummary');
|
||
summaryDiv.classList.remove('success', 'error');
|
||
|
||
if (testResults.failed === 0) {
|
||
summaryDiv.classList.add('success');
|
||
summaryDiv.textContent = `🎉 所有测试通过！总计: ${testResults.passed}/${testResults.total}`;
|
||
} else {
|
||
summaryDiv.classList.add('error');
|
||
summaryDiv.textContent = `⚠️ 部分测试失败！总计: ${testResults.passed}/${testResults.total}，失败: ${testResults.failed}`;
|
||
}
|
||
|
||
// 启用按钮
|
||
document.getElementById('runAllTests').disabled = false;
|
||
document.getElementById('resetTests').disabled = false;
|
||
}
|
||
|
||
function resetTests() {
|
||
// 重置所有测试项
|
||
const testItems = document.querySelectorAll('.test-item');
|
||
testItems.forEach(item => {
|
||
item.classList.remove('success', 'error');
|
||
item.classList.add('pending');
|
||
const statusSpan = item.querySelector('.status');
|
||
statusSpan.textContent = '待测试';
|
||
const resultDiv = item.querySelector('.result');
|
||
resultDiv.textContent = '';
|
||
});
|
||
|
||
// 重置摘要
|
||
const summaryDiv = document.getElementById('testSummary');
|
||
summaryDiv.classList.remove('success', 'error');
|
||
summaryDiv.textContent = '点击"运行所有测试"开始测试';
|
||
|
||
// 重置结果
|
||
testResults = { total: 0, passed: 0, failed: 0 };
|
||
authToken = null;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |