移动响应式应用测试之浏览器

日期:2015-6-26作者:Matthew HeusserJustin Rohrman翻译:崔婧雯 来源:TechTarget中国 英文

【TechTarget中国原创】

五年前我们写了一篇文章关于如何处理基于Web应用的缺陷,如今技术领域日新月异。响应式设计应用—使得网页可以自适应任何表格因素—已经是主流技术,网络带宽大幅增加,Web服务日趋流行。

在移动应用测试领域有很多文章,本文关注于随着移动响应式设计应用的流行而涌现的新风险,这些应用是设计来自动调整界面大小的,可以在任何浏览器,任何合理屏幕尺寸下工作。这是很大胆的设计,需要进行完整测试。

如果你对此感兴趣,请仔细阅读本文。

1. 测试主流表格因素和浏览器

如今客户不仅仅使用iPhone和笔记本,而且使用iMac的27英寸显示器,10英寸的Kindle和很多平板设备。这些设备可能会使用不同的浏览器,并且每种表格因素和浏览器的组合都可能导致不同的页面渲染。并且这些行为可能在每个版本上都不太一样。

好消息是浏览器是免费的。如果你使用Windows平台,可以很容易地安装主流浏览器—Internet Explorer、Chrome、Firefox—然后可以使用免费工具,比如Browsershots,或者付费工具,比如CrossBrowserTesting,来检查网页在Safari上的外观。如果你使用的是Mac,可以安装除了Internet Explorer(IE)之外的所有浏览器 -- 但是可以从Modern.ie上下载IE特定的虚拟机,从而轻松得到几乎所有版本的IE。

这时,“测试”工作主要是去查看网页是否渲染正确,浏览所有的可选项,验证动态内容是否能正常加载,看上去是否奇怪,并且执行并验证程序主逻辑。如果是房屋抵押应用程序,那么就去尝试新建一个抵押。如果是文字处理程序,就尝试创建一个文档——并且在测试过程中检查用户界面。

我们也提到了平台。需要找出软件主要的使用者是谁。对于内部软件,用户很可能会使用笔记本,手机(Android和iOS),或者平板。建议购买每种主要类型的机器作为测试机型,这些费用相比整体开发成本而言应该非常小。当测试团队等待所需的特定移动设备时,开发团队很可能愿意分享他们的手机和平板。

最后,考虑是否需要支持旧的浏览器,可能是为了公司客户,并且在这些设备上做程序主逻辑测试。

在此期间,可能会发现可用性问题,第一个图片显示的地方不合适,或者页面“感觉”很奇怪。将这些发现分享给团队。这可能不是个bug,但也可能是。

2. 改变浏览器大小

基于“响应式内容”的本质,页面应该在任何合理屏幕大小的设备上看上去都很舒服,从300*300的手机到2550*1600像素的显示器。最快最方便的评估响应式功能的方式是大幅改变浏览器的大小,检查显示情况。

对于这类测试不需要任何搭建时间。只需要打开网页,点击浏览器的右上角,拖拽到所需的大小。文本是否在你认为应该在的位置,是否仍然可读?图像是否能合理伸缩?控件是否还在页面上——按钮,文本输入框,日期控件和其他的——是否仍然可用?它们有没有遮盖掉其他重要的内容?

危险之处是你发现了一个bug,可能很难重现,产品经理会说“没有人会这么快地改变浏览器尺寸,把它拖拽到整个显示器上,如果他们真这么做了,那么应该告诉他们不要这么做。”你可能会发现一堆bug,却无法说服开发人员修复它们。记住:说不定就有一种平板设备有这样的屏幕分辨率。

最新的IE和Chrome版本有工具可以帮助调整浏览器尺寸到需要的合适大小,比如移动手机或者平板。如果你在快速改变浏览器大小时发现了一个很难重现的bug,但是可以在一些拥有正常大小的设备上重现这个问题,那么你可能就有了需要修复这个问题的有力根据。

3. 移动设备和旋转

移动设备使得响应式网页设计变得如此重要。移动设备也给响应性带来了一个新的要求:旋转。这些小型设备会跟着主人去任何地方。这些设备也可以随意旋转,从纵向到横向再转回来。这似乎和改变大小很类似。但是实际上设备的每次旋转之后,网页都需要重新渲染。

