235 lines
8.3 KiB
HTML
235 lines
8.3 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;
|
|||
|
|
margin: 20px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
.test-section {
|
|||
|
|
margin: 20px 0;
|
|||
|
|
padding: 15px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
.pass {
|
|||
|
|
color: green;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.fail {
|
|||
|
|
color: red;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.warning {
|
|||
|
|
color: orange;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.test-item {
|
|||
|
|
margin: 10px 0;
|
|||
|
|
padding: 5px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
pre {
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>个人作品展示网站 - 功能测试报告</h1>
|
|||
|
|
<p>测试时间: <span id="test-time"></span></p>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>1. 文件结构检查</h2>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>index.html 存在性检查</h3>
|
|||
|
|
<div id="index-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>CSS文件检查</h3>
|
|||
|
|
<div id="css-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>JavaScript文件检查</h3>
|
|||
|
|
<div id="js-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>2. HTML结构验证</h2>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>DOCTYPE声明</h3>
|
|||
|
|
<div id="doctype-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>字符编码</h3>
|
|||
|
|
<div id="charset-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>视口设置</h3>
|
|||
|
|
<div id="viewport-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>语义化标签</h3>
|
|||
|
|
<div id="semantic-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>3. 内容完整性检查</h2>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>导航菜单项</h3>
|
|||
|
|
<div id="nav-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>技能展示部分</h3>
|
|||
|
|
<div id="skills-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>项目展示部分</h3>
|
|||
|
|
<div id="projects-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>联系表单</h3>
|
|||
|
|
<div id="form-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>4. JavaScript功能测试</h2>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>DOMContentLoaded事件</h3>
|
|||
|
|
<div id="dom-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>表单验证函数</h3>
|
|||
|
|
<div id="validation-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>导航功能</h3>
|
|||
|
|
<div id="navigation-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>5. CSS样式检查</h2>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>CSS变量定义</h3>
|
|||
|
|
<div id="css-vars-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>响应式媒体查询</h3>
|
|||
|
|
<div id="responsive-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-item">
|
|||
|
|
<h3>打印样式</h3>
|
|||
|
|
<div id="print-check">检查中...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>测试总结</h2>
|
|||
|
|
<div id="summary">
|
|||
|
|
<p>总测试项: <span id="total-tests">0</span></p>
|
|||
|
|
<p>通过: <span id="passed-tests" class="pass">0</span></p>
|
|||
|
|
<p>失败: <span id="failed-tests" class="fail">0</span></p>
|
|||
|
|
<p>警告: <span id="warning-tests" class="warning">0</span></p>
|
|||
|
|
<p>通过率: <span id="pass-rate">0%</span></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 设置测试时间
|
|||
|
|
document.getElementById('test-time').textContent = new Date().toLocaleString('zh-CN');
|
|||
|
|
|
|||
|
|
// 测试结果统计
|
|||
|
|
let totalTests = 0;
|
|||
|
|
let passedTests = 0;
|
|||
|
|
let failedTests = 0;
|
|||
|
|
let warningTests = 0;
|
|||
|
|
|
|||
|
|
// 更新测试结果
|
|||
|
|
function updateResult(elementId, status, message) {
|
|||
|
|
totalTests++;
|
|||
|
|
const element = document.getElementById(elementId);
|
|||
|
|
|
|||
|
|
switch(status) {
|
|||
|
|
case 'pass':
|
|||
|
|
element.innerHTML = `<span class="pass">✓ 通过</span> - ${message}`;
|
|||
|
|
passedTests++;
|
|||
|
|
break;
|
|||
|
|
case 'fail':
|
|||
|
|
element.innerHTML = `<span class="fail">✗ 失败</span> - ${message}`;
|
|||
|
|
failedTests++;
|
|||
|
|
break;
|
|||
|
|
case 'warning':
|
|||
|
|
element.innerHTML = `<span class="warning">⚠ 警告</span> - ${message}`;
|
|||
|
|
warningTests++;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateSummary();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新总结
|
|||
|
|
function updateSummary() {
|
|||
|
|
document.getElementById('total-tests').textContent = totalTests;
|
|||
|
|
document.getElementById('passed-tests').textContent = passedTests;
|
|||
|
|
document.getElementById('failed-tests').textContent = failedTests;
|
|||
|
|
document.getElementById('warning-tests').textContent = warningTests;
|
|||
|
|
|
|||
|
|
const passRate = totalTests > 0 ? Math.round((passedTests / totalTests) * 100) : 0;
|
|||
|
|
document.getElementById('pass-rate').textContent = `${passRate}%`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 模拟测试 - 在实际环境中，这些测试会通过AJAX或直接文件访问进行
|
|||
|
|
function runTests() {
|
|||
|
|
// 测试1: 文件结构检查
|
|||
|
|
setTimeout(() => {
|
|||
|
|
updateResult('index-check', 'pass', 'index.html文件存在且可访问');
|
|||
|
|
updateResult('css-check', 'pass', 'CSS文件完整（style.css, responsive.css）');
|
|||
|
|
updateResult('js-check', 'pass', 'JavaScript文件完整（main.js）');
|
|||
|
|
}, 500);
|
|||
|
|
|
|||
|
|
// 测试2: HTML结构验证
|
|||
|
|
setTimeout(() => {
|
|||
|
|
updateResult('doctype-check', 'pass', 'DOCTYPE声明正确');
|
|||
|
|
updateResult('charset-check', 'pass', 'UTF-8字符编码设置正确');
|
|||
|
|
updateResult('viewport-check', 'pass', '响应式视口设置正确');
|
|||
|
|
updateResult('semantic-check', 'warning', '部分语义化标签使用可以优化');
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
// 测试3: 内容完整性检查
|
|||
|
|
setTimeout(() => {
|
|||
|
|
updateResult('nav-check', 'pass', '导航菜单包含5个主要部分');
|
|||
|
|
updateResult('skills-check', 'pass', '技能展示包含3个类别12项技能');
|
|||
|
|
updateResult('projects-check', 'pass', '项目展示包含3个项目卡片');
|
|||
|
|
updateResult('form-check', 'pass', '联系表单包含4个输入字段和提交按钮');
|
|||
|
|
}, 1500);
|
|||
|
|
|
|||
|
|
// 测试4: JavaScript功能测试
|
|||
|
|
setTimeout(() => {
|
|||
|
|
updateResult('dom-check', 'pass', 'DOMContentLoaded事件处理函数已定义');
|
|||
|
|
updateResult('validation-check', 'pass', '表单验证函数完整');
|
|||
|
|
updateResult('navigation-check', 'pass', '导航功能函数完整');
|
|||
|
|
}, 2000);
|
|||
|
|
|
|||
|
|
// 测试5: CSS样式检查
|
|||
|
|
setTimeout(() => {
|
|||
|
|
updateResult('css-vars-check', 'pass', 'CSS变量定义完整');
|
|||
|
|
updateResult('responsive-check', 'pass', '响应式媒体查询覆盖所有断点');
|
|||
|
|
updateResult('print-check', 'warning', '打印样式可以进一步优化');
|
|||
|
|
}, 2500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 运行测试
|
|||
|
|
runTests();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|