HttpWatch7.0工具使用理解文档

目  录

1 HttpWatch介绍 1

1.1 概述 1

1.2 版本 1

2 HttpWatch环境搭建 2

2.1 安装 2

2.2 启动HttpWatch 5

2.3 HttpWatch7.0新功能介绍 10

3 HttpWatch功能介绍 15

4 HttpWatch自动化应用 24

4.1 自动化测试概述 24

4.2 HttpWatch自动化架构 24

4.2.1 控制类 25

4.2.2 插件类 25

4.2.3 日志类 25

4.2.4 属性类 25

4.3 Ruby自动化控制HttpWatch 26

4.3.1 概述 26

4.3.2 录制 27

4.3.3 Watir驱动浏览器 28

4.3.4 保存日志文件 28

4.3.5 打开日志文件 29

4.3.6 访问日志文件数据 29

5 注意事项 31

 

 

1 HttpWatch介绍

1.1  概述

HttpWatch是强大的网页数据分析工具.集成在Internet Explorer和FireFox工具栏，包括网页摘要Cookies管理、缓存管理、消息头发送/接受、字符查询、POST 数据和目录管理功能、报告输出。HttpWatch 是一款能够收集并显示网页深层信息的软件。它不用代理服务器或一些复杂的网络监控工具，就能够在显示网页同时显示网页请求和返回的日志信息。甚至可以显示浏览器缓存和IE之间的交换信息。集成在Internet Explorer和FireFox工具栏。

只需要选择相应的网站，软件就可以对网站与浏览器之间的请求和回复的通讯情况进行分析并在同一界面显示其相应的日志记录。每一个HTTP记录都可以详细分析其 Cookies、消息头、字符查询等信息。支持HTTPS及分析报告输出为XML、CSV等格式。

1.2  版本

目前官方提供两个HttpWatch版本下载，如下：

HttpWatch Basic Edition - 免费提供下载，任何人都可以用来查看基本的HTTP / HTTPS的详细信息，并记录跟踪文件。

HttpWatch Professional Edition – 专业版，该版本没有任何功能限制，可以通过HttpWatch获取HTTP / HTTPS的任何URL的详细信息，并能被用于查看跟踪文件。

2 HttpWatch环境搭建

2.1  安装

通过官方网站地址：http://www.httpwatch.com下载HttpWatch7.0最新版本，安装如下：

首先点击运行安装httpwatch.exe文件，如下

点击next按钮，如下：

 

在此处需要注意的是，需要选择一个License文件，因为专业版的是需要收费的，这里在网上下载了一个license文件，选择之后，即next按钮才激活，才能进行接下来的安装，如下：

 

在勾选的地方我们可以清楚的发现，就是把HttpWatch plug-in添加到Firefox浏览器，因为它默认就是被嵌入到IE浏览器中，所以此处要勾选。接下来next如下：

然后安装完成

 

 

2.2 启动HttpWatch

在浏览器插件中开启HttpWatch工具，在IE和Firefox的插件中都可以找到HttpWatch工具。

首先，我们在IE6.0中打开HttpWatch，直接点击工具栏上的HttpWatch图标按钮

启动HttpWatch后，在浏览器上的显示功能如下：

 

2.3  HttpWatch7.0新功能介绍

1、网页标准事件

 

通过以上截图，鼠标停留在蓝色的竖线上，弹出文字信息，此信息是为了说明当前节点为止页面加载了哪些事件，并记录该事件的响应时间。

2、对请求事件进行分组

 

从上图可以看出，新版本中将各个事件进行分组。

3、提示潜在的问题

 

如上图所示，在httpwatch新版本中增加了这个感叹号作为一列来表示，哪些加载页面存在功能、性能或者是安全性等潜在的风险，并给出提示信息予以警告。

4、自由定制页面的列表信息

 

如上所示，在列上面右击鼠标，新版本中新增了自由定制列的功能；

 

选择我们需要显示的列，保存后将在页面事件响应过程中显示该列的详细信息。

5、定制信息输出接口

 

如上图所示，新版本中新增了输出接口，选择定制好的列，通过CVS输出。

6、提示Http状态码信息

 

如图所示，鼠标停留在返回的状态码上显示各个状态码的说明信息。

7、类型图标

 

如图所示，在类型列表中显示的图标表示不同的加载元素，分别有js脚本、css等等。

8、红色标识错误结果信息

 

如图所示，在返回结果处以红色标识其错误信息。

9、Cookies信息

 

如图所示，新版本中新增了Cookies的相关信息，如http类型、安全性等问题。

10、自动化扩展

新版本中对自动化的相关信息进行扩展，改进了自动化的相关接口类。

 

 

3 HttpWatch功能介绍

