河南中医药大学：《Web前端开发》课程理论教学资源（课件讲稿）第四讲 Web测试工具

《Web前端开发》课程理论教学部分 第四讲:Web测试工具 学时计划:2学时理论,1学时实验 (实验一:Web开发与测试工具的使用) 教学大纲: 1、Web测试综述 2、Web兼容性测试工具 3、Web功能测试工具 4、Web性能测试工具 5、Web调试工具 6、现场演 7、讨论与思考 本讲主要介绍Web测试的基本概念和内容,并重点介绍进行Web 测试的方法和测试数据指标,最后介绍常用的Web测试工具的安装和 使用方法。 通过本讲的介绍,希望培养读者Web开发的性能意识,进而开发 出高性能、高可靠的Web。 、Web测试综述 Web测试属于软件测试的范畴,是针对Web服务的特征进行的软 件测试工作。由于Web应用与用户直接相关,又通常需要承受长时间 的大量操作,因此Web项目的功能和性能都必须经过可靠的验证。这 就要对Web项目开展全面测试。Web应用程序测试与其它任何一种类 型的应用程序测试相比没有太大差别。 本讲主要面向Web前端开发的部分,进行针对性的测试研究和学 习。对于软件测试、 Web service的测试虽有涉及,但不做详细和重 点的介绍。 1.1什么是Web测试? 软件测试就是利用测试工具按照测试方案和流程对产品进行功 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs.51xuewebcn

1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第四讲：Web 测试工具 学时计划：2 学时 理论，1 学时 实验 （实验一：Web 开发与测试工具的使用） 教学大纲： 1、Web 测试综述 2、Web 兼容性测试工具 3、Web 功能测试工具 4、Web 性能测试工具 5、Web 调试工具 6、现场演示 7、讨论与思考 本讲主要介绍 Web 测试的基本概念和内容，并重点介绍进行 Web 测试的方法和测试数据指标，最后介绍常用的 Web 测试工具的安装和 使用方法。 通过本讲的介绍，希望培养读者 Web 开发的性能意识，进而开发 出高性能、高可靠的 Web。 一、Web 测试综述 Web 测试属于软件测试的范畴，是针对 Web 服务的特征进行的软 件测试工作。由于 Web 应用与用户直接相关，又通常需要承受长时间 的大量操作，因此 Web 项目的功能和性能都必须经过可靠的验证。这 就要对 Web 项目开展全面测试。Web 应用程序测试与其它任何一种类 型的应用程序测试相比没有太大差别。 本讲主要面向 Web 前端开发的部分，进行针对性的测试研究和学 习。对于软件测试、Web Service 的测试虽有涉及，但不做详细和重 点的介绍。 1.1 什么是 Web 测试？ 软件测试就是利用测试工具按照测试方案和流程对产品进行功

能和性能测试,甚至根据需要编写不同的测试工具,设计和维护测试 系统,对测试方案可能出现的问题进行分析和评估。执行测试用例后, 需要跟踪故障,以确保开发的产品适合需求。 基于Web的系统测试与传统的软件测试不同,它不但需要检查和 验证是否按照设计的要求运行,而且还要测试系统在不同用户的浏览 器端的显示是否合适。重要的是,还要从最终用户的角度进行安全性 和可用性测试。 Web测试的难点在于 Internet和Web媒体的不可预见性,例如 测试人员无法准确的定义用户的网络接入状况、使用的浏览器和操作 系统、客户计算机的类型和配置信息、用户所出的国家、语言以及个 人文化宗教等,使得基于Web的系统测试变得困难。 1.2Web测试包含的内容 通常Web测试可以分为六个部分 (1)功能测试 功能测试是对Web的具体功能进行测试,主要包括链接测试、表 单测试、数据验证测试、 Cookies测试、Web支持系统(如数据库等) 的测试、特定功能流程的测试(例如淘宝下单、购买、支付、验收、 确认等全流程)等。 (2)性能测试(包括负载/压力测试) 性能测试是对Web在高并发、高压力的情况下服务情况的测试, 主要包括连接速度测试、负载测试、压力测试等 (3)用户界面测试 用户界面测试主要是对Web的UI进行系统的测试,以确保用户 访问的UⅠ能够正常传递Web信息。主要包括导航测试、图形测试 动画测试、内容测试以及用户交互测试等。 (4)兼容性测试 兼容性测试主要是针对Web访问者的不可预见性而进行的测试, 从而确保任意用户在任何地方通过多样终端均能够正常访问Web。主 要包括操作系统兼容性测试、浏览器兼容性测试、分辨率兼容性测试 以太网接入环境兼容性测试、多智能终端兼容性测试、多语言支持测 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn

