web UI 测试用例1 导航有效性及直观性测试
导航描述了用户在一个页面内操作的方式，在不同的用户接口控制之间，例如按钮、对话框、列表和窗口等；或在不同的连接页面之间。通过考虑下列问题，可以决定一个Web应用系统是否易于导航：导航是否直观？Web系统的主要部分是否可通过主页存取？Web系统是否需要站点地图、搜索引擎或其他的导航帮助？
在非计算机系同学党尚的参与下，首先对UI进行了导航测试。
得到如下链接，已经添加了数据库源。
由于测试之时还未开辟用户注册界面。故得到如下结果
取消数据源，测试所有功能后得到如下信息
响应的xml代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title><link href="/Style/Basic.css" rel="stylesheet" type="text/css" />
<link href="style/List.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/JS/jquery-1.8.2.js"></script>
<script type="text/javascript">
this.tagId = 1;
this.pageNum = 1;
this.type = 0;
this.orderType = 0;
$(document).ready(
function () {
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$("#msgbox").center();
load(tagId,type,orderType,pageNum);
// var url = type == 0? "DocList.aspx" : "QList.aspx";
// $("#content").load("DocList.aspx",{Tag:tagId,Page:pageNum,OrderType:orderType})
}
);
var tagList = new Array();
function TagInfo(id,name)
{
this.Id = id;
this.Name = name;
}
function addTag(id,name){
tagList.push(new TagInfo(id,name));
}
function getTagInfo(id){
for(var i=0;tagList[i].Id!=id;i++);
return tagList[i];
}
function showMsg()
{
$("#msgbox").show(100);
}
function hideMsg()
{
$("#msgbox").hide(100);
}
function load(tagId,type,orderType,pageNum)
{
this.tagId = tagId;
this.type = type;
this.orderType = orderType;
this.pageNum = pageNum;
$("#TypeList").val(type);
$("#OrderTypeList").val(orderType);
$("#curtagname").html(getTagInfo(tagId).Name);
showMsg();
if(type==0)
{
$("#content").load("DocList.aspx",{Tag:tagId,Page:pageNum,Order:orderType},hideMsg());
}
else if(type==1)
{
$("#content").load("QAList.aspx",{Tag:tagId,Page:pageNum,Order:orderType},hideMsg());
}
}
function loadDetail(tagId)
{
load(tagId,0,0,1);
}
function changeMode()
{
var type = $("#TypeList").val();
var orderType = $("#OrderTypeList").val();
load(tagId,type,orderType,pageNum);
}
function toQA()
{
type = 1;
load(tagId,type,orderType,pageNum);
}
function toDoc()
{
type = 0;
load(tagId,type,orderType,pageNum);
}
function pageNav(pageNum)
{
load(tagId,type,orderType,pageNum);
}
</script>
</head>
<body>
<div id="header">
<div id="logo">
<a href="Default.aspx">XueBa</a>
<span>
免费的公共计算机学习专业网站</span>
</div>
<a id="search_submit" href="#">
搜索</a>
<input id="search" title="Search the site" />
<div id="log">
<a href="#">
登录</a>
<a href="#">
注册</a>
</div>
</div>
<form method="post" action="List.aspx?Tag=1" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUINTQ5NTAzMDMPZBYCZg9kFgICCw9kFgICAQ9kFgICAw8WAh4LXyFJdGVtQ291bnQCBxYOZg9kFgZmDxUCATEc5pWw5o2u5oyW5o6YICAgICAgICAgICAgICAgIGQCAg8VAQE0ZAIEDxUDATMBMRzmlbDmja7mjJbmjpggICAgICAgICAgICAgICAgZAIBD2QWBmYPFQIBMiDorqHnrpfmnLrlm77lvaLlraYgICAgICAgICAgICAgIGQCAg8VAQEzZAIEDxUDATIBMiDorqHnrpfmnLrlm77lvaLlraYgICAgICAgICAgICAgIGQCAg9kFgZmDxUCATMc56We57uP572R57ucICAgICAgICAgICAgICAgIGQCAg8VAQExZAIEDxUDATIBMxznpZ7nu4/nvZHnu5wgICAgICAgICAgICAgICAgZAIDD2QWBmYPFQIBNBzova/ku7blt6XnqIsgICAgICAgICAgICAgICAgZAICDxUBATVkAgQPFQMBMgE0HOi9r+S7tuW3peeoiyAgICAgICAgICAgICAgICBkAgQPZBYGZg8VAgE1GOaZuuiDvVVJICAgICAgICAgICAgICAgIGQCAg8VAQE0ZAIEDxUDATEBNRjmmbrog71VSSAgICAgICAgICAgICAgICBkAgUPZBYGZg8VAgE2GOehrOS7tiAgICAgICAgICAgICAgICAgIGQCAg8VAQE1ZAIEDxUDATMBNhjnoazku7YgICAgICAgICAgICAgICAgICBkAgYPZBYGZg8VAgE3FHF1YXJ0dXMgICAgICAgICAgICAgZAICDxUBATBkAgQPFQMBMAE3FHF1YXJ0dXMgICAgICAgICAgICAgZGRyNRYWy2F/7X7KVjSx401/a7eSIIn/96hYHPJpdsaQjw==" />
</div>
<div>
<div id="wrapper">
<div id="left">
<div id="catagory">
<a>标签</a>
</div>
<ul id="clist">
<li class="item">
<a class="name" onclick="loadDetail(1);" href="#">数据挖掘 </a>
<p class="tag">问答 : <span class="green_tag">4</span></p>
<p class="tag">文章 : <span class="blue_tag">3</span></p>
</li>
<script>addTag(1,"数据挖掘 ".trim());</script>
<li class="item">
<a class="name" onclick="loadDetail(2);" href="#">计算机图形学 </a>
<p class="tag">问答 : <span class="green_tag">3</span></p>
<p class="tag">文章 : <span class="blue_tag">2</span></p>
</li>
<script>addTag(2,"计算机图形学 ".trim());</script>
<li class="item">
<a class="name" onclick="loadDetail(3);" href="#">神经网络 </a>
<p class="tag">问答 : <span class="green_tag">1</span></p>
<p class="tag">文章 : <span class="blue_tag">2</span></p>
</li>
<script>addTag(3,"神经网络 ".trim());</script>
<li class="item">
<a class="name" onclick="loadDetail(4);" href="#">软件工程 </a>
<p class="tag">问答 : <span class="green_tag">5</span></p>
<p class="tag">文章 : <span class="blue_tag">2</span></p>
</li>
<script>addTag(4,"软件工程 ".trim());</script>
<li class="item">
<a class="name" onclick="loadDetail(5);" href="#">智能UI </a>
<p class="tag">问答 : <span class="green_tag">4</span></p>
<p class="tag">文章 : <span class="blue_tag">1</span></p>
</li>
<script>addTag(5,"智能UI ".trim());</script>
<li class="item">
<a class="name" onclick="loadDetail(6);" href="#">硬件 </a>
<p class="tag">问答 : <span class="green_tag">5</span></p>
<p class="tag">文章 : <span class="blue_tag">3</span></p>
</li>
<script>addTag(6,"硬件 ".trim());</script>
<li class="item">
<a class="name" onclick="loadDetail(7);" href="#">quartus </a>
<p class="tag">问答 : <span class="green_tag">0</span></p>
<p class="tag">文章 : <span class="blue_tag">0</span></p>
</li>
<script>addTag(7,"quartus ".trim());</script>
</ul>
</div>
<div id="right">
<div id="title">
<p><span id="curtagname"></span>下的问题和资源</p>
</div>
<div id="navigator">
<ul id="mainLink">
<li class="qaLink"><a href="#" onclick="toQA();">问答</a></li>
<li class="paLink"><a href="#" onclick="toDoc();">文章</a></li>
</ul>
<div id="ordertype">
<select id="OrderTypeList" onchange="changeMode();">
<option value="0">
最近发表</option>
<option value="1">
最受关注</option>
</select>
</div>
<span style="float:right">排序依据：</span>
<div class="clear"></div>
</div>
<div id="msgbox" style="display:none;width:300px;height:30px;border:1px dashed #ff6a00">loading...</div>
<div id ="content">
</div>
</div>
</div>
</div>
</form>
<div id="bottom">
<p>
© 2012
北京航空航天大学计算机学院软件工程小组
</p>
<p>Version 1.0.0</p>
</div>
</body>
</html>
经测试，所有已知已经开放的导航都是有效的，并且根据党尚同学的反馈，导航功能不错，但也存在一定问题，比如：缺少返回上一目录的导航功能。（虽然可以通过直接点击来实现，但是加入这个功能会更方便，因为大多数用户查找问题或文档时都是先查找同一个目录）。
