《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前端开发的部分，进行针对性的测试研究和学习。
对于软件测试、WebService的测试虽有涉及，但不做详细和重点的介绍。
1.1什么是Web测试？软件测试就是利用测试工具按照测试方案和流程对产品进行功 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 能和性能测试，甚至根据需要编写不同的测试工具，设计和维护测试系统，对测试方案可能出现的问题进行分析和评估。
执行测试用例后，需要跟踪故障，以确保开发的产品适合需求。
基于Web的系统测试与传统的软件测试不同，它不但需要检查和验证是否按照设计的要求运行，而且还要测试系统在不同用户的浏览器端的显示是否合适。
重要的是，还要从最终用户的角度进行安全性和可用性测试。
Web测试的难点在于和Web媒体的不可预见性，例如测试人员无法准确的定义用户的网络接入状况、使用的浏览器和操作系统、客户计算机的类型和配置信息、用户所出的国家、语言以及个人文化宗教等，使得基于Web的系统测试变得困难。
1.2Web测试包含的内容通常Web测试可以分为六个部分：
（1）功能测试功能测试是对Web的具体功能进行测试，主要包括链接测试、表单测试、数据验证测试、Cookies测试、Web支持系统（如数据库等）的测试、特定功能流程的测试（例如淘宝下单、购买、支付、验收、确认等全流程）等。
（2）性能测试（包括负载/压力测试）性能测试是对Web在高并发、高压力的情况下服务情况的测试，主要包括连接速度测试、负载测试、压力测试等。
（3）用户界面测试用户界面测试主要是对Web的UI进行系统的测试，以确保用户访问的UI能够正常传递Web信息。
主要包括导航测试、图形测试、动画测试、内容测试以及用户交互测试等。
（4）兼容性测试兼容性测试主要是针对Web访问者的不可预见性而进行的测试，从而确保任意用户在任何地方通过多样终端均能够正常访问Web。
主要包括操作系统兼容性测试、浏览器兼容性测试、分辨率兼容性测试、以太网接入环境兼容性测试、多智能终端兼容性测试、多语言支持测 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 试等。
（5）安全测试安全测试主要对Web的安全性和表单的安全性进行测试，从而保 障Web能够稳定的提供服务。
安全测试包括传输安全、表单安全、日志、脚本安全、业务接口安全等方面的测试。
（6）接口测试Web通常情况下都不是孤立存在的，往往会有许多对外部服务的调用。
例如位置服务的Web会有对Google、百度等地图的调用，电子商务网站会有对信用卡、支付网关的调用等。
对于Web对外部数据接口调用要进行全面测试，以保障业务可用性和安全性。
参考资料： 1.3Web前端测试在本讲中，主要介绍Web前端测试部分的工具和常用方法。
Web前端测试主要包括兼容性测试、用户界面测试、性能测试、功能测试等部分的内容，由于用户界面测试和功能测试，没有较好的测试方法，主要采用人工确认测试为主。
二、Web兼容性测试工具 Web前端的兼容性测试工具主要是浏览器及浏览器扩展工具。
2.1常用浏览器
（1）WindowsExplorer软件介绍：WindowsExplorer，原称MicrosoftExplorer，简称MSIE，一般称成Explorer，简称IE，是微软公司推出的一款网页浏览器。
主要版本：IE6、IE7、IE8、IE9、IE10支持平台：Windows 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
（2）Firefox软件介绍：MozillaFirefox，中文名通常称为“火狐”，是一个开源网页浏览器，使用Gecko引擎。
Firefox由Mozilla基金会与数百个志愿者所开发，原名“Phoenix”（凤凰），之后改名“MozillaFirebird”（火鸟），再改为现在的名字。
Firefox浏览器也是世界上占有率较高的浏览器。
支持平台：Windows、Linux、MAC、IOS、Android
（3）AppleSafariSafari最初是苹果计算机的MacOSX操作系统中内置的浏览器，用来取代之前的ExplorerforMac，早期的Safari使用了KDE的KHTML作为浏览器的计算核心。
目前Safari浏览器已经支持Windows操作系统，并使用了WebKit内核。
支持平台：MAC、Windows、IOS
（4）Opera软件介绍：Opera起初是一款挪威OperaSoftwareASA公司制作的支持多页面标签式浏览的网络浏览器，由于新版本的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、各种嵌入式设备 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
（5）GoogleChrome软件介绍：GoogleChrome，又称Google浏览器，是一个由Google（谷歌）公司开发的开放源代码的网页浏览器。
该浏览器是基于其他开源软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
软件的名称是来自于称作Chrome的网路浏览器图形使用者界面（GUI）。
软件的beta测试版本在2008年9月2日发布，提供43种语言版本，有支持Windows平台、MacOSX和Linux版本提供下载。
目前Chrome已成为全球使用最广泛的浏览器之
一。
支持平台：Windows、Linux、Mac、Android、IOS
（6）Web浏览器自动化测试工具浏览器的安全性、性能如何，直接决定了Web的访问速度。
BrowserScope软件是一个浏览器的综合性测试工具，对于Web开发人员有着很好的帮助。
网站地址： 2.2兼容性测试工具
（1）MicrosoftExpressionWebSuperPreview软件介绍：当今的浏览器之战使得90年代后期就像一次小型的战争。
除了Firefox和IE，还有Safari、Opera和Chrome的跨平台版本，以及大量的手机浏览器。
除此以外，这些浏览器又有多个版本，它们当中又有很多不同的呈现特性（例如IE6/7/8/9）。
大多浏览器的不同版本之间不能同时存在。
新版本替换旧版本。
所以，在同一台机器上，不能同时安装IE6、IE7、IE8等（除非你使用虚拟机或者不稳定的注册表技巧）。
ExpressionWebSuperPreview是Microsoft伴随着ExpressionWeb发布的支持开发人员在不同的浏览器中模拟呈现Web页以检测布 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 局问题的Web兼容性测试工具。
SuperPreview既有独立的安装版本，也可以集成到ExpressionWeb，且独立安装文件可免费使用。
支持平台：Windows相关链接： 官方网站下载：/download/details.aspx?
id=2020
（2）IETesterIETester是一个多版本IE浏览器兼容性的测试工具，该工具支持IE5.5以上版本的各个版本。
支持平台：Windows
（3）BrowserSandboxbrowsersandbox全名叫XenocodeBrowserSandbox，能够模拟进行Firefox、GoogleChrome、Opera、Safari浏览器进行Web兼容性测试。
支持平台：Web访问：/browsers/，安装相应的插件。
（4）BrowseShot软件介绍：BrowserShots是一款免费的跨浏览器测试工具，捕捉网站在不同浏览器中的截图。
这是最有名，也是最古老的浏览器兼容性测试工具。
支持平台：Web访问：/ （5）browserseal软件介绍：BrowserSeal是一款支持独立浏览器和带有自动化脚本测试功能 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 的浏览器兼容性测试工具。
支持平台：Windows相关链接： 官方网站：/
（6）ViewLike软件介绍：Viewlike是一款新推出的工具，帮助你检查浏览器在不同分辨率下得呈现情况。
是一款比较好的分辨率兼容性测试工具。
支持平台：Web访问：http://viewlike.us/
三、Web功能测试工具 3.1链接测试
（1）Xenu’SLinkSleuth软件介绍：Xenu'sLinkSleuth(TM)checksWebsitesforbrokenlinks.Linkverificationisdoneon"normal"links,images,frames,plug-ins,backgrounds,localimagemaps,stylesheets,scriptsandjavaapplets.ItdisplaysacontinouslyupdatedlistofURLswhichyoucansortbydifferentcriteria.Areportcanbeproducedatanytime.支持平台：Windows、Linux、MAC相关链接： 官方网站：
（2）WebLinkValidator软件介绍： 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ WebLinkValidatorisapowerfullinkcheckerandsitemanagementtoolforwebmasterstochecklinksforuracyandavailability,findbrokenlinksandlinkscontainingsyntacticerrors. Theprogramcaneasilyhandlewebsitescontaininghundredsofthousandslinks(includingthelinkscodedwithJavaScriptandFlash,orembeddedintheimagemaps,scripts,appletsandforms)andoffersanumberoffeaturesthathelpwebmastersdramaticallyimprovethesiteprocessingspeedandusesystemresourcesinamoreefficientmanner. WebLinkValidatorisanessentialsolutionforsiteadministrators,webdevelopersandanyoneelsewhowantstomaintainthequalityoftheirwebsites.Itwillimproveyourpotentialcustomer'swebsiteexperiencebykeepingtrackofbrokenlinksandcheckingtheuracyofyourHTMLcode. 支持平台：Windows相关链接： 官方网站：/
（3）W3CLinkCheck软件介绍：W3C官方提供的LinkCheck工具，通过在线方式提供服务。
支持平台：Web访问：/checklink 3.2功能测试工具
（1）MaxQ软件介绍：MaxQ是一个Web功能测试工具。
它包括一个记录测试脚本的HTTP 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 代理，一个用于重放测试的命令行实用程序。
支持平台：JAVA相关链接： 官方网站： 图4-1MaxQ工作原理
（2）CanooWebTest软件介绍：CanooWebTest是一个开源的Web应用自动测试工具，它访问要测试的应用并验证返回结构，生成详细的测试结果报表。
支持平台：Windows相关链接： 官方网站：
（3）Slimdog 9《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 软件介绍：Slimdog是一个简单基于脚本的的Web应用程序测试工具。
它在httpunit的基础上进行扩展，这个工具提供一些命令来用forms进行工作，检查tables中的内容，在HTML页面之间进行链接。
用户不用写很长的JUnittestcases或必要的XML文件来进行测试，用户只需写简单的测试脚本。
脚本文件中的每一行就是包含一条命令的一个测试节点。
在同一文件中所有命令将被处理成一个testcases。
每条命令的语法简单易学，几个scripts可以组合成testsuite。
测试结果既可以写到console，也可以生成一个file或一个HTML页面。
支持平台：JAVA相关链接： 官方网站：/
（4）更多功能测试工具除了上述介绍的功能测试软件外，能够实现Web功能测试的软件很多，例如，CanooWebTest、FIT、CasperJS、WebKing、PesterCat等。
其中开源的测试软件资源非常丰富。
由于功能测试涉及的其他知识太多，就不做深入介绍。
四、Web性能测试工具 4.1Web压力测试工具当Web遇到访问高峰时，容易发生服务器响应速度变慢甚至服务中断的情况。
为了避免这种情况，需要一种能够真实模拟大量用户访问Web应用系统的测试工具进行压力测试，来测试静态HTML页面的响应时间，甚至测试动态网页的响应时间，为服务器的性能优化和调整提供数据依据。
（1）HPLoadRunner软件介绍：HPLoadRunner是应用性能测试的行业标准。
此负载测试工具通 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 过检测瓶颈来预防问题，并在开始使用前获得端到端系统的准确画面。
LoadRunner软件对各种规模的组织和项目极其灵活，可测试
一 系列的应用，包括移动应用、Ajax、Flex、HTML5、.NET、Java、GWT、Silverlight、SOAP、Citrix、ERP和原有应用。
相关链接： 官方网站：pURI=1175451&jumpid=reg_zh_c-001_title_r0002#学习资源：
（2）IBMRationalPerformanceTester软件介绍：RationalPerformanceTester是IBM开发的基于Eclipse的性能测试工具，可支持基于HTTP、Socket、SAP、Citrix协议的测试，可用于测试和验证系统的性能，监控和识别各种性能问题，为测试人员提供了一整套性能测试功能。
相关链接： 官方资料：/rational/products//zh/robot/developerworks/rational/products/performancetester/
（3）MicrosoftWebApplicationStressTool软件介绍：MicrosoftWebApplicationStressTool是由微软的网站测试人员所开发，专门用来进行实际网站压力测试的一套工具。
透过这套功能强大的压力测试工具，测试人员可以使用少量的客户端计算机仿真大量用户上线对网站服务所可能造成的影响，并形成报告。
MicrosoftWebApplicationStressTool是早期的Web测试工具，时至今日依然有众多的用户，主要是因为该工具灵活和简单易用，但该工具必须在WindowsXP或WindowsServer2000/2003系统上使用。
在VisualStudio中，集成了该工具同等功能的Web性能测试工 11《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 具。
相关链接： VisualStudioTestProfessional官方网站：/visualstudio/chs/products/visual-studio-test-professional-2012
（4）PaesslerWebServerStressTool软件介绍：PaesslerWebServerStressTool是Paessler公司的Web压力测试工具。
该工具可以模拟用户访问Web的行为开展测试工作。
通过设定模拟浏览器、访问人数、测试时间等参数，即可开展Web性能测试，测试结果通过条状图清晰直观的展示服务器的响应时间、I/O速率等相关数据。
该工具支持HTTP的网页测试外，还支持对动态网页的测试。
并且可以在测试时指定Web访问的Proxy设定、密码输入、Cookies与Session-IDs等自定义参数。
相关链接： 官方网站：/webstress
（5）WAPT软件介绍：WAPTisaloadandstresstestingtoolthatprovidesaneasy-to-useandcost-effectivewaytotestanywebsite,includingbusinessapplications,mobilesites,webportals,etc.WithWAPTyoucancreateloadtestsinamatterofminutes.Afewclicksarerequiredtomakethousandsvirtualusersexecuteconcurrentsessionsagainstyourwebsite.TheproductsupportstestingofRIAapplicationsinthedata-drivenmode.ItworkswithsecureHTTPSpagesandalltypesofauthentication.Descriptivegraphsandreportswillletyouanalyzetheperformancecharacteristicsofyourponentsundervariousloadconditions,isolateandfixanybottlenecksand 12《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ optimizeyoursoftwareandhardwareconfiguration.相关链接： 官方网站：/
（6）WebLoad软件介绍：WebLOADProfessionalisRadView'saward-winningsoftwareforperformancetestingofapplications.Installedatover3,500+panies,WebLOADProfessionalisthepremierfield-provensolutionfortestinganapplication'sabilitytohandlethedemandsofactualcustomeruseandlaunchingitwithconfidence.相关链接： 官方网站：/product/Product.aspx 4.2Web性能分析工具Web性能分析工具主要有四类：测试Web页面资源加载速度、测试Web页面加载后的渲染性能、JS性能测试、Web总体测试和优化建议。
（1）HttpWatch软件介绍：HttpWatch是一款集成的HTTP嗅探器，为IE和Firefox提供新的方法以查看网站的负载和运行情况。
支持平台：IE、Firefox相关链接： 官方网站： （2）dynaTraceAJAXEdition软件介绍： 13《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ dynaTrace是免费工具，该工具可以检测资源加载并绘制瀑布图。
dynaTraceAJAXEdition是一个详细的底层追踪工具，它不仅可以显示所有请求和文件在网络中传输的时间，还会记录浏览器Render、CPU消耗、JavaScript解析和运行情况等详细的信息 支持平台：Windows
（3）SpeedTrace软件介绍：SpeedTrace是googlechrome的1个插件，speedtrace的优势点是用于监控JS的解析执行时间，还可以监控页面的重绘、回流。
该软件通过GoogleChrome的“扩展程序”功能进行安装。
支持平台：Chrome
（4）PageSpeed软件介绍：Pagespeed是基于Firefox和Chrome的工具，主要可以对页面进行百分制的评分，而且会显示对各项的改进意见，PageSpeed也能检测到JS的解析时间。
支持平台：Firefox、Chrome
（5）YSlow软件介绍：YSlow跟PageSpeed一样是基于Firefox和Chrome的插件，功能与pagespeed类似，对各种影响网站性能的因素进行评分并给出合理的建议，YSlow是yahoo开发的工具。
支持平台：Firefox、Chrome 14《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
（6）WebPageTest软件介绍：WebPageTest原本是由AOL开发内部使用的工具，后来在GoogleCode上开源，是一款非常优秀的网页前端性能测试工具。
WebPageTest可以提供非常完整的页面响应数据，从整个页面的加载时间，到连接的建立时间以及第一个字节的获取时间等。
测试结束后会生成的一个瀑布图，其中包含了每一个页面元素的响应数据。
支持平台：Web访问：相关链接： 官方网站：/GoogleCode:/p/webpagetest/
五、Web调试工具 任何软件开发都需要相应的调试工具，尽管相对来说，前端的调试要简单一些，但使用一些调试工具或插件还是能提高开发效率。
目前，支持各种浏览器的Web调试工具比较丰富，并且各浏览器都默认内置了开发工具。
（1）IE浏览器：F12开发人员工具该工具为IE浏览器内置的开发工具。
（2）Firefox浏览器：Firebug软件介绍：Firebug是网页浏览器MozillaFirefox下的一款开发类插件。
它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的工具。
Firebug从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。
Firebug也是一个除错工具。
用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、DOM以及JavaScript代码。
15《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 支持平台：Firefox、Chrome（Lite）
（3）Firefox浏览器：Web开发者工具该工具为Firefox浏览器内置的开发工具。
（4）Chrome浏览器：开发工具该工具为Chrome浏览器内置的开发工具。
（5）Web标准验证由WorldWideWebConsortium（W3C）提供的验证服务，可以为互联网用户检查HTML文件是否附合HTML或XHTML标准。
还可以向网页设计师提供快速检查网页错误的方法。
Web访问：
（6）CSS验证由WorldWideWebConsortium（W3C）提供的验证服务，可以检查层叠样式表（CSS）文档和HTML或者XHTML文档中的CSS内容是否规范和符合要求。
Web访问：/css-validator/
六、现场演示6.1Web兼容性测试工具
（1）MicrosoftExpressionWebSuperPreview的安装与使用（2）browserseal进行兼容性测试
（3）BrowserSandbox进行兼容性测试
（4）BrowseShot进行兼容性测试
（5）ViewLike进行浏览器分辨率测试 6.2Web功能测试工具
（1）Xenu’SLinkSleuth安装并进行链接测试 16《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
（2）WebLinkValidator安装并进行链接测试 6.3Web性能测试工具
（1）PaesslerWebServerStressTool进行性能测试
（2）WAPT进行性能测试
（3）WebLoad进行性能测试
（4）HttpWatch进行性能测试
（5）SpeedTrace进行性能测试
（6）PageSpeed进行Web综合性能分析
（7）YSlow进行Web综合性能分析
（8）WebPageTest进行远程Web综合性能分析 6.4Web调试工具
（1）Chrome浏览器的开发工具的使用
（2）Firefox浏览器的Web开发者工具的使用
（3）IE浏览器的F12开发人员工具的使用
（4）Web标准验证工具的使用
七、讨论与思考7.1Web性能测试报告与调优
（1）如何确保Web性能测试数据的科学性？
（2）如何通过Web性能测试报告开展Web性能调优工作？ 7.2移动Web测试工具有哪些？
（1）本讲介绍的Web测试工具是否可以应用于移动Web测试工作？
（2）移动Web测试和Web测试有哪些不同？ 17《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
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前端开发的部分，进行针对性的测试研究和学习。
对于软件测试、WebService的测试虽有涉及，但不做详细和重点的介绍。
1.1什么是Web测试？软件测试就是利用测试工具按照测试方案和流程对产品进行功 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 能和性能测试，甚至根据需要编写不同的测试工具，设计和维护测试系统，对测试方案可能出现的问题进行分析和评估。
执行测试用例后，需要跟踪故障，以确保开发的产品适合需求。
基于Web的系统测试与传统的软件测试不同，它不但需要检查和验证是否按照设计的要求运行，而且还要测试系统在不同用户的浏览器端的显示是否合适。
重要的是，还要从最终用户的角度进行安全性和可用性测试。
Web测试的难点在于和Web媒体的不可预见性，例如测试人员无法准确的定义用户的网络接入状况、使用的浏览器和操作系统、客户计算机的类型和配置信息、用户所出的国家、语言以及个人文化宗教等，使得基于Web的系统测试变得困难。
1.2Web测试包含的内容通常Web测试可以分为六个部分：
（1）功能测试功能测试是对Web的具体功能进行测试，主要包括链接测试、表单测试、数据验证测试、Cookies测试、Web支持系统（如数据库等）的测试、特定功能流程的测试（例如淘宝下单、购买、支付、验收、确认等全流程）等。
（2）性能测试（包括负载/压力测试）性能测试是对Web在高并发、高压力的情况下服务情况的测试，主要包括连接速度测试、负载测试、压力测试等。
（3）用户界面测试用户界面测试主要是对Web的UI进行系统的测试，以确保用户访问的UI能够正常传递Web信息。
主要包括导航测试、图形测试、动画测试、内容测试以及用户交互测试等。
（4）兼容性测试兼容性测试主要是针对Web访问者的不可预见性而进行的测试，从而确保任意用户在任何地方通过多样终端均能够正常访问Web。
主要包括操作系统兼容性测试、浏览器兼容性测试、分辨率兼容性测试、以太网接入环境兼容性测试、多智能终端兼容性测试、多语言支持测 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 试等。
（5）安全测试安全测试主要对Web的安全性和表单的安全性进行测试，从而保 障Web能够稳定的提供服务。
安全测试包括传输安全、表单安全、日志、脚本安全、业务接口安全等方面的测试。
（6）接口测试Web通常情况下都不是孤立存在的，往往会有许多对外部服务的调用。
例如位置服务的Web会有对Google、百度等地图的调用，电子商务网站会有对信用卡、支付网关的调用等。
对于Web对外部数据接口调用要进行全面测试，以保障业务可用性和安全性。
参考资料： 1.3Web前端测试在本讲中，主要介绍Web前端测试部分的工具和常用方法。
Web前端测试主要包括兼容性测试、用户界面测试、性能测试、功能测试等部分的内容，由于用户界面测试和功能测试，没有较好的测试方法，主要采用人工确认测试为主。
二、Web兼容性测试工具 Web前端的兼容性测试工具主要是浏览器及浏览器扩展工具。
2.1常用浏览器
（1）WindowsExplorer软件介绍：WindowsExplorer，原称MicrosoftExplorer，简称MSIE，一般称成Explorer，简称IE，是微软公司推出的一款网页浏览器。
主要版本：IE6、IE7、IE8、IE9、IE10支持平台：Windows 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
（2）Firefox软件介绍：MozillaFirefox，中文名通常称为“火狐”，是一个开源网页浏览器，使用Gecko引擎。
Firefox由Mozilla基金会与数百个志愿者所开发，原名“Phoenix”（凤凰），之后改名“MozillaFirebird”（火鸟），再改为现在的名字。
Firefox浏览器也是世界上占有率较高的浏览器。
支持平台：Windows、Linux、MAC、IOS、Android
（3）AppleSafariSafari最初是苹果计算机的MacOSX操作系统中内置的浏览器，用来取代之前的ExplorerforMac，早期的Safari使用了KDE的KHTML作为浏览器的计算核心。
目前Safari浏览器已经支持Windows操作系统，并使用了WebKit内核。
支持平台：MAC、Windows、IOS
（4）Opera软件介绍：Opera起初是一款挪威OperaSoftwareASA公司制作的支持多页面标签式浏览的网络浏览器，由于新版本的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、各种嵌入式设备 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
（5）GoogleChrome软件介绍：GoogleChrome，又称Google浏览器，是一个由Google（谷歌）公司开发的开放源代码的网页浏览器。
该浏览器是基于其他开源软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
软件的名称是来自于称作Chrome的网路浏览器图形使用者界面（GUI）。
软件的beta测试版本在2008年9月2日发布，提供43种语言版本，有支持Windows平台、MacOSX和Linux版本提供下载。
目前Chrome已成为全球使用最广泛的浏览器之
一。
支持平台：Windows、Linux、Mac、Android、IOS
（6）Web浏览器自动化测试工具浏览器的安全性、性能如何，直接决定了Web的访问速度。
BrowserScope软件是一个浏览器的综合性测试工具，对于Web开发人员有着很好的帮助。
网站地址： 2.2兼容性测试工具
（1）MicrosoftExpressionWebSuperPreview软件介绍：当今的浏览器之战使得90年代后期就像一次小型的战争。
除了Firefox和IE，还有Safari、Opera和Chrome的跨平台版本，以及大量的手机浏览器。
除此以外，这些浏览器又有多个版本，它们当中又有很多不同的呈现特性（例如IE6/7/8/9）。
大多浏览器的不同版本之间不能同时存在。
新版本替换旧版本。
所以，在同一台机器上，不能同时安装IE6、IE7、IE8等（除非你使用虚拟机或者不稳定的注册表技巧）。
ExpressionWebSuperPreview是Microsoft伴随着ExpressionWeb发布的支持开发人员在不同的浏览器中模拟呈现Web页以检测布 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 局问题的Web兼容性测试工具。
SuperPreview既有独立的安装版本，也可以集成到ExpressionWeb，且独立安装文件可免费使用。
支持平台：Windows相关链接： 官方网站下载：/download/details.aspx?
id=2020
（2）IETesterIETester是一个多版本IE浏览器兼容性的测试工具，该工具支持IE5.5以上版本的各个版本。
支持平台：Windows
（3）BrowserSandboxbrowsersandbox全名叫XenocodeBrowserSandbox，能够模拟进行Firefox、GoogleChrome、Opera、Safari浏览器进行Web兼容性测试。
支持平台：Web访问：/browsers/，安装相应的插件。
（4）BrowseShot软件介绍：BrowserShots是一款免费的跨浏览器测试工具，捕捉网站在不同浏览器中的截图。
这是最有名，也是最古老的浏览器兼容性测试工具。
支持平台：Web访问：/ （5）browserseal软件介绍：BrowserSeal是一款支持独立浏览器和带有自动化脚本测试功能 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 的浏览器兼容性测试工具。
支持平台：Windows相关链接： 官方网站：/
（6）ViewLike软件介绍：Viewlike是一款新推出的工具，帮助你检查浏览器在不同分辨率下得呈现情况。
是一款比较好的分辨率兼容性测试工具。
支持平台：Web访问：http://viewlike.us/
三、Web功能测试工具 3.1链接测试
（1）Xenu’SLinkSleuth软件介绍：Xenu'sLinkSleuth(TM)checksWebsitesforbrokenlinks.Linkverificationisdoneon"normal"links,images,frames,plug-ins,backgrounds,localimagemaps,stylesheets,scriptsandjavaapplets.ItdisplaysacontinouslyupdatedlistofURLswhichyoucansortbydifferentcriteria.Areportcanbeproducedatanytime.支持平台：Windows、Linux、MAC相关链接： 官方网站：
（2）WebLinkValidator软件介绍： 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ WebLinkValidatorisapowerfullinkcheckerandsitemanagementtoolforwebmasterstochecklinksforuracyandavailability,findbrokenlinksandlinkscontainingsyntacticerrors. Theprogramcaneasilyhandlewebsitescontaininghundredsofthousandslinks(includingthelinkscodedwithJavaScriptandFlash,orembeddedintheimagemaps,scripts,appletsandforms)andoffersanumberoffeaturesthathelpwebmastersdramaticallyimprovethesiteprocessingspeedandusesystemresourcesinamoreefficientmanner. WebLinkValidatorisanessentialsolutionforsiteadministrators,webdevelopersandanyoneelsewhowantstomaintainthequalityoftheirwebsites.Itwillimproveyourpotentialcustomer'swebsiteexperiencebykeepingtrackofbrokenlinksandcheckingtheuracyofyourHTMLcode. 支持平台：Windows相关链接： 官方网站：/
（3）W3CLinkCheck软件介绍：W3C官方提供的LinkCheck工具，通过在线方式提供服务。
支持平台：Web访问：/checklink 3.2功能测试工具
（1）MaxQ软件介绍：MaxQ是一个Web功能测试工具。
它包括一个记录测试脚本的HTTP 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 代理，一个用于重放测试的命令行实用程序。
支持平台：JAVA相关链接： 官方网站： 图4-1MaxQ工作原理
（2）CanooWebTest软件介绍：CanooWebTest是一个开源的Web应用自动测试工具，它访问要测试的应用并验证返回结构，生成详细的测试结果报表。
支持平台：Windows相关链接： 官方网站：
（3）Slimdog 9《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 软件介绍：Slimdog是一个简单基于脚本的的Web应用程序测试工具。
它在httpunit的基础上进行扩展，这个工具提供一些命令来用forms进行工作，检查tables中的内容，在HTML页面之间进行链接。
用户不用写很长的JUnittestcases或必要的XML文件来进行测试，用户只需写简单的测试脚本。
脚本文件中的每一行就是包含一条命令的一个测试节点。
在同一文件中所有命令将被处理成一个testcases。
每条命令的语法简单易学，几个scripts可以组合成testsuite。
测试结果既可以写到console，也可以生成一个file或一个HTML页面。
支持平台：JAVA相关链接： 官方网站：/
（4）更多功能测试工具除了上述介绍的功能测试软件外，能够实现Web功能测试的软件很多，例如，CanooWebTest、FIT、CasperJS、WebKing、PesterCat等。
其中开源的测试软件资源非常丰富。
由于功能测试涉及的其他知识太多，就不做深入介绍。
四、Web性能测试工具 4.1Web压力测试工具当Web遇到访问高峰时，容易发生服务器响应速度变慢甚至服务中断的情况。
为了避免这种情况，需要一种能够真实模拟大量用户访问Web应用系统的测试工具进行压力测试，来测试静态HTML页面的响应时间，甚至测试动态网页的响应时间，为服务器的性能优化和调整提供数据依据。
（1）HPLoadRunner软件介绍：HPLoadRunner是应用性能测试的行业标准。
此负载测试工具通 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 过检测瓶颈来预防问题，并在开始使用前获得端到端系统的准确画面。
LoadRunner软件对各种规模的组织和项目极其灵活，可测试
一 系列的应用，包括移动应用、Ajax、Flex、HTML5、.NET、Java、GWT、Silverlight、SOAP、Citrix、ERP和原有应用。
相关链接： 官方网站：pURI=1175451&jumpid=reg_zh_c-001_title_r0002#学习资源：
（2）IBMRationalPerformanceTester软件介绍：RationalPerformanceTester是IBM开发的基于Eclipse的性能测试工具，可支持基于HTTP、Socket、SAP、Citrix协议的测试，可用于测试和验证系统的性能，监控和识别各种性能问题，为测试人员提供了一整套性能测试功能。
相关链接： 官方资料：/rational/products//zh/robot/developerworks/rational/products/performancetester/
（3）MicrosoftWebApplicationStressTool软件介绍：MicrosoftWebApplicationStressTool是由微软的网站测试人员所开发，专门用来进行实际网站压力测试的一套工具。
透过这套功能强大的压力测试工具，测试人员可以使用少量的客户端计算机仿真大量用户上线对网站服务所可能造成的影响，并形成报告。
MicrosoftWebApplicationStressTool是早期的Web测试工具，时至今日依然有众多的用户，主要是因为该工具灵活和简单易用，但该工具必须在WindowsXP或WindowsServer2000/2003系统上使用。
在VisualStudio中，集成了该工具同等功能的Web性能测试工 11《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 具。
相关链接： VisualStudioTestProfessional官方网站：/visualstudio/chs/products/visual-studio-test-professional-2012
（4）PaesslerWebServerStressTool软件介绍：PaesslerWebServerStressTool是Paessler公司的Web压力测试工具。
该工具可以模拟用户访问Web的行为开展测试工作。
通过设定模拟浏览器、访问人数、测试时间等参数，即可开展Web性能测试，测试结果通过条状图清晰直观的展示服务器的响应时间、I/O速率等相关数据。
该工具支持HTTP的网页测试外，还支持对动态网页的测试。
并且可以在测试时指定Web访问的Proxy设定、密码输入、Cookies与Session-IDs等自定义参数。
相关链接： 官方网站：/webstress
（5）WAPT软件介绍：WAPTisaloadandstresstestingtoolthatprovidesaneasy-to-useandcost-effectivewaytotestanywebsite,includingbusinessapplications,mobilesites,webportals,etc.WithWAPTyoucancreateloadtestsinamatterofminutes.Afewclicksarerequiredtomakethousandsvirtualusersexecuteconcurrentsessionsagainstyourwebsite.TheproductsupportstestingofRIAapplicationsinthedata-drivenmode.ItworkswithsecureHTTPSpagesandalltypesofauthentication.Descriptivegraphsandreportswillletyouanalyzetheperformancecharacteristicsofyourponentsundervariousloadconditions,isolateandfixanybottlenecksand 12《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ optimizeyoursoftwareandhardwareconfiguration.相关链接： 官方网站：/
（6）WebLoad软件介绍：WebLOADProfessionalisRadView'saward-winningsoftwareforperformancetestingofapplications.Installedatover3,500+panies,WebLOADProfessionalisthepremierfield-provensolutionfortestinganapplication'sabilitytohandlethedemandsofactualcustomeruseandlaunchingitwithconfidence.相关链接： 官方网站：/product/Product.aspx 4.2Web性能分析工具Web性能分析工具主要有四类：测试Web页面资源加载速度、测试Web页面加载后的渲染性能、JS性能测试、Web总体测试和优化建议。
（1）HttpWatch软件介绍：HttpWatch是一款集成的HTTP嗅探器，为IE和Firefox提供新的方法以查看网站的负载和运行情况。
支持平台：IE、Firefox相关链接： 官方网站： （2）dynaTraceAJAXEdition软件介绍： 13《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ dynaTrace是免费工具，该工具可以检测资源加载并绘制瀑布图。
dynaTraceAJAXEdition是一个详细的底层追踪工具，它不仅可以显示所有请求和文件在网络中传输的时间，还会记录浏览器Render、CPU消耗、JavaScript解析和运行情况等详细的信息 支持平台：Windows
（3）SpeedTrace软件介绍：SpeedTrace是googlechrome的1个插件，speedtrace的优势点是用于监控JS的解析执行时间，还可以监控页面的重绘、回流。
该软件通过GoogleChrome的“扩展程序”功能进行安装。
支持平台：Chrome
（4）PageSpeed软件介绍：Pagespeed是基于Firefox和Chrome的工具，主要可以对页面进行百分制的评分，而且会显示对各项的改进意见，PageSpeed也能检测到JS的解析时间。
支持平台：Firefox、Chrome
（5）YSlow软件介绍：YSlow跟PageSpeed一样是基于Firefox和Chrome的插件，功能与pagespeed类似，对各种影响网站性能的因素进行评分并给出合理的建议，YSlow是yahoo开发的工具。
支持平台：Firefox、Chrome 14《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
（6）WebPageTest软件介绍：WebPageTest原本是由AOL开发内部使用的工具，后来在GoogleCode上开源，是一款非常优秀的网页前端性能测试工具。
WebPageTest可以提供非常完整的页面响应数据，从整个页面的加载时间，到连接的建立时间以及第一个字节的获取时间等。
测试结束后会生成的一个瀑布图，其中包含了每一个页面元素的响应数据。
支持平台：Web访问：相关链接： 官方网站：/GoogleCode:/p/webpagetest/
五、Web调试工具 任何软件开发都需要相应的调试工具，尽管相对来说，前端的调试要简单一些，但使用一些调试工具或插件还是能提高开发效率。
目前，支持各种浏览器的Web调试工具比较丰富，并且各浏览器都默认内置了开发工具。
（1）IE浏览器：F12开发人员工具该工具为IE浏览器内置的开发工具。
（2）Firefox浏览器：Firebug软件介绍：Firebug是网页浏览器MozillaFirefox下的一款开发类插件。
它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的工具。
Firebug从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。
Firebug也是一个除错工具。
用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、DOM以及JavaScript代码。
15《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ 支持平台：Firefox、Chrome（Lite）
（3）Firefox浏览器：Web开发者工具该工具为Firefox浏览器内置的开发工具。
（4）Chrome浏览器：开发工具该工具为Chrome浏览器内置的开发工具。
（5）Web标准验证由WorldWideWebConsortium（W3C）提供的验证服务，可以为互联网用户检查HTML文件是否附合HTML或XHTML标准。
还可以向网页设计师提供快速检查网页错误的方法。
Web访问：
（6）CSS验证由WorldWideWebConsortium（W3C）提供的验证服务，可以检查层叠样式表（CSS）文档和HTML或者XHTML文档中的CSS内容是否规范和符合要求。
Web访问：/css-validator/
六、现场演示6.1Web兼容性测试工具
（1）MicrosoftExpressionWebSuperPreview的安装与使用（2）browserseal进行兼容性测试
（3）BrowserSandbox进行兼容性测试
（4）BrowseShot进行兼容性测试
（5）ViewLike进行浏览器分辨率测试 6.2Web功能测试工具
（1）Xenu’SLinkSleuth安装并进行链接测试 16《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
（2）WebLinkValidator安装并进行链接测试 6.3Web性能测试工具
（1）PaesslerWebServerStressTool进行性能测试
（2）WAPT进行性能测试
（3）WebLoad进行性能测试
（4）HttpWatch进行性能测试
（5）SpeedTrace进行性能测试
（6）PageSpeed进行Web综合性能分析
（7）YSlow进行Web综合性能分析
（8）WebPageTest进行远程Web综合性能分析 6.4Web调试工具
（1）Chrome浏览器的开发工具的使用
（2）Firefox浏览器的Web开发者工具的使用
（3）IE浏览器的F12开发人员工具的使用
（4）Web标准验证工具的使用
七、讨论与思考7.1Web性能测试报告与调优
（1）如何确保Web性能测试数据的科学性？
（2）如何通过Web性能测试报告开展Web性能调优工作？ 7.2移动Web测试工具有哪些？
（1）本讲介绍的Web测试工具是否可以应用于移动Web测试工作？
（2）移动Web测试和Web测试有哪些不同？ 17《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/
声明：
该资讯来自于互联网网友发布，如有侵犯您的权益请联系我们。