2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 能和性能测试，甚至根据需要编写不同的测试工具，设计和维护测试 系统，对测试方案可能出现的问题进行分析和评估。执行测试用例后， 需要跟踪故障，以确保开发的产品适合需求。 基于 Web 的系统测试与传统的软件测试不同，它不但需要检查和 验证是否按照设计的要求运行，而且还要测试系统在不同用户的浏览 器端的显示是否合适。重要的是，还要从最终用户的角度进行安全性 和可用性测试。 Web 测试的难点在于 Internet 和 Web 媒体的不可预见性，例如 测试人员无法准确的定义用户的网络接入状况、使用的浏览器和操作 系统、客户计算机的类型和配置信息、用户所出的国家、语言以及个 人文化宗教等，使得基于 Web 的系统测试变得困难。 1.2Web 测试包含的内容 通常 Web 测试可以分为六个部分： （1）功能测试 功能测试是对 Web 的具体功能进行测试，主要包括链接测试、表 单测试、数据验证测试、Cookies 测试、Web 支持系统（如数据库等） 的测试、特定功能流程的测试（例如淘宝下单、购买、支付、验收、 确认等全流程）等。 （2）性能测试（包括负载/压力测试） 性能测试是对 Web 在高并发、高压力的情况下服务情况的测试， 主要包括连接速度测试、负载测试、压力测试等。 （3）用户界面测试 用户界面测试主要是对 Web 的 UI 进行系统的测试，以确保用户 访问的 UI 能够正常传递 Web 信息。主要包括导航测试、图形测试、 动画测试、内容测试以及用户交互测试等。 （4）兼容性测试 兼容性测试主要是针对 Web 访问者的不可预见性而进行的测试， 从而确保任意用户在任何地方通过多样终端均能够正常访问 Web。主 要包括操作系统兼容性测试、浏览器兼容性测试、分辨率兼容性测试、 以太网接入环境兼容性测试、多智能终端兼容性测试、多语言支持测

试等。 (5)安全测试 安全测试主要对Web的安全性和表单的安全性进行测试,从而保 障Web能够稳定的提供服务。安全测试包括传输安全、表单安全、日 志、脚本安全、业务接口安全等方面的测试。 (6)接口测试 Web通常情况下都不是孤立存在的,往往会有许多对外部服务的 调用。例如位置服务的Web会有对 Google、百度等地图的调用,电 子商务网站会有对信用卡、支付网关的调用等。对于Web对外部数据 接口调用要进行全面测试,以保障业务可用性和安全性。 参考资料:http://www.5ltesting.com/htm1/57/461.html 1.3Web前端测试 在本讲中,主要介绍Web前端测试部分的工具和常用方法。 Web前端测试主要包括兼容性测试、用户界面测试、性能测试、 功能测试等部分的内容,由于用户界面测试和功能测试,没有较好的 测试方法,主要采用人工确认测试为主。 Web兼容性测试工具 Web前端的兼容性测试工具主要是浏览器及浏览器扩展工具。 2.1常用浏览器 (1) Windows Internet Explorer 软件介绍 Windows Internet Explorer, #F Microsoft Internet Explorer 简称MSIE,一般称成 Internet Explorer,简称IE,是微软公司推 出的一款网页浏览器。 主要版本 IE6、IE7、IE8、IE9、IE10 支持平台 indows 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn

