让跨浏览器测试 Web 应用程序变得简单

2008 年 1 月 22 日

一直以来，“对多个浏览器进行测试”像是一条难以解开的咒语，因为需要对大量浏览器进行测试。对所有浏览器进行测试（尤其是目前）几乎是不可能的。但是这比您想象中的要容易很多。本文将介绍各种实现跨浏览器测试的技术，既包括比较全面的技术，也包括便捷但不严谨的技术。您必须要面对的一个问题就是，需要根据自己的资源进行选择。

我们都知道（我们也应该 知道），需要在多个浏览器和操作系统中测试我们的 Web 应用程序。但这个任务常常是理论上行得通却难于付诸实现。用户可能会使用各种各样的浏览器和操作系统组合来访问您的站点，而要实现一整套完整的跨浏览器测试则可能对您的开发资源造成不小的损耗。

什么？除了 IE 还有这么多浏览器？

21 世纪早期的开发人员可能只需要对 Internet Explorer 进行测试，但是这些日子已经一去不复返了。如今，IE 占据了大约 80% 的浏览器访问量。这个数字非常庞大，但并不具有绝对优势 — 当然，没有公司会将 20% 的用户群拱手与人。

您也不要妄想您的用户使用的浏览器特性可以反映大部分 Internet用户的习惯。根据国家和兴趣的不同，使用浏览器和操作系统的的习惯也不尽相同。很多站点都针对特定的用户群，这些站点的用户很可能使用的是非Windows 操作系统和 Internet Explorer 以外的浏览器。例如，访问 developerWorks 站点的访客中，60%的人使用 Internet Explorer，而 35% 的人使用 Firefox。特别是 Web 开发专区，使用 Firefox 的人数多达51%，而只有 41% 的访客使用 Internet Explorer。

幸运的是，一些工具和技巧可以使跨浏览器测试变得稍微简单一些 —并且开销也更低。在本文中，您将了解各种可用于测试的策略；根据您的需求和资源，您可以找到最适合自己的策略。我将首先介绍一些比较全面的测试技术，如果资源和时间的限制使您无法实现所需的测试，本文还将介绍一些替代方法。

浏览器的小花招

附加功能 请记住，并不是所有人都可以在其浏览器上启用很多 Web 应用程序所依赖的两种技术 — Flash 和JavaScript。对于本文介绍的技术，不管您的最终选择是什么，都应该在打开和关闭 JavaScript 和 Flash的情形下进行测试（很多托管服务提供了一种简单的方法来启用这些选项）。对 cookie 也是如此 — 关闭cookie、清除，执行所有可能的操作来模拟访问站点的浏览器的可能状态。 无疑，JavaScript 是 Ajax 应用程序的基础。对 Ajax代码进行跨平台测试稍微有些困难；关键在于，越接近真实的用户体验，硬件或浏览器模拟层越少，测试效果就越好。跨浏览器调试 Ajax应用程序比较复杂，并且使用搜索引擎正确地进行索引也很困难，这两大原因阻碍了这种应用程序的广泛应用。有关更多信息，请参考 参考资料 中的链接，其中包括 developerWorks Ajax 资源中心的链接。

跨多个浏览器和操作系统进行测试，最显而易见、最全面（当然成本也最高）的方法就是对多个浏览器和操作系统进行实际测试。从很多方面讲，浏览器是测试过程中最简单的部分，因为大多数主流浏览器都是免费的。尽管如此，请记住，您将进行测试的不仅仅是几种不同的浏览器，还包括同一 浏览器的各种版本。作为开发人员，您通常都会在自己的计算机中使用最新最好的浏览器版本 — 这也是出现 “对多个浏览器进行测试” 这一咒语的原因之一 — 但是，快速查看一下站点的浏览器统计信息，您就会发现，并不是所有用户都像您一样。

