整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

软件测试之WEB页面测试

软件测试之WEB页面测试


着Internet和Intranet的快速发展,Web技术已经对工商业、医疗业、教育、政府、娱乐以及我们的生活产生了深远的影响。Web平台能支持几乎所有媒体类型的信息发布,容易为最终用户存取,更多传统的信息和数据系统正在逐渐迁移到互联网上:电子商务正迅速增长,范围广泛、复杂的云应用和云计算也正在Web环境中出现。基于Web的系统在变得越来越复杂和强大的同时,Web应用软件的缺陷危机也越来越严重。早在1998年Yogesh Deshpande和Steve Hansen就提出了Web工程的概念。Web工程提倡使用一个过程和系统的方法来开发高质量的基于Web的系统。在Web工程中,基于Web系统的测试、确认和验收是一项重要而富有挑战性的工作。

Web环境具有浏览器平台不兼容、网络环境多样化、应用复杂化等诸多特性,所以,传统测试方法的某些方面不适用于网络测试。Web的自动化测试方法包含几个方面,比如,测试脚本技术、人工测试过程自动化、验证自动化等等。在测试驱动开发模式中,测试已成为迭代开发过程中起推动作用的环节,但与此同时,大量的重复性的测试代码却造成了大量资源的浪费。

随着自动化测试技术的成熟和自动化测试工具的广泛应用,人们重新认识到了测试的价值:最优的质量成本,最高的质量保证。自动化测试的优势在软件领域很明显的:减少了测试时间,使测试程序统一化,便于管理,节约了质量保证的成本,提高了测试运行的效率,改善了软件产品的质量。

现在一般人都有使用浏览器浏览网页的经历,用户虽然不是专业人员但是对界面效果的印象是很重要的。如果开发人员注重这方面的测试,那么验证应用程序是否易于使用就非常重要了。很多人认为这是测试中最不重要的部分,但是恰恰相反,界面对不懂技术的客户来说都是相当关键,特别是在简洁、美观、易用等方面。

方法上可以根据设计文档,如果够专业的话可以由专业美工人员,来确定整体风格,特别是页面风格。然后根据这个设计好的页面,生成静态的HTML、CSS等甚至生成几套不同的方案来讨论,或者交给客户评审,最后形成统一风格的页面/框架。


页面测试的主要页面元素有:

● 页面元素的容错性列表(如输入框、时间列表或日历)。

● 页面元素清单(为实现功能,是否将所需要的元素全部都列出来了,如按钮、单选按钮、复选框、列表框、超链接、输入框等等)。

● 页面元素的容错性是否存在。 第IV部分 图形用户界面测试篇

● 页面元素的容错性是否正确。

● 页面元素的基本功能是否实现(如文字特效、动画特效、按钮、超链接)。

● 页面元素的外形、摆放位置(如按钮、列表框、复选框、输入框、超链接等)。

● 页面元素是否显示正确(主要针对文字、图形、签章)。

● 元素是否显示(元素是否存在)。

页面测试主要包括以下几个方面的内容:

● 站点地图和导航条位置是否合理,是否可以导航等。

● 页面内容布局是否合理,文字是否准确、简洁,字体和字号是否符合多数读者习惯。

● 背景/色调是否合理、美观,是否符合多数用户审美要求。

● 页面在窗口中的显示是否正确、美观(在调整浏览器窗口大小时,屏幕刷新是否正确),表单样式 大小、格式是否适宜。

● 是否对提交数据进行验证(如果在页面部分进行验证的话)等。

● 链接的形式、位置、是否易于理解等。

对Web应用的测试可以分为页内测试(IntraPageTest)和跨页测试(InterPageTest)两种。页内测试相当于单元测试,着重于测试单个页面的行为是否正确。根据模块化思想,在进行页面划分时,一般使每个页面具有单一、具体的功能,可以直接表达用户的一个目标。

本章我们主要考虑Web页内测试的主要方法。

● 人工走查:

①通过页面走查,浏览确定使用的页面是否符合需求。可以结合兼容性测试不同分辨率下的页面显示效果,如果有影响,则应该交给设计人员由他们提出解决方案。

②可以结合数据定义文档查看表单项的内容、长度等信息。

③对于动态生成的页面最好也能浏览查看。如Servelet部分可以结合编码规范,进行代码走查。是否支持中文,如果数据用XML封装,要做的工作可能会多一点。

● 使用Web页面测试工具:

工具可以提供很多测试方法,可以用来模拟许多手工操作,如单击按钮、给文本框输入字符或数字、鼠标双击事件等,从而实现了测试的自动化。这对于需要输入大量信息的界面测试来说是十分重要的。

