五年前我们写了一篇文章关于如何处理基于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：网页渲染样例