目前，同时运行同一种浏览器的多个版本比较困难，因为大多数浏览器的安装过程都覆盖了以前的所有版本。还好，有一些解决方法。对于Firefox，可以将每个浏览器的可执行文件保存为不同的名字，然后确保首次启动各个版本时启用配置文件管理程序，这样就不会共享这些配置文件。图1 展示了同时运行的两个 Firefox 浏览器版本 — 最新的 2.0.0.10 发行版和比较陈旧的 0.7 版本。

图 1. 同时运行的多个 Firefox 版本

对于 Internet Explorer，这个过程要稍微复杂一些。Windows 实际上 不希望您这样做；为了应对它的 “抵制”，您需要对注册表设置进行一些调整。一家小型软件公司 TredoSoft 发布了一款可以安装多个 IE 版本的免费工具，以及能够正确调整注册表键和 DDL 的指令，该公司因此而获得了广泛关注；请查看 参考资料 中的链接（其中还包含我即将介绍到的其他工具和扩展的链接，但是我以及 developerWorks 不会对这些链接进行担保）。

进行实际测试 不仅应该使用不同配置对各种浏览器进行测试，测试计算机（或者，适当规模的企业中受信任的远程用户测试程序）也应该有自己的 Internet连接。换而言之，不要忘记测试真实的连接，这样便不会由于本地加载图片和脚本而影响测试准确性。尽可能多地添加真实世界中的因素 —弹出窗口和广告拦截程序、个人防火墙和用户可能在其浏览器中使用的所有其他软件，这些因素都会影响页面的显示方式；也可以帮助您更好地理解真实终端用户的体验。University of Washington 的 Web Tripwire Toolkit（参见 参考资料）可以帮助您了解由于其他干扰而非浏览器实现引起的古怪问题。

当然，在设置并运行所有这些浏览器之前，需要知道从哪里获得它们！比如，Microsoft® 不会在其网站上提供 Internet Explorer5 的下载，并且在 Mozilla Foundation 页面您也不一定能获得 Firefox 1.0，这些都是老版本。幸运的是，积极的Web 用户们为旧的可执行文件创建了档案文件。evolt.org 上由自愿者推动的 Web 社区提供了大量各种风格的旧版浏览器，包括IE、Opera 等等，但是缺少最新的 Mozilla 发行版；这些可以在诸如 filehippo.com及类似的文件聚合站点找到，您可以很轻松地找到这些站点。对于 Apple 的 Safari，开发者喜爱的 Multi-Safari 项目将早期的Safari 版本进行了打包，因此可以方便地实现并行运行（参加 参考资料 中有关内容的链接）。

节省屏幕空间

处理多个浏览器时可能遇到的一个实际问题就是如何避免窗口混乱。虽然，很多时候无法避免，但是您至少可以通过两种方便的工具来稍微整理一下。IE Tab是一种 Firefox 插件，允许您在一个 Firefox 选项卡中运行一个 Internet Explorer 实例。这并不是模拟 —它确实使用了 IE 呈现引擎，这意味着您看到的内容就是您在 Explorer 中实际获得的内容，但是，这也意味着只能在 Windows中工作。图 2 展示了它的实际效果。

图 2. 使用 IE Tab

RightLynx是一种针对 Internet Explorer 和 Firefox 的插件，当您右键单击时将弹出一个窗口，显示当前页面在 Lynx中的显示状态，因此您不必始终打开活动的终端窗口；一个 Web 服务将在 Lynx中加载页面并将结果文本发送回您的计算机。这些工具都是免费的，并且安装简单，您可以在 参考资料 一节找到相关链接。

Lynx：古老而又崭新的浏览器

当我提到 Lynx 时，您可能会大吃一惊。年轻的开发人员可能已经忘记了这个基于文本的浏览器，它最早出现于 90 年代早期，专门针对 UNIX®命令行（但是也有针对 DOS、Windows 等的版本）。图 3 展示了使用 Lynx 访问 Web 开发专区的界面。

图 3. 使用 Lynx