Web页面测试的基本准则:

符合页面/界面设计的标准和规范,满足灵活性、正确性、直观性、舒适性、实用性、一致性等要求。

直观性:

①用户界面是否洁净、不唐突、不拥挤,界面不应该为用户制造障碍,所需功能或者期待的响应应该明显,并在预期的地方出现。

②界面组织和布局合理吗?是否允许用户轻松地从一个功能转到另一个功能?下一步做什么明显吗?任何时刻都可以决定放弃或者退回、退出吗?输入得到承认了吗?菜单或者窗口是否深藏不露?

③有多余功能吗?软件整体抑或局部是否做得太多?是否因有太多特性而把工作复杂化了?是否感到信息太庞杂?

④如果其他所有努力失败,帮助系统真能帮忙吗?

一致性:

①快捷键和菜单选项,在Windows中按F1键总是得到帮助信息。

②术语和命令,整个软件使用同样的术语吗?特性命名一致吗?例如,Find是否一直叫Find,而不是有时叫Search?

③软件是否一直面向同一级别用户?带有花哨用户界面的趣味贺卡程序不应该显示泄露技术机密的错误提示信息。

④按钮位置和等价的按键。大家是否注意到对话框有OK按钮和Cancel按钮时,OK按钮总是在上方或者左方,而Cancel按钮总是在下方或右方?同样原因,Cancel按钮的等价按键通常是Esc,而OK按钮的等价按钮通常是Enter,要保持一致。

灵活性:

①状态跳转,灵活的软件实现同一任务时通常会有多种选择方式。

②状态终止和跳过,具有容错处理能力。

③数据输入和输出,用户希望有多种方法输入数据和查看结果。例如,要在写字板中插入文字,可用键盘输入、粘贴、从6种文件格式读入、作为对象插入,或者用鼠标从其他程序拖动。

舒适性:

①恰当,软件外观和感觉应该与所做的工作和使用者相符。

②错误处理,程序应该在用户执行严重错误的操作之前提出警告,并允许用户恢复由于错误操作导致丢失的数据。正如大家认为undo /redo功能是理所当然应有的。

③性能,快不见得是好事,要让用户看清程序在做什么,它是有反应的。

、功能测试

web网页测试中的功能测试,主要测试网页中的所有链接、数据库连接、用于在网页中提交或获取用户信息的表单、Cookie 测试等。

(1)查看所有链接

  • 测试从所有页面到被测特定域的传出链接。
  • 测试所有内部链接。
  • 测试链接在同一页面上跳转。
  • 测试链接用于从网页向管理员或其他用户发送电子邮件。
  • 测试是否有任何被孤立的页面。
  • 最后,链接检查包括检查所有上述链接中的损坏链接。
? 300G软件测试自学教程 [全套完整版]

分享一波学习资料:测试猿课堂为大家准备了一份总量达300G左右的【软件测试全套自学教程】
包含完整的课件+PPT+实战项目源码+千套测试模板,内容极其珍贵,千万不要错过:


https://pan.baidu.com/s/10nqKV0Vp23BSgCiCt9EqNA

提取码:3mkj


(2)测试所有页面上的表单

表单是任何网站都不可或缺的一部分。表单用于接收来自用户的信息并与他们进行交互。那么在这些表格中应该检查什么?

  • 首先,检查每个字段的所有验证。
  • 检查字段中的默认值。
  • 表单中的字段输入错误。
  • 用于创建表单(如果有)、表单删除视图或修改表单的选项。

以搜索引擎项目的测试为例。在这个项目中,我们有广告商和会员注册步骤。每个注册步骤和流程都不同。我们需要测试注册流程是否能够正确执行。注册表单有不同的字段验证,如电子邮件、ID、用户财务信息验证等。所有这些验证都应在手动或自动 Web 测试中进行检查。

(3)Cookie测试

Cookie是存储在用户计算机设备上的小文件。Cookie基本上用于维护登录状态的验证。通过在浏览器选项中启用或禁用 cookie 来测试应用程序。

在写入用户计算机之前测试 cookie 是否已加密。如果当下正在测试会话 cookie(即会话结束后过期的 cookie),需要在会话结束后检查登录会话和用户统计信息。通过删除 cookie 检查对应用程序安全性的影响。

(4)检查页面HTML/CSS

如果我们的网站正在针对搜索引擎做相关的SEO类优化工作,那么 HTML/CSS 验证是最重要的一项。这一块儿主要验证站点是否存在HTML语法错误。检查网站是否可以被不同的搜索引擎抓取。

(5)数据库测试

数据一致性在 Web 应用程序中也非常重要。我们在编辑、删除、修改表单或执行任何与数据库相关的功能时,都应检查数据的完整性和错误。

