点击蓝字
关注我们
上一期我们学习了构建动化测试用例管理平台的准备工作，今天我们将继续深入学习创建前端模板。
五、创建前端模板
5.1 基础模板（templates/base.html）
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{% block title %}自动化测试平台{% endblock %}</title><link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: #f5f7fa;min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0auto;background: white;border-radius: 10px;box-shadow: 010px 40px rgba(0,0,0,0.1);overflow: hidden;}.header {background: #2c3e50;color: white;padding: 30px;text-align: center;}.header h1 {font-size: 2.5em;margin-bottom: 10px;}.nav {background: #f8f9fa;padding: 15px 30px;border-bottom: 2px solid #e9ecef;}.nav a {color: #2c3e50;;margin-right: 25px;font-weight: 600;transition: color 0.3s;}.nav a:hover {color: #3498db;}.content {padding: 30px;}.btn {background: #3498db;color: white;border: none;padding: 12px 30px;border-radius: 5px;cursor: pointer;font-size: 16px;transition: all 0.3s;}.btn:hover {background: #2980b9;transform: translateY(-2px);box-shadow: 05px 15px rgba(52, 152, 219, 0.3);}table {width: 100%;border-collapse: collapse;margin-top: 20px;}th, td {padding: 15px;text-align: left;border-bottom: 1px solid #e9ecef;}th {background: #f8f9fa;font-weight: 600;color: #495057;}tr:hover {background: #f8f9fa;}</style></head><body><div class="container"><div class="header"><h1>🚀 自动化测试管理平台</h1><p>基于 Flask + Pytest 构建</p></div><div class="nav"><a href="{{ url_for('index') }}">📋 测试用例</a><a href="{{ url_for('plan_list') }}">📝 测试计划</a><a href="{{ url_for('reports_list') }}">📊 测试报告</a></div><div class="content">{% block content %}{% endblock %}</div></div></body></html>
5.2 测试用例列表页（templates/index.html）
{% extends "base.html" %}{% block title %}测试用例列表{% endblock %}{% block content %}<h2>📋 测试用例管理</h2><p style="color: #6c757d; margin: 10px 0 20px 0;">共 {{ test_cases|length }} 个测试用例</p><form method="POST" action="{{ url_for('create_plan') }}" style="margin-bottom: 30px;"><div style="margin-bottom: 20px;"><label style="display: block; margin-bottom: 10px; font-weight: 600;">创建测试计划：</label><input type="text" name="plan_name" placeholder="输入计划名称"style="padding: 10px; width: 300px; border: 2px solid #e9ecef; border-radius: 5px;" required><button type="submit" class="btn">创建计划</button></div>{% if test_cases %}<table><thead><tr><th style="width: 50px;">选择</th><th>测试文件</th><th>测试用例名称</th><th>用例路径</th></tr></thead><tbody>{% forcase in test_cases %}<tr><td><input type="checkbox" name="test_cases" value="{{ case.path }}" style="width: 20px; height: 20px;"></td><td>{{ case.file }}</td><td><code>{{ case.name }}</code></td><td style="color: #6c757d; font-size: 0.9em;">{{ case.path }}</td></tr>{% endfor %}</tbody></table>{% else %}<div style="text-align: center; padding: 50px; color: #6c757d;"><p style="font-size: 1.2em;">暂无测试用例</p><p style="margin-top: 10px;">请在 test_cases 目录下创建测试文件</p></div>{% endif %}</form>{% endblock %}
5.3 测试计划列表页（templates/plan_list.html）
{% extends "base.html" %}{% block title %}测试计划列表{% endblock %}{% block content %}<h2>📝 测试计划管理</h2><p style="color: #6c757d; margin: 10px 0 20px 0;">共 {{ plans|length }} 个测试计划</p>{% if plans %}<table><thead><tr><th>计划名称</th><th>创建时间</th><th>测试用例数量</th><th>操作</th></tr></thead><tbody>{% for plan in plans %}<tr><td><strong>{{ plan.name }}</strong></td><td>{{ plan.created_at }}</td><td>{{ plan.test_cases|length }} 个用例</td><td><a href="{{ url_for('run_plan', plan_name=plan.filename.replace('.json', '')) }}"class="btn" style="padding: 8px 20px; font-size: 14px; ;">▶️ 执行测试</a></td></tr>{% endfor %}</tbody></table>{% else %}<div style="text-align: center; padding: 50px; color: #6c757d;"><p style="font-size: 1.2em;">暂无测试计划</p><p style="margin-top: 10px;">请先在测试用例页面创建测试计划</p><a href="{{ url_for('index') }}" class="btn" style="margin-top: 20px; display: inline-block; ;">前往创建</a></div>{% endif %}{% endblock %}
5.4 测试报告列表页（templates/report.html）
{% extends "base.html" %}{% block title %}测试报告列表{% endblock %}{% block content %}<h2>📊 测试报告管理</h2><p style="color: #6c757d; margin: 10px 0 20px 0;">共 {{ reports|length }} 份测试报告</p>{% if reports %}<table><thead><tr><th>报告名称</th><th>生成时间</th><th>文件大小</th><th>操作</th></tr></thead><tbody>{% for report in reports %}<tr><td><code>{{ report.name }}</code></td><td>{{ report.created_at }}</td><td>{{ report.size }}</td><td><a href="{{ url_for('view_report', report_name=report.name) }}"target="_blank" class="btn" style="padding: 8px 20px; font-size: 14px; ;">👁️ 查看报告</a></td></tr>{% endfor %}</tbody></table>{% else %}<div style="text-align: center; padding: 50px; color: #6c757d;"><p style="font-size: 1.2em;">暂无测试报告</p><p style="margin-top: 10px;">执行测试计划后将自动生成报告</p><a href="{{ url_for('plan_list') }}" class="btn" style="margin-top: 20px; display: inline-block; ;">前往执行测试</a></div>{% endif %}{% endblock %}
5.5 创建样式文件（static/styles.css）
/* 自定义样式 - 可根据需要扩展 */code {background: #f8f9fa;padding: 2px 6px;border-radius: 3px;font-family: 'Courier New', monospace;color: #e83e8c;}.btn-secondary {background: #6c757d;}.btn-success {background: #28a745;}.btn-danger {background: #dc3545;}.alert {padding: 15px;margin-bottom: 20px;border-radius: 5px;}.alert-success {background: #d4edda;color: #155724;border: 1px solid #c3e6cb;}.alert-error {background: #f8d7da;color: #721c24;border: 1px solid #f5c6cb;}
未完待续
下期我们将继续深入学习创建示例测试用例与计划、启动和使用平台、功能扩展建议。
声明：本文为51Testing软件测试网 blues_C 用户投稿内容，该用户投稿时已经承诺独立承担涉及知识产权的相关法律责任，并且已经向51Testing承诺此文并无抄袭内容。发布本文的用途仅仅为学习交流，不做任何商用，未经授权请勿转载，否则作者和51Testing有权追究责任。如果您发现本公众号中有涉嫌抄袭的内容，欢迎发送邮件至:editor@51testing.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