关于httpwatch，在系统安装httpwatch之后，会被添加到IE和Firefox的工具栏上，开启httpwatch窗口之后，大致包括如下部分：

1、工具栏

在开启httpwatch之后，在窗口底部显示工具按钮，这些按钮用于控制httpwatch。

 

如下按钮：

Record——用于录制浏览器定位URL执行请求的过程，并将信息显示出来

Stop——停止当前的录制操作

Clear——清空当前请求列表中的信息

View

 

|-Group by Page—用于将同一个URL的请求进行分组显示

|-Time Chart Column—在列表中显示时间图标这一列

|-Select Columns—根据需求进行列表中显示的列名的自由定制

|-Properties—属性，显示如下图，主要是显示当前PC的相关属性信息

 

|-Offsets timings—时序偏移，显示URL的请求时间时序

|-Local Time—显示当前的本地实时录制时间

|-GMT/UTC—显示国际标准时间格式

Summary——描述当前主URL的请求过程并记录详细信息，如下图:

 

|-Network—描述的是当前HTTP请求下的网络的传输情况，详细描述列表情况，Elapsed Times，表示当前网络响应时间；Network Round Trips，表示网络往返次数；Downloaded Data，表示请求返回下载的字节；Uploaded Data，表示请求上传的字节数；HTTP Compression Savings，表示传输中压缩的字节数；DNS Lookups，表示查找DNS的次数；TCP Connects，表示TCP连接的次数。

 

|-Page Events—显示当前URL请求过程中页面执行的事件

 

|-Times—分别显示当前URL请求过程中的各个阶段时间响应情况

 

|-Status Codes—状态码，显示当前URL请求之后服务器返回的情况，通常用状态码表示，下面列举当前常见的状态码，如下：

200——服务器已成功处理了请求。

202——服务器已接受请求，但尚未处理。

203——服务器已成功处理了请求，但返回的信息可能来自另一来源。

204——服务器成功处理了请求，但没有返回任何内容。

206——服务器成功处理了部分 GET 请求。

304——自从上次请求后，请求的网页未修改过。

305——请求者只能使用代理访问请求的网页。

307——服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

400——服务器不理解请求的语法。

401——请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。

402——未被使用的代码，被标识为“保留，以备经来使用”

403——服务器拒绝请求。

404——服务器找不到请求的网页。

500——服务器遇到错误，无法完成请求。

505——服务器不支持请求中所用的 HTTP 协议版本。

 

|-Errors——显示当前URL请求过程中出现的错误

|-Warnings——显示当前URL请求过程中页面上出现的相关风险等问题，给出的提示和警告信息。

Find——主要用于在当前列表中查找信息。

 

Filter——如上图所示，这里主要为了精确的获取或者是定位信息，使用过滤器来进行控制。

 

Save——如上图所示，保存使用当前httpwatch录制所显示出的结果，分别支持CVS、HAR、XML和Send by Email。

Print——打印当前列表中的上的信息。

 

Tools——如上图所示，工具中主要是对Cache、Cookies和Session的管理。

Help——主要提供查询帮助文档和License的相关信息。

2、请求列表框

该列表主要展示的是当httpwatch录制完http请求之后，所有详细的http请求信息被列表显示出来。

 

如上图所示，列表中的信息分别表示什么，接下来我们来介绍：

Started——表示的是每个URL地址在哪个时间开始加载的。

Time Chart——表示时间分割图，通过不同的颜色来表示请求的详细过程。

！——告警提示。

Sent——发送请求时传送的字节。

Received——响应系统返回结果时接受的传送字节。

Method——请求过程中使用的方法，一般为GET和POST。

Result——系统返回的请求结果，一般用状态码表示。

Type——URL传输页面的所包含的信息类型，如：图片、脚本等。

URL——显示当前请求的页面URL地址。

3、请求视图

该视图窗口主要是显示每一个http请求项详细的信息，通过对每个请求URL的分析来获取更详细的信息。

 

如上图所示，主要是针对单独的一个页面进行详细的分析，且一下各个功能进行详细介绍：

Overview——主要是描述当前页面的一个Action情况，包括Display URL、Started At、Connect、HTTP Request、HTTP Response和Redirect（地址重定向）

Time Chart——时序图，表示当前页面加载过程中各个时间段

 

如上图所示，按照加载顺序来显示各个阶段的时间。

 

Headers——表示从Web服务器发送和接受的报头信息；

Headers Sent——请求端发送的信息，其中包含HTTP方法，HTTP版本和URL子路径等。

Headers Received——接受端的信息，包含HTTP状态代码，版本和描述等。

 

Cookies——客户端通过访问网站服务器将部分数据信息存放在客户端的一种技术。如上图所示，httpwatch也可以记录有关Cookies的详细信息。

 