3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 试等。 （5）安全测试 安全测试主要对 Web 的安全性和表单的安全性进行测试，从而保 障 Web 能够稳定的提供服务。安全测试包括传输安全、表单安全、日 志、脚本安全、业务接口安全等方面的测试。 （6）接口测试 Web 通常情况下都不是孤立存在的，往往会有许多对外部服务的 调用。例如位置服务的 Web 会有对 Google、百度等地图的调用，电 子商务网站会有对信用卡、支付网关的调用等。对于 Web 对外部数据 接口调用要进行全面测试，以保障业务可用性和安全性。 参考资料：http://www.51testing.com/html/57/461.html 1.3Web 前端测试 在本讲中，主要介绍 Web 前端测试部分的工具和常用方法。 Web 前端测试主要包括兼容性测试、用户界面测试、性能测试、 功能测试等部分的内容，由于用户界面测试和功能测试，没有较好的 测试方法，主要采用人工确认测试为主。 二、Web 兼容性测试工具 Web 前端的兼容性测试工具主要是浏览器及浏览器扩展工具。 2.1 常用浏览器 （1）Windows Internet Explorer 软件介绍： Windows Internet Explorer，原称Microsoft Internet Explorer， 简称 MSIE，一般称成 Internet Explorer，简称 IE，是微软公司推 出的一款网页浏览器。 主要版本： IE 6、IE 7、IE8、IE9、IE10 支持平台： Windows

(2) Firefox 软件介绍: Mozilla firefox,中文名通常称为“火狐”,是一个开源网页浏 览器,使用 Gecko引擎。 Firefox由 Mozilla基金会与数百个志愿者 所开发,原名“ Phoenix”(凤凰),之后改名“Mo Zilla Firebird>, (火鸟),再改为现在的名字。 Firefox浏览器也是世界上占有率较 高的浏览器。 支持平台: Windows、 Linux、MAC、I0S、 Android (3) Apple safari Safari最初是苹果计算机的Mac0SX操作系统中内置的浏览器, 用来取代之前的 Internet Explorer for Mac,早期的 Safari使用 了KDE的 KHTML作为浏览器的计算核心。目前 Safari浏览器已经支 持 Windows操作系统,并使用了 Webkit内核。 支持平台 MAC、 Windows、I0S (4)Opera 软件介绍 0pera起初是一款挪威 Opera software Asa公司制作的支持多 页面标签式浏览的网络浏览器,由于新版本的 Opera增加了大量网络 功能,官方将0pera定义为一个网络套件。 0pera支持多种操作系统,如 Windows、 Linux、Mac、 Freebsd Solaris、Be0S、0S/2、QNX等,此外, Opera还有手机用的版本,在 2006年更与 Nintendo签下合约,提供NS及Wii游乐器 Opera浏览 器软件,其支持多语言,包括简体中文和繁体中文。 支持平台: Windows、 Linux、MAC、 FreebsD、 Solaris、I0S、 Android、各 种嵌入式设备 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xuewebcn

4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn （2）Firefox 软件介绍： Mozilla Firefox，中文名通常称为“火狐”，是一个开源网页浏 览器，使用 Gecko 引擎。Firefox 由 Mozilla 基金会与数百个志愿者 所开发，原名“Phoenix”（凤凰），之后改名“Mozilla Firebird” （火鸟），再改为现在的名字。Firefox 浏览器也是世界上占有率较 高的浏览器。 支持平台： Windows、Linux、MAC、IOS、Android （3）Apple Safari Safari 最初是苹果计算机的 Mac OS X 操作系统中内置的浏览器， 用来取代之前的 Internet Explorer for Mac，早期的 Safari 使用 了 KDE 的 KHTML 作为浏览器的计算核心。目前 Safari 浏览器已经支 持 Windows 操作系统，并使用了 WebKit 内核。 支持平台： MAC、Windows、IOS （4）Opera 软件介绍： Opera 起初是一款挪威 Opera Software ASA 公司制作的支持多 页面标签式浏览的网络浏览器，由于新版本的 Opera 增加了大量网络 功能，官方将 Opera 定义为一个网络套件。 Opera 支持多种操作系统，如 Windows、Linux、Mac、FreeBSD、 Solaris、BeOS、OS/2、QNX 等，此外，Opera 还有手机用的版本，在 2006 年更与 Nintendo 签下合约，提供 NDS 及 Wii 游乐器 Opera 浏览 器软件，其支持多语言，包括简体中文和繁体中文。 支持平台： Windows、Linux、MAC、FreeBSD、Solaris、IOS、Android、各 种嵌入式设备

