测试平台界面开发实战
Web 前端开发实战
实战需求
测试用例管理系统旨在提供一个简洁、高效的解决方案，用于管理测试过程中的用例信息。该系统将支持用例数据的增删改查操作，并以科学化、系统化和规范化的方式维护信息。
基于前面后端开发实战中实现的测试用例管理系统后台接口，将接口中的数据，使用前端页面进行展示，完成测试用例管理系统的前端实战需求
实现思路
实现步骤
分析接口
- 首页列表接口:
/list- 请求方式： GET
- 返回数据： JSON
- 添加接口:
/add- 请求方式： POST
- 请求体参数：
module，title，priority，condition，step，expected，actual - 返回数据： JSON
- 修改接口:
/change/cid- 请求方式： POST
- 请求体参数：
module，title，priority，condition，step，expected，actual - 返回数据： JSON
- 回显数据接口:
/changeData/cid- 请求方式： GET
- 返回数据： JSON
- 删除接口:
/delete/cid- 请求方式： GET
- 返回数据： JSON
页面开发
首页列表页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
/* border: 1px solid #000; */
height: 800px;
width: 1200px;
margin: 0 auto;
}
.title h1{
width: 1200px;
height: 100px;
color: red;
text-align: center;
line-height: 100px;
/* border: 1px solid #000; */
}
.op{
width: 1200px;
height: 50px;
line-height: 50px;
/* border: 1px solid #000; */
}
.add{
width: 100px;
/* border: 1px solid #000; */
text-align: center;
}
.content{
width: 1200px;
height: 500px;
/* border: 1px solid #000; */
margin-top: 10px;
}
.data{
width: 1200px;
border: 1px solid #000;
text-align: center;
border-collapse: collapse;
}
tr, th, td{
border: 1px solid #000;
}
a{
text-decoration: none;
}
.step{
text-align: left;
}
</style>
<script src="static/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 发起一个请求去获取表格中的数据
$.get("/list", function(data){
var html_str = "";
html_str += "<tr>"
html_str += " <th>用例编号</th>"
html_str += " <th>功能模块</th>"
html_str += " <th>测试标题</th>"
html_str += " <th>优先级别</th>"
html_str += " <th>前置条件</th>"
html_str += " <th>测试步骤</th>"
html_str += " <th>预期结果</th>"
html_str += " <th>实际结果</th>"
html_str += " <th>操作</th>"
html_str += "</tr>"
for(var i=0;i<data.length;i++){
var obj = data[i];
html_str += "<tr>"
html_str += " <td>" + obj.cid + "</td>"
html_str += " <td>" + obj.module + "</td>"
html_str += " <td>" + obj.title + "</td>"
html_str += " <td>" + obj.priority + "</td>"
html_str += " <td>" + obj.condition + "</td>"
html_str += " <td class='step'>" + obj.step + "</td>"
html_str += " <td>" + obj.expected + "</td>"
html_str += " <td>" + obj.actual + "</td>"
html_str += " <td><a href='/change/" + obj.cid + "'>修改</a> | <a href='/delete/" + obj.cid + "'>删除</a></td>"
html_str += "</tr>"
}
$(".data").html(html_str)
})
});
</script>
</head>
<body>
<div class="main">
<!-- 标题 -->
<div class="title">
<h1>测试用例管理系统</h1>
</div>
<!-- 功能条 -->
<div class="op">
<div class="add">
<a href="/add">添加测试用例</a>
</div>
</div>
<!-- 主体内容 -->
<div class="content">
<table class="data">
</table>
</div>
</div>
</body>
</html>
添加页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width: 1200px;
height: 800px;
margin: 30px auto;
border: 1px solid #000;
}
.title{
text-align: center;
color: red;
border: 1px solid #000;
}
.content{
width: 1200px;
text-align: center;
}
.content div{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="title">
<h1>添加测试用例</h1>
</div>
<div class="content">
<form action="/add" method="post">
<div>功能模块: <input type="text" name="module" id=""></div>
<div>测试标题: <input type="text" name="title" id=""></div>
<div>优先级别: <input type="text" name="priority" id=""></div>
<div>前置条件: <input type="text" name="condition" id=""></div>
<div>测试步骤: <input type="text" name="step" id=""></div>
<div>预期结果: <input type="text" name="expected" id=""></div>
<div>实际结果: <input type="text" name="actual" id=""></div>
<div></div><input type="reset" value="重置"> <input type="submit" value="添加"></div>
</form>
</div>
</div>
</body>
</html>
修改页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width: 1200px;
height: 800px;
margin: 30px auto;
border: 1px solid #000;
}
.title{
text-align: center;
color: red;
border: 1px solid #000;
}
.content{
width: 1200px;
text-align: center;
}
.content div{
margin-top: 20px;
}
</style>
<script src="../static/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var cid = document.location.href;
var index = cid.lastIndexOf("/") + 1
cid = cid.substring(index)
// 设置form表单提交的地址
$("form").prop({action:"/change/" + cid})
// 请求回显数据
$.get("/changeData/" + cid, function(data){
$("[name='module']").val(data.module);
$("[name='title']").val(data.title);
$("[name='priority']").val(data.priority);
$("[name='condition']").val(data.condition);
$("[name='step']").val(data.step);
$("[name='expected']").val(data.expected);
$("[name='actual']").val(data.actual);
})
});
</script>
</head>
<body>
<div class="main">
<div class="title">
<h1>修改测试用例</h1>
</div>
<div class="content">
<form action="" method="post">
<div>功能模块: <input type="text" name="module" id=""></div>
<div>测试标题: <input type="text" name="title" id=""></div>
<div>优先级别: <input type="text" name="priority" id=""></div>
<div>前置条件: <input type="text" name="condition" id=""></div>
<div>测试步骤: <input type="text" name="step" id=""></div>
<div>预期结果: <input type="text" name="expected" id=""></div>
<div>实际结果: <input type="text" name="actual" id=""></div>
<div></div><input type="reset" value="重置"> <input type="submit" value="修改"></div>
</form>
</div>
</div>
</body>
</html>
总结
测试平台开发是用于创建和维护用于自动化测试、性能测试、功能测试、回归测试等的软件平台的过程。旨在帮助软件开发团队更高效地进行测试活动，确保软件产品的质量。