Cache——缓存，主要是用于在存放频繁访问的数据信息，将这些存放在这个存储器中，从而加速下一次访问。

 

Content——表示当前页面传输的内容，如上图所示。

 

Stream——该功能主要是描述详细页面传输流信息。如上图所示，显示客户端发送的数据，服务器端接收的数据。

 

Query String——如上图所示，url就是这个传递的查询参数。

 

POST Data——如上图所示，传输数据信息中，将页面上输入的信息都显示在列表中。application/x-www-form-urlencoded表示，post方式默认提交数据编码，

以下为Post方式提交数据编码几种方式：

text/plain	以纯文本的形式传送
application/x-www-form-urlencoded	默认的编码形式，即URL编码形式
multipart/form-data	MIME编码，上传文件的表单必须选择该

GET方法是默认的HTTP请求方法，我们日常用GET方法来提交表单数据，然而用GET方法提交的表单数据只经过了简单的编码，同时它将作为URL的一部分向Web服务器发送，因此，如果使用GET方法来提交表单数据就存在着安全隐患上。

POST方法是GET方法的一个替代方法，它主要是向Web服务器提交表单数据，尤其是大批量的数据。POST方法克服了GET方法的一些缺点。通过POST方法提交表单数据时，数据不是作为URL请求的一部分而是作为标准数据传送给Web服务器，这就克服了GET方法中的信息无法保密和数据量太小的缺点。因此，出于安全的考虑以及对用户隐私的尊重，通常表单提交时采用POST方法。

 

 

4 HttpWatch自动化应用

4.1 自动化测试概述

HttpWatch是IE和Firefox浏览器上的一款插件工具，用来捕获浏览过程中所产生的数据信息，并记录其相关日志文件。虽然HttpWatch能通过手动来控制运行，但很多时候为了提高效率，对于一些重复执行的任务，比如性能测试需要自动化来完成，这样就可以使用HttpWatch来配合自动化测试性能来自动获取其相关数据信息，从而使得HttpWatch也能自动化进行操作。因此为了更好的配合自动化测试，HttpWatch插件专门提供自动化接口类程序，以便外部程序来自动化获取其已经存在的数据信息。HttpWatch中提供了大约三十种以上的自动化接口，但只有四个主要的类用于控制HttpWatch插件。

4.2 HttpWatch自动化架构

下图就是描述了这个四个类与浏览器之间的关系：

 

四个主要的自动化接口类分别如下描述：

4.2.1 控制类

控制类（Controller Class）

HttpWatch的控制出发点就是控制类，一个自动化客户端使用它来创建一个HttpWatch插件实例，或者是打开一个已经存在的实例文件。

4.2.2 插件类

插件类（Plugin Class）

HttpWatch分别为IE和Firefox提供了插件类，它主要是针对Http协议交互提供启动和停止方法去控制HttpWatch的录制功能，另外还提供了一些方法和属性去管理和配置自动化录制方式。其中插件类中的“GotoURL”方法可以用于重定向浏览任何指定的URL地址。另外一些属性则是为了说明客户端中哪些网页是否已经加载完成，哪些请求是否是当前的录制请求。日志中的属性信息可以说明录制请求是否已经达到录制的标准。

4.2.3 日志类

日志类（Log Class）

通过插件去访问日志对象，获取日志信息，这些日志信息就是HttpWatch录制过程记录的请求和响应信息。日志类提供了许多属性和方法，并且允许对这些录制的数据信息进行检索和保存，或者以多种格式导出等等。另外，可以通过这个控制类的一个“OpenLog”方法打开一个日志文件，并且返回这个日志文件的相应的说明信息，这个说明信息包括的就是录制过中的请求和响应文件信息。

4.2.4 属性类

属性类（Entry Class）

每个日志文件都包含一个属性列表，且这个属性列表中包括详细的HTTP交互信息。这些内容具体包括请求的资源信息和一些返回的信息。这个请求和响应属性信息提供了访问头文件和Cookies文件，这些信息都是在与服务器发生交互过程中产生的。

4.3 Ruby自动化控制HttpWatch

4.3.1 概述

首先，在httpwatch中调用Ruby，必须要安装ruby工具包，安装包下载地址和安装步骤见《自动化测试框架设计理解文档V3.0》。

其次通过Ruby去访问httpwatch需要调用ruby的相关库文件，httpwatch自动化库中已经包含了一个com组建，为了使用ruby去访问它就需要引入“win32ole”库文件，通常在代码中添加以下声明即可：

Require ‘win32ole’

第三，关于与httpwatch插件的交互

需要先创建一个控制类，通过控制类来创建它的实例。通过httpwatch接口直接创建控制类如下：

controller = WIN32OLE.new('HttpWatch.Controller')