使用 Lynx 测试站点乍一看似乎毫无意义 — 毕竟，访问您的站点的任何人都倾向于使用流行的图形化浏览器。然而，Lynx可以显示站点的基本架构，因而能够向最重要的站点访客 Web 牵引程序和 spider展示站点的近似外观，它们能够为搜索引擎执行站点索引，从而提供站点流量。Lynx 工具能够确保重要的搜索项不会隐藏在 Ajax 小部件之后。

虚拟化和模拟

当然，浏览器只是测试的一部分；您也许希望跨多个操作系统进行测试。与可以免费下载到开发计算机上的浏览器相比，操作系统的测试成本自然要高出许多。最全面的测试方法当然是对多个系统进行实际测试，包括 Windows 计算机、Mac、Linux® box和其他需要进行测试的操作系统的物理版本。这很可能超出一年的 Web 开发预算，但是，幸运的是，可以使用一些方法将一台计算机转化为多个测试平台。

最简单的方法就是创建一个双启动设置，即将多个操作系统装在同一台计算机上，在启动时可以选择所加载的系统。一般来讲，操作系统都被保存在不同的硬盘分区中，但是 LiveDistros 被保存在 CD 或 thumb驱动中，以避免硬盘驱动格式发生冲突。双启动过去一直用于 Linux 和其他开源版本，但是基于 x86 的 Macs的出现意味着很多计算机现在都能够双启动 Windows 和 OS X。

双启动的缺点是在操作系统之间进行切换需要等待很长时间。但是虚拟化则不存在这个问题，实现虚拟化后，可以同时运行多个操作系统。过去只有功能强大的服务器才能实现虚拟化，现在，只要拥有一台标准版本的桌面 PC，您就可以使用这个工具。如果您打算使用多个操作系统为用户提供服务，那么需要在测试计算机上实现某种形式的虚拟化。在图 4中，我在 Power Mac 中使用了 Virtual PC，同时在两个操作系统中使用 4 种不同浏览器访问 developerWorksWeb 架构专区。

图 4. 同时运行 4 种浏览器：OS X 上的 Safari 和 Firefox，Windows XP 上的 Firefox 和 Internet Explorer

通过使用多种工具（包括 VMWare 和 Virtual PC），您可以轻松地在所有普通 PC 上运行 Windows 和其他与 x86兼容的操作系统。其中一个操作系统充当主机，其他系统则在虚拟化应用程序中运行。这样，不需要重新启动，您可以在屏幕上相邻的窗口中，比如Windows Vista、Windows XP 和最新的 Ubuntu版本，测试您的应用程序。您仍然需要购买所有不同的操作系统，但至少只需要使用相同的硬件。

您可能注意到，我在上面的样例操作系统中没有提到 Mac OS X。很不幸，OS X 只能够在 Mac 硬件上运行，但是可以对 Mac使用一些虚拟化方法。因此，如果希望使用在单个机器上应用最广泛的系统，可以考虑使用 Intel® Mac以及针对它的两种主要的虚拟化产品，VMWare Fusion 或 Parallels Desktop（参见 参考资料 中的链接）。通过使用这种设置，您可以测试 OS X、Windows、Linux 以及其他运行在 x86 硬件之上的任何操作系统。当然，这种方法的缺点就是无论硬件还是软件都不是免费的，甚至还很贵。

移动设备测试

如果您的 Web 站点或应用程序针对的是移动用户 — 或者您期希能够为大量移动用户提供服务 —无疑，您需要对实际的移动设备进行测试。遗憾的是，与 PC市场相比，移动设备市场非常零散，因而很难购买和维护非常稳定的物理测试设备，并且成本也较高。还好，您也可以通过桌面计算机来模拟移动平台。

很多特定的移动平台提供了免费的 SDK，包括可运行在 PC 桌面上的设备模拟程序。例如，您可以下载针对 Google Android 平台的 SDK（参见 参考资料中的链接）。访问浏览器有些难度 — 您需要在 Eclipse 开发环境中安装 Android 插件，然后启动其中一个样例应用程序 —完成这些操作后，您将可以访问基于 WebKit 的浏览器，WebKit 开源框架是支撑 Safari 和 Nokia S60智能手机浏览器的基础。图 5 显示了运行中的浏览器模拟程序。

