网站是B/S架构的典型,从做网站的有限经验来整理一下B/S测试的基本要点,并把它与C/S进行区分。

与C/S相比,以下4个测试是除了常用测试外还要注意的:

   (1)链接测试 (2)表单测试 (3)脚本测试 (4)ActiveX控件测试

一、重要的放前面,C/S是不用考虑浏览器兼容的,因此网页关于兼容的测试分以下4个方面:

1.不同内核的浏览器,主要分为IE(trident)、火狐(Gecko)、chrome(chromium)、Safari(webkit)  其实chromium是修改后用于chrome的WEBKIT内核,集成了pdf插件、flash插件。由于oprea现在也用webkit,所以不用考虑opera以前的presto内核。(在我另一篇博客中,详细讲了不同浏览器的内核及WEB工作原理)

2.不同分辨率。主流的是如1024x768,1366x700。(http://blog.sina.com.cn/s/blog_6741c73e0101byce.html)

3.不同的操作系统(Linux、Windows、iOS)

4.不同显示器(电脑、平板、智能手机--Android or iOS)


下面这个表是粘贴过来后自己修改添加的B/S基本界面测试点:

总的来说,测试要点就是 标题栏、文字、窗体、菜单、控件、图片、颜色搭配和提示框。

测试内容 测试点
页面显示

1、浏览器窗口放大缩小时页面刷新是否正确美观;
2、电脑显示屏是宽屏或标屏下页面元素显示是否正确,是否美观;
3、用户常用的几种分辨率下页面元素显示是否正确,是否美观。
4、字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观,很少使用超过12号的字体。
5、前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。
6、页面弹出式提示界面必须大小合理,布局美观,符合系统风格。

7.长宽比例协调(黄金比例1:0.618)

页面布局

(合理性)

1、布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。
2、相关页面元素的外形是否美观大方,大小是否合适,位置和页面的风格是否协调。
3、页面相关说明性文字的位置是否正确合适,鼠标定位在需说明的控件上时相关提示信息位置是否合理。

页面风格

(一致性)

1、同一系统中不同页面的整体风格是否一致,是否美观;
2、各页面背景、色调是否正确,是否美观,是否适合应用环境。
3、主色调要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。
易用性

1、按钮名称易懂,用词准确,屏弃多义性字眼,要与同一界面上的其他按钮易于区分,能望文知意最好。
2、对于完成同一功能的控件需要集中放置,减少鼠标移动;Tab键的顺序与控件排列顺序要一致,目前流行总体从上到下,
同时行间从左到右的方式。
3、默认按钮要支持Enter及选操作,即按Enter后自动执行默认按钮对应操作。
4、页面要支持键盘自动浏览按钮功能,即按Tab键、回車鍵的自动切换功能。
5、页面输入控件的选择要合理合适,同一界面复选框不能出现太多,下拉列表选项也不宜太多。
6、常用菜单功能需提供操作快捷键,快捷键的定义应符合大众操作习惯
7、页面存在工具栏的,工具栏需要设置默认停靠位置,工具栏长度不能太长,工具栏上的按钮需提供提示信息,
工具栏功能可以用户自行定制。

8.重要信息需要醒目

9.同一界面控件数<10

友好性 1、对于需要等待的操作,如果时间稍长就应该提供进度条显示
2、菜单深度一般要控制在三层以内,树状结构类似。
3、滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。
4、对用户操作需要反馈足够的信息,例如提示、警告、或错误,信息表达应该清楚、明了、恰当、准确。
特殊字符 ~ , ` , ! , @ , # , $ , % , ^ , & , * , ( , ) , ; , | , \ , / , < , > , , , . , { , } ,
 [ , ] , ' , " 。一般的输入框中需要屏蔽上面列举的特殊字符,使其不能输入。
 http://www.cnblogs.com/luluping/archive/2009/06/12/1501806.html 这个博文讲B/S测试还挺详细的,马克。

B/S C/S架构的界面测试的更多相关文章

  1. Visual Studio 单元测试之六---UI界面测试

    原文:Visual Studio 单元测试之六---UI界面测试 UI界面测试其实就是录制操作路径(Mapping),然后按照路径还原操作顺序的一个过程.这个方法对于Winform和Webform都同 ...

  2. web测试之界面测试

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

  3. [Xcode 实际操作]七、文件与数据-(23)UI Testing系统界面测试功能的使用

    目录:[Swift]Xcode实际操作 本文将演示UI Testing系统界面测试功能的使用. 如果项目中尚未引入界面测试功能,请点击项目属性面板->[General]面板左下角的[+]图标 - ...

  4. B/S架构的网站测试

      一.功能测试 1.链接测试 链接是Web应用系统的一个主要特征,它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段.链接测试可分为三个方面.首先,测试所有链接是否按指示的那样确实链接到了 ...

  5. UI界面测试

    概念:指测试用户界面的风格是否满足用户要求.文字是否正确.页面是否美观.文字与图片组合是否完美.操作是否友好等. 1.窗体测试 { 窗体大小. 移动窗体. 缩放窗体. 显示分辨率. 状态栏. 工具栏. ...

  6. python学习之——调用adb命令完成移动端界面测试

    实现原理 Hierarchy Viewer:获得当前手机实时的UI信息,方便用于手机的自动化测试: python中的subprocess.Popen():调用系统命令: uiautomator工具:获 ...

  7. 基于.net的微服务架构的开发测试环境运维实践

    眼下,做互联网应用,最火的架构是微服务,最热的研发管理就是DevOps, 没有之一.微服务.DevOps已经被大量应用,它们已经像传说中的那样,可以无所不能.特来电云平台,通过近两年多的实践,发现完全 ...

  8. Android 架构 2.界面

    其中,最上层的界面,是变化最频繁的一个层面,也是最复杂最容易出问题的一个层面,如果规划不好,很容易做着做着,又乱成一团了.要规划好界面层,至少应该遵循几条基本的原则: 保持规范性:定义好开发规范,包括 ...

  9. Sentry 监控 - Snuba 数据中台架构(编写和测试 Snuba 查询)

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

随机推荐

  1. 2016国产恐怖惊悚《诡娃》HD720P.国语中字

    导演: 蒋国权编剧: 任旭东主演: 李抒航 / 程媛媛 / 孔维类型: 惊悚 / 恐怖制片国家/地区: 中国大陆语言: 汉语普通话上映日期: 2016-02-25(中国大陆)片长: 89分钟诡娃的剧情 ...

  2. 20135202闫佳歆--week 8 课本第4章学习笔记

    第四章 进程调度 一.多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统. 多任务操作系统使多个进程处于堵塞或者睡眠状态,实际不被投入执行,这些任务尽管位于内存,但是并不处于可运行状态. ...

  3. 移动APP为什么要开发两套Android和IOS-桥接模式

    一.前言 现在用H5开发个 web app 多么方便,兼容两大系统Andriod和IOS.但是为什么许多公司还要开发原生的APP?开发原生的APP就需要开发两套一套运行在Andriod系统的,一套运行 ...

  4. CSS3小分队——进击的border-radius

    上一篇:<CSS float属性小解——”浮“生若水> 写在前面: ~~强势插入~~如果有想进一步了解float属性的小伙伴,可以猛戳上面的链接,<CSS float属性小解——”浮 ...

  5. windows API 开发飞机订票系统 图形化界面 (四)

    接下来的是录入航班.修改航班信息功能的实现: //录入航班 BOOL EntryFlight(HWND hEntryDlg){ TCHAR szDiscount[]; TCHAR szFare[],s ...

  6. 如何使用开源库,吐在VS2013发布之前,顺便介绍下VS2013的新特性"Bootstrap"

    刚看到Visual Studio 2013 Preview - ASP.NET, MVC 5, Web API 2新功能搶先看 看了下VS2013带来的"新特性",直觉上看,除了引 ...

  7. (旧)子数涵数·Flash——路径补间

    一.打开flash软件(图为flash8) 二.创建新项目->Flash文档 三.使用椭圆工具,绘制一个圆形图像(快捷键为O,很形象吧) 四.在后面若干帧中插入关键帧,并移动刚刚绘制好的图像的位 ...

  8. word删除水平线(分割线)的方法(原创)

    在word里面,有时候我们会输入3个“-”或者“=”等符合,然后一个回车,生成了一条水平线(分割线). 研究了很久,今天终于发现删除它的方法了. 选中文本,点“格式”,选中“边框和底线”,点第一个子页 ...

  9. jQuery基础之(六)jQuery浏览器的兼容性(以CSS3特写兼容举例)

    CSS3充分吸收多年了web发展的需求,吸收了很多新颖的特性.例如border-radius css3特性中最令人兴奋的莫过于选择器的增强,例如属性选择器可以根据某个属性值来选择标记,位置选择器可以根 ...

  10. HTML5——单次定位请求

    单次定位请求及点击一次只发出一次请求 下面是个获取经纬度的简单Demo 简要截图如下: 简要代码如下: <!DOCTYPE html> <html> <head> ...