检查所有数据库的查询是否正确执行、数据是否被检索以及是否正确更新。另外一项关于数据库的测试则是数据库的负载,这一块儿会在下方的Web负载和性能测试这一块讲到。

所以总结下来,对Web页面的测试,大致为以下几项:

2、可用性测试

可用性测试是测量系统的人机交互特性并识别弱点以进行纠正的过程。

  • 易于学习
  • 导航
  • 主观用户满意度
  • 整体外观

(1)导航测试

导航是指用户如何浏览网页、不同的控件(如按钮、框)或用户如何使用页面上的链接来浏览不同的页面。

可用性测试包括以下内容:

  • 该网站应该易于使用。
  • 提供的说明应该非常清楚。
  • 检查提供的说明是否完美满足其目的。
  • 主菜单应在每一页上提供。
  • 它应该足够一致。

(2)内容检查

内容应该合乎逻辑且易于理解。检查是否有文字错误。网站配色的使用,是否符合用户体验。

您可以遵循一些用于网页和内容构建的标准颜色。这些是普遍接受的标准,就像我上面提到的关于恼人的颜色、字体、框架等的标准。

内容应该是有意义的。所有锚文本链接都应该正常工作。图像应以适当的尺寸正确放置。这些是 Web 开发中应该遵循的一些基本的重要标准。您的任务是验证 UI 测试的所有内容。

(3)网站地图

与搜索选项一样,站点地图也有助于处理文件等。站点地图应与网站上的所有链接一起提供,并具有适当的导航树视图。检查网站网站地图上的所有链接。

“站内搜索”选项将帮助用户轻松快速地找到他们正在寻找的内容页面。这些都是可选项目,如果存在,则应进行验证。

3、接口测试

在 web 测试中,应该测试服务器端接口。这可以通过验证通信是否正确完成来完成。应测试服务器与软件、硬件、网络和数据库的兼容性。

主要接口有:

  • Web服务器和应用服务器接口
  • 应用服务器和数据库服务器接口。

检查是否执行了这些服务器之间的所有交互并正确处理了错误。如果数据库或 Web 服务器针对应用程序服务器的任何查询返回错误消息,则应用程序服务器应捕获这些错误消息并将其适当地显示给用户。

检查如果用户在中间中断任何事务会发生什么?检查如果在两者之间重置与网络服务器的连接会发生什么?

4、兼容性测试

网站的兼容性是一个非常重要的测试。

兼容性测试具体测试以下几项:

  • 浏览器兼容性
  • 操作系统兼容性
  • 手机浏览

(1)浏览器兼容性

浏览器的兼容性测试,可以说是网站测试中最具影响力的部分。 一些应用程序非常依赖浏览器。不同的浏览器有不同的配置和设置,我们需要测试网页在各系统、各浏览器品牌和版本下展示效果是否一致。

首先,网站编码应该是跨浏览器平台兼容的。如果我们使用 java 脚本或 AJAX 调用来实现 UI 功能、执行安全检查或验证,那么会对我们的 Web 应用程序的浏览器兼容性测试带来更多的压力。

在 Internet Explorer、Firefox、Netscape Navigator、AOL、Safari 和 Opera 浏览器等不同版本的浏览器上测试 Web 应用程序。

(2)操作系统兼容性

Web 应用程序中的一些功能是它可能不与所有操作系统兼容。Web 开发中使用的所有新技术(如图形设计和不同 API 等接口调用)可能并非在所有操作系统中都可用。

因此,在具有不同操作系统风格的不同操作系统(如 Windows、MAC、Linux)上测试您的 Web 应用程序。

(3)移动浏览

我们正处于新技术时代。目前移动端的用户访问量已经远超PC端用户使用量。所以测试网页在移动端各个设备和浏览器上的展示体验显得尤为重要。

5、性能测试

Web 应用程序应该承受很大的负载。Web 性能测试应包括:

  • 网络负载测试
  • 网络压力测试

在不同的互联网连接速度下测试应用程序性能。

(1)Web 负载测试
我们需要测试是否有许多用户正在访问或请求同一页面。系统能够承受峰值负载的持续时间?该站点应处理多并发的用户请求、来自用户的大量输入数据、同时连接到数据库的请求、特定页面上的负载等。

(2)网络压力测试
通常压力意味着将系统拉伸到超出其指定限制。执行 Web 压力测试以通过施加压力来破坏站点,并检查系统如何对压力做出反应以及如何从崩溃中恢复。通常强调输入字段、登录和注册区域。