一些应用在改变大小时可能会改变自身行为 -- 比如,iOS7的计算器,在IPhone4的纵向模式下会隐藏科学计算选项。

4. 响应式检查

响应式检查点的所有描述在网上都可以找到。其中的一些很简单,告诉你在不同的浏览器尺寸下网页看上去的样子。更多复杂的选项,比如BrowserStack,模拟一系列可能的屏幕尺寸和横向纵向模式切换能力的组合。这样的可配置性和模拟尺寸交互的组合可以帮助创建强大的响应式测试环境。

这是ami.responsivedesign.is上的简单图片,以某个真实网页的URL为输入,将其在五种不同的设备上加以渲染。ami.responsivedesign.is网页不是将其当做静态图片加以渲染,图片上的滚动栏可以上下滚动。

图1:网页渲染样例

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

评论
查看更多评论

敬请读者发表评论,本站保留删除与本文无关和不雅评论的权力。

作者>更多

Matthew Heusser
Matthew Heusser

Justin Rohrman
Justin Rohrman

Justin is a consulting software tester and writer working with Excelon Development.

SOA开发>更多

  • 容器与微服务要“联姻” 你对它们够了解吗?

    在虚拟化和云计算领域,容器大概是发展最快、最广为令人兴奋的技术了,微服务则紧随其后。如果把这两大技术结合起来会碰撞出怎样的火花呢?

  • 事件驱动框架和SOA在空军的应用

    空军正在利用SOA来改善数据共享,并实时跟踪战机,美国空军机动司令部的Michael Marek解释了企业可从中学习的经验。

  • HTML5促进企业移动化服务走向极致

    在企业困扰于传统移动化方式过于复杂时, HTML5凭借其天然的跨平台特性,乘势而起并逐渐得到企业的关注。可是,由于HMTL5标准建立时间不长,展示性能及稳定性更是需要和浏览器有一个良好的兼容,除此之外企业更是缺乏实际应用经验,所以基于HTML5技术的企业级服务市场还处于一片初创状态。

  • 对话陈本峰:HTML5究竟给企业带来了什么?

    智能手机的普及,移动计算的应用,带火了HTML5技术。尤其,当我们看到微软朋友圈被“故宫与腾讯合作”的广告刷屏,我们不得不承认,HTML5技术确实很重要,但是HTML5究竟带来了什么,与以往移动技术有什么不同?

相关推荐

技术手册>更多

  • 开源PaaS技术手册

    开源业界向来不太平,关于诸多技术的开源未来足以让很多粉丝兴奋躁动起来。商业软件开始揉进开源技术,开源技术也成为IT大佬们得基础架构,这一种趋势蔓延的缓慢有有力。在广告漫天飞得云计算中,开源的分量有多重?是否走向云端就意味着走向开源?开源的PaaS如何选择?如何为开源项目选择PaaS厂商?哪些服务平台值得我们关注,下面我们一一来揭晓。

  • SOA与遗留系统详解手册

    遗留系统是一个已经运行了很长时间的,对机构来说是很重要的系统,但是往往不知道如何处理的大的软件系统。它与平台相关,但不能在网络环境中直接访问。另外,遗留系统不能直接访问存储在各种数据库管理系统中的数据,但由于遗留系统所完成的是关键业务,所以不能简单丢弃。本技术手册提供了一些意见和技巧,仅供参考。

  • 全面应对SOA开发挑战

    面向服务的架构是一种基于可以重用的服务的,新的开发应用的架构体系。 近年来,企业界对于SOA的需求越来越急切。为了满足这样的需求,一系列的SOA基础架构产品被推出。在一个包含各类应用的复杂的IT系统中, 要使用适配器并且在一个符合业务需求的流程中将各类应用串连在一起是一个非常困难的事情,但是现在的SOA平台将困难转变成了容易。

  • 企业云ERP学习

    云之一词的出现带起一片“云海”,也改变了很多事情,改变传统的IT架构模式,冲击了传统的业务运作模式。那么企业内部资源规划,即ERP系统当然不能落于人后。

TechTarget

最新资源
  • 安全
  • 存储
  • CIO
  • 数据库
  • 服务器
  • 云计算