web测试之界面测试

摘要： 本文讲的是web测试之界面测试， 所谓界面测试就是指，布局是否合理、整体风格是否一致、各个控件的放置位置是否符合客户使用习惯，此外还要测试界面操作便捷性、导航简单易懂性，页面元素的可用性，界面中文字是否正确，命名是否统一，页面是否美观，文字、图片组合是否完美。

一般情况下我们进行界面测试，直接依据产品原型图以及UI切图/效果图，进行对比验证，确认是否一致。 但是如果碰到公司没有原型图，没有UI效果图怎么破。 毕竟同是天涯沦落人的情况太多了~~

那么我们可以参考市场上同类型的成熟产品来做界面比对，且考虑以下几个方面：

1、导航测试

2、图形测试

3、内容测试

4、表格测试

5、整体界面测试

 

导航测试

导航是指位于页面顶部或者侧边区域的，它起着链接站点或者软件内的各个页面的作用。

1、是否易于导航。导航是否直观。

2、Web系统的主要部分是否可通过主页存取。

3、Web应用系统导航帮助要尽可能地准确。

4、Web系统是否需要站点地图、搜索引擎或其他的导航帮助。

5、页面结构、导航、菜单、连接的风格是否一致 

 

图形测试

图形可以包括图片、动画、边框、颜色、字体、背景、按钮等。

1、要确保图形有明确的用途。比如banner页图片的广告宣传

2、所有页面字的风格、颜色、格式是否一致

3、背景颜色是否与字体颜色和前景颜色相搭配，通常情况下不使用背景

4、图片的大小和质量也是一个很重要的因素，一般采用JPG或GIF压缩

5、需要验证的是文字回绕是否正确。如果说明文字指向右边的图片，应该确保该图片出现在右边。

 

内容测试

用来检验Web应用系统提供信息的正确性、准确性和相关性。

1、信息的正确性是指信息是可靠的还是误传的。比如学习班学费6600，如果是6800就有误向性

2、信息的准确性是指是否有语法或拼写错误

3、信息的相关性是指是否在当前页面可以找到与当前浏览信息相关的信息列表或入口。

 

表格测试

表格经常和其他界面元素一起协同使用，主要承载数据的归纳、展示与对比的功能，是列表的一种。

比如12306网站-车票预定界面。

1、界面表格布局、颜色、风格是否统一

2、存在筛选条件、搜索控件，是否列于页面上方

3、对于日期筛选条件，是否单独处理，展示出来

4、对于多个搜索条件的场景，是否采用高级搜索按钮并将其打包收起

5、对于多个搜索条件的场景，是否配置重置按钮，便于一键清空所有搜索条件

6、在数据显示超过多条时(一屏无法完全显示，需要滚动查看时)，且表格中的数据不能直观的展示出数据类型，是否采用固定表头的形式，时刻显示数据类型

7、当字段数量过多，需要横向滚动表格，且需要对比数据时，采用固定属性列字段

8、是否支持排序，上下箭头指示排序，一般上下空心箭头默认，上箭头为升序，下箭头为降序。

 

整体界面测试

整体界面是指整个Web应用系统的页面结构设计，是给用户的一个整体感。

1、当用户浏览Web应用系统时是否感到舒适（带有主观性）

2、是否凭直觉就知道要找的信息在什么地方。

3、整个Web应用系统的设计风格是否一致。