在 Web 性能测试中,不同操作系统和不同硬件平台上测试网站功能,检查软件和硬件内存泄漏相关的错误。

性能测试可用于了解网站的可扩展性或对第三方产品(如服务器和中间件)环境中的性能进行基准测试。

6、安全测试

以下是 Web 安全测试的一些测试用例:

  • 通过将内部 URL 直接粘贴到浏览器地址栏中进行测试,无需登录。这个时候网站的内部页面不应被打开。
  • 在登录用户名、密码、输入文本框等输入字段中尝试一些无效输入。检查系统对所有无效输入的反应。
  • 除非网站提供了下载选项,否则普通用不能通过URL直接访问Web目录和系统文件。
  • 测试 CAPTCHA 以自动化脚本登录。
  • 测试网站是否应用了SSL安全措施。如果使用,当用户从非安全 HTTP:// 页面切换到安全 HTTPS:// 页面时,应该会显示正确的提示信息,反之亦然。
  • 所有交易、错误消息和安全漏洞尝试都应记录在 Web 服务器某处的日志文件中。

测试 Web 安全性的主要原因是识别潜在漏洞并随后修复它们。

  • 网络扫描
  • 漏洞扫描
  • 密码破解
  • 日志审查
  • 完整性检查器
  • 病毒检测

载地址HTMLTestRunner.py文件:

http://tungwaiyip.info/software/HTMLTestRunner.html

下载的适合python2,如果python3要修改一些内容

首先吧HTMLTestRunner文件添加到环境变量里,可以直接放到python的Lib目录下

HTMLTestRunner是python标准库unittest单元测试框架的一个扩展,用于生成HTML测试报告


生成HTML测试报告

#coding:utf-8
import unittest, HTMLTestRunner

class Testcase(unittest.TestCase): # 测试用例类
# 具体的测试用例,一定要以test开头
def test1(self):
self.assertEqual(1, 1)

def test2(self):
self.assertEqual(2, 2)

if __name__=="__main__":
# 构造测试集
suite=unittest.TestSuite()
suite.addTest(unittest.makeSuite(Testcase)) # 执行该测试类所有用例

# 定义报告的存放路径,以二进制写的形式打开文件
f=open('test.html', 'wb')

# 定义测试报告,stream:报告存放路径,title:报告标题,description:描述
runner=HTMLTestRunner.HTMLTestRunner(stream=f, title=
u'测试用例标题', description=u'描述')
runner.run(suite) # 运行测试用例
f.close() # 关闭文件


返回结果(测试报告详情):

--stream :存放报告写入文件的存入区域

--title :测试报告的主题

--description :测试报告的描述


报告用例类和用例方法加备注

为了生成带有中文描述的测试用例类和测试用例

在用例类和用例方法下,通过’’’ ‘’’或””” “””来添加备注

#coding:utf-8
import unittest, HTMLTestRunner

class Testcase(unittest.TestCase): # 测试用例类
u'''类名后加备注'''

def test1(self):
u'''用例后面加备注1'''
self.assertEqual(1, 1)

def test2(self):
u'''用例后面加备注2'''
self.assertEqual(2, 2)

if __name__=="__main__":
# 构造测试集
suite=unittest.TestSuite()
suite.addTest(unittest.makeSuite(Testcase))

# 定义报告的存放路径,以二进制写的形式打开文件
f=open('test.html', 'wb')

# 定义测试报告,stream:报告存放路径,title:报告标题,description:描述
runner=HTMLTestRunner.HTMLTestRunner(stream=f, title=
u'测试用例标题', description=u'描述')
runner.run(suite) # 运行测试用例
f.close() # 关闭文件


返回结果:

测试报告文件名

#coding:utf-8
import unittest, HTMLTestRunner, time
from unittest.loader import makeSuite

class Testcase(unittest.TestCase): # 测试用例类
# 具体的测试用例,一定要以test开头
def test1(self):
self.assertEqual(1, 1)

def test2(self):
self.assertEqual(2, 2)

if __name__=="__main__":
# 构造测试集
suite=unittest.TestSuite()
suite.addTest(makeSuite(Testcase)) # 执行该测试类所有用例

# 定义报告的存放路径,以二进制写的形式打开文件
now=time.strftime("%y-%m-%d %H_%M_%S")
f=open('./' + now + 'test.html', 'wb')

# 定义测试报告,stream:报告存放路径,title:报告标题,description:描述
runner=HTMLTestRunner.HTMLTestRunner(stream=f, title=
u'测试用例标题', description=u'描述')
runner.run(suite) # 运行测试用例
f.close() # 关闭文件


返回结果:


测试报告乱码问题


将红框里的内容注释掉改成uo=o.decode('utf-8')