图 5. Android SDK 中的浏览器

移动浏览器市场也非常零散，但是很多高端智能手机现在可以使用经过修改的桌面浏览器 — iPhone 使用 Safari，而 OperaMobile 可以用于众多智能手机，因此您可以直接在桌面上完成手机浏览器测试，但是，桌面浏览器和手机浏览器之间的相关性并不理想（iPhoney是一种使用 Safari 标准桌面版本的 OS X 应用程序，但是至少可以向您呈现站点在受限的 iPhone 屏幕中的显示效果；参见 参考资料 中的免费下载链接）。

当然，很多手机仍然需要通过受限的 WAP 访问 Web。如果需要测试一个 WAP 站点，可以从网上获得大量免费的 WAP 模拟程序，在浏览器窗口中运行即可。

总之，要通过内部测试获得广泛的覆盖率，移动测试是最困难的部分。但是您还有其他的选择，我将在下一节介绍。

外包测试

看到这里，您可能感到有些绝望。也许测试的最后期限就在明天。也许您还不太信服我刚才介绍的这些技术。或者您在时间或资金方面的预算非常紧张。或者，IT部门不希望您在计算机中安装旧版本的浏览器或修改注册表键。这时候，您该如何做？除了最新版的 Firefox 和 IE外，您是否无法对其他浏览器进行测试？

您仍然还有一种选择：您可以通过托管服务执行测试。您需要提供一个 URL，这些服务将显示该 URL 在各种平台上的显示效果。您现在无法从自己的测试计算机中实际访问某个站点，但是，只需要很低的成本就可以访问大量平台 — 有些时候甚至不需要花一分钱。

Browsershots.org展示了可以从这种服务的免费版本中获得的好处。图 6 展示了可以使用的各种选项（移动平台和 Lynx 不包括在内）。对于选中的每个框，您获得一个PNG 文件，它是指定的 URL在该浏览器/操作系统组合的显示效果的屏幕截图。这个过程会耗时半个小时或更长时间，因此，需要在后台运行该过程，以便可以执行其他任务，但是这个重要的测试部分是免费的。

图 6. 对 Browsershots.org 的定制结果

如何应对长期的全面测试

如果预算充足，那么还可以做得更好一些。例如，如果支付一个月的费用，Browsercam.com 可以使您访问更多的平台和浏览器 —包括某些移动平台 — 以及一些动态页面，允许您测试 Ajax 应用程序和其他基于 JavaScript 的页面。诸如 Litmusapp这样的服务可以集成到您的测试和开发流程中，提供版本化支持和方法，向外部客户机发布测试结果。

这些服务同样适用于移动领域，新的移动设备总是层出不穷，远远超过大多数人的想像。DotMobi Virtual Developer Lab就是一种不错的托管服务，主要针对移动测试；它可以访问上百种不同移动设备，并且能够通过多种方法进行操作。这些服务提供的界面与真实设备并不相同，但是大多数情况下都可以满足您的要求；并且由于它专门针对移动设备，因此可以作为内部测试或桌面服务的补充。

结束语

理想情况下，应该对所有 Web应用程序进行测试，以确保能够在访问它的所有浏览器中正确工作。但是，鉴于浏览器市场的纷乱复杂以及更加变幻莫测的移动平台市场的日益崛起，使得Web 应用程序的测试更加困难。尽管如此，您仍然可以通过一些方法来简化测试。您可以使用大量工具进行跨平台 Web测试。无论是对工作站资源使用一些虚拟化的操作系统，或仅仅通过托管服务运行您的应用程序，您都能够查看应用程序在不同用户环境中的性能 —并且您也应该对用户负责，确保应用程序能够在尽量多的环境中正常工作。