接下来就是需要去创建一个浏览器的实例对象，这个浏览器的实例对象包括IE和Firefox两种，且分别对这两种类型浏览器都给予支持。而这两种对象都有两个方法为：New和Attach。这个New方法是用来创建一个新的实例，这个新的实例类型必须与这个浏览器对象中插件类型想一致。而Attach方法则表示可以创建一个新的实例并且可以嵌入已经创建过的另外一些组件。两种方法均返回的是httpwatch插件对象。

下面这段代码表示创建一个新的IE实例，并嵌入了httpwatch插件组件：

controller = WIN32OLE.new('HttpWatch.Controller')

plugin = controller.IE.New()

关于Firefox的新实例和组件如下：

controller = WIN32OLE.new('HttpWatch.Controller')

plugin = controller.Firefox.New()

关于Attach方法在IE和Firefox浏览器实例中使用是不同的，IE实例需要依赖IE IWebBrowser2接口，如下所示代码段：

ieBrowser = WIN32OLE.new('InternetExplorer.Application') 

ieBrowser.Visible = true    # Required to see the new window

control = WIN32OLE.new('HttpWatch.Controller')

plugin = controller.IE.Attach(ieBrowser)

相比IE，Firefox需要配置文件名才能运行实例，如下：

controller = WIN32OLE.new('HttpWatch.Controller')

plugin = controller.Firefox.Attach('FirefoxProfileName')

所有的返回对象都是插件对象类型，且能被控制类所调用。

4.3.2 录制

首先你的浏览器实例中必须嵌入HttpWatch插件，详细内容见4.3.1概述，这个时候你的应用程序将包含控制类和插件对象。一般情况下，我们在使用httpwatch进行录制之前需要配置很多功能，此时说到是过滤器，过滤器一般用于精确查找我们想要的信息，从而去掉那些不需要的信息。然后一般在没有特定需求和目标的时候，将默认关闭过滤器设置。代码段如下：

plugin.Log.EnableFilter(false)

在录制之前需要清空httpwatch的日志信息和浏览器的缓存信息。代码段如下：

plugin.Clear()

接下来我们可以开始录制了，代码段如下：

plugin.Record()

当页面发生加载产生http协议流量信息时，此时录制机制才会记录这些过程。关于如何驱动浏览器进行页面加载，有如下三种方法：

1、通过浏览器自身的接口来驱动，如IE中的IWebBrowser2

2、通过设计框架来驱动，如Watir、WatiN等

3、调用插件对象自身的方法”GotoURL”

通常我们使用第三中方法，因为它是插件的内置方法，可以方便测试网页加载的正确性和度量页面的性能。而且该方法可以很好的控制由于页面加载而导致的连接超时等问题，如下代码段：

myUrl = 'http://www.example.com'

plugin.GotoUrl( myUrl )

control.Wait( plugin, -1 ) # don't return until the page loads

录制完页面请求过程之后就需要停止录制，就需要调用插件对象的stop方法了，并且还要关闭浏览器，调用插件对象的CloseBrowser方法。

4.3.3 Watir驱动浏览器

关于Watir的下载和安装请详细见《自动化测试框架设计理解文档V3.0》。

通过watir来调用httpwatch插件需要引入watir库文件，代码段如下：

require 'win32ole'

require 'watir' 

# Open the IE browser using Watir

ie = Watir::IE.new 

# Attach HttpWatch

control = WIN32OLE.new('HttpWatch.Controller')

plugin = control.Attach(ie.ie) 

# Start recording

plugin.Record()

4.3.4 保存日志文件

当录制运行完之后，需要保存当前的运行日志，代码段如下：

plugin.Log.Save('c:\\mylogfiles\\mylogfile.hwl')

 

4.3.5 打开日志文件

当需要访问日志的时候，就需要调用插件对象中的方法OpenLog，代码段如下：

# You always need to create an instance of Controller to use the HttpWatch Automation

controller = WIN32OLE.new('HttpWatch.Controller') 

# Open the log file and keep a reference to the returned Log object

log = controller.OpenLog("c:\\temp\\test.hwl") 

# Access the data in the log file using properties of the log object

printf "The log file contains %d entries", log.Entries.Count

4.3.6 访问日志文件数据

这部分主要说明的是通过脚本代码来获取访问web过程中的日志信息，日志类中包括很多httpwatch插件的属性，通过外部脚本来控制和访问日志类，并自动化获取日志相关的信息，将我们需要的信息通过列表显示在文档中。下面我们来看看HttpWatch Demo中的一段代码：

 

以上代码就是通过访问summary类来获取其属性信息，通常情况下我们是通过手动操作HttpWatch来获取的。看看它的运行结果如下：

 

这就是通过代码实现来获取我们期望得到的日志信息，并全程通过自动化去操作。