(5) Google Chrome 软件介绍: Google chrome,又称 Google浏览器,是一个由 Google(谷歌) 公司开发的开放源代码的网页浏览器。该浏览器是基于其他开源软件 所撰写,包括 Webkit和 Mozilla,目标是提升稳定性、速度和安全 性,并创造出简单且有效率的使用者界面 软件的名称是来自于称作 Chrome的网路浏览器图形使用者界面 (GUI)。软件的beta测试版本在2008年9月2日发布,提供43种 语言版本,有支持 Windows平台、Mac0SX和 Linux版本提供下载 目前 Chrome已成为全球使用最广泛的浏览器之一。 支持平台 Windows、 Linux、Mac、 Android、I0S (6)Web浏览器自动化测试工具 浏览器的安全性、性能如何,直接决定了Web的访问速度。 BrowserScope软件是一个浏览器的综合性测试工具,对于Web开发 人员有着很好的帮助 网站地址http://www.browserscope.org 2.2兼容性测试工具 (1) Microsoft Expression Web SuperPreview 软件介绍 当今的浏览器之战使得90年代后期就像一次小型的战争。除了 Firefox和IE,还有 Safari、 Opera和 Chrome的跨平台版本,以及 大量的手机浏览器。除此以外,这些浏览器又有多个版本,它们当中 又有很多不同的呈现特性(例如IE6/7/8/9)。 大多浏览器的不同版本之间不能同时存在。新版本替换旧版本。 所以,在同一台机器上,不能同时安装IE6、IE7、IE8等(除非你使 用虚拟机或者不稳定的注册表技巧)。 Expression Web Super preview是 Microsoft伴随着 Expression Web发布的支持开发人员在不同的浏览器中模拟呈现Web页以检测布 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn

5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn （5）Google Chrome 软件介绍： Google Chrome，又称 Google 浏览器，是一个由 Google（谷歌） 公司开发的开放源代码的网页浏览器。该浏览器是基于其他开源软件 所撰写，包括 WebKit 和 Mozilla，目标是提升稳定性、速度和安全 性，并创造出简单且有效率的使用者界面。 软件的名称是来自于称作 Chrome 的网路浏览器图形使用者界面 （GUI）。软件的 beta 测试版本在 2008 年 9 月 2 日发布，提供 43 种 语言版本，有支持 Windows 平台、Mac OS X 和 Linux 版本提供下载。 目前 Chrome 已成为全球使用最广泛的浏览器之一。 支持平台： Windows、Linux、Mac、Android、IOS （6）Web 浏览器自动化测试工具 浏览器的安全性、性能如何，直接决定了 Web 的访问速度。 BrowserScope 软件是一个浏览器的综合性测试工具，对于 Web 开发 人员有着很好的帮助。 网站地址：http://www.browserscope.org 2.2 兼容性测试工具 （1）Microsoft Expression Web SuperPreview 软件介绍： 当今的浏览器之战使得 90 年代后期就像一次小型的战争。除了 Firefox 和 IE，还有 Safari、Opera 和 Chrome 的跨平台版本，以及 大量的手机浏览器。除此以外，这些浏览器又有多个版本，它们当中 又有很多不同的呈现特性（例如 IE6/7/8/9）。 大多浏览器的不同版本之间不能同时存在。新版本替换旧版本。 所以，在同一台机器上，不能同时安装 IE6、IE7、IE8 等（除非你使 用虚拟机或者不稳定的注册表技巧）。 Expression Web Super Preview 是 Microsoft 伴随着 Expression Web 发布的支持开发人员在不同的浏览器中模拟呈现 Web 页以检测布