执行测试的策略
本文解释了如何进行跨浏览器测试：如何选择要测试的浏览器和设备，如何实际测试这些浏览器和设备，以及如何与用户组一起测试。
| 预备知识 | 熟悉核心 HTML、CSS 和 JavaScript 语言；了解 跨浏览器测试的高级原则。 |
|---|---|
| 目标 | 了解跨浏览器测试涉及的高级概念。 |
选择要测试的浏览器和设备
由于你无法测试所有浏览器和设备的组合，因此只需确保你的网站在最重要的浏览器和设备上运行即可。在实际应用中，“重要”通常意味着“在目标受众中普遍使用”。
你可以根据你打算提供的支持量来对浏览器和设备进行分类。例如
- A 级：常用/现代浏览器 — 已知具备能力。彻底测试并提供全面支持。
- B 级：旧版/功能较弱的浏览器 — 已知不具备能力。进行测试，并提供更基本的体验，以完全访问核心信息和服务。
- C 级：稀有/未知浏览器 — 不进行测试，但假定它们具备能力。提供完整的网站，该网站应该可以运行，至少具有我们防御性编码提供的后备方案。
在以下部分中，我们将以这种格式构建支持图表。
注意：雅虎率先推广了这种方法，采用了其 分级浏览器支持 方法。
预测受众最常用的浏览器
这通常涉及根据用户人口统计数据进行有根据的猜测。例如，假设你的用户位于北美和西欧
快速在线搜索会告诉你，北美和西欧的大多数人使用 Windows 或 Mac 台式机/笔记本电脑，主要浏览器是 Chrome、Firefox、Safari 和 Edge。你可能只想测试这些浏览器的最新版本，因为这些浏览器会定期更新。所有这些都应该归入 A 级。
这个人群中的大多数人还使用 iOS 或 Android 手机，所以你可能想测试最新版本的 iOS Safari、旧版 Android 原生浏览器的最后几个版本，以及 iOS 和 Android 上的 Chrome 和 Firefox。理想情况下，你应该在手机和平板电脑上测试这些浏览器，以确保响应式设计有效。
Opera Mini 不太擅长运行复杂的 JavaScript，所以我们也应该把它归入 B 级。
因此，我们选择测试哪些浏览器是基于我们预期用户会使用的浏览器。这给我们带来了以下支持图表
- A 级：Windows/Mac 上的 Chrome 和 Firefox，Mac 上的 Safari，Windows 上的 Edge，iPhone/iPad 上的 iOS Safari，手机/平板电脑上的 Android 原生浏览器（最后两个版本），以及手机/平板电脑上的 Chrome 和 Firefox for Android（最后两个版本）
- B 级：Opera Mini
- C 级：不适用
如果你的目标受众主要位于其他地方，那么最常见的浏览器和操作系统可能与上述有所不同。
注意：“我公司的 CEO 使用 Blackberry，所以我们最好确保它在上面看起来不错”也可以是需要考虑的因素。
浏览器统计数据
一些网站显示了某个地区流行的浏览器。例如，Statcounter 提供了北美趋势的概念。
使用分析
如果你能获得数据，更准确的数据来源是像 Google Analytics 这样的分析应用程序，它会告诉你人们使用哪些浏览器浏览你的网站。当然，这依赖于你已经有一个网站来使用它，所以它不适用于全新网站。
你也可以考虑使用开源且注重隐私的分析平台，例如 Open Web Analytics 和 Matomo。它们期望你自行托管分析平台。
设置 Google Analytics
- 首先，你需要一个 Google 帐户。使用此帐户登录 Google Analytics。
- 选择 Google Analytics（网络）选项，然后点击 注册 按钮。
- 在注册页面输入你的网站/应用程序详细信息。这设置起来相当直观；最重要的是填写正确的网站 URL 字段。这需要是你的网站/应用程序的根 URL。
- 填写完所有内容后，按下 获取跟踪 ID 按钮，然后接受出现的服务条款。
- 下一页为你提供了一些代码片段和其他说明。对于一个基本网站，你需要做的是复制 网站跟踪 代码块，并将其粘贴到你网站上所有需要使用 Google Analytics 跟踪的不同页面中。你可以将这些片段放置在你的结束
</body>标签下方，或者其他适当的位置，以避免与你的应用程序代码混淆。 - 将更改上传到开发服务器，或你需要代码的任何其他位置。
就是这样！你的网站现在应该可以开始报告分析数据了。
研究分析数据
现在你应该能够返回 Analytics Web 主页，并开始查看你收集的关于你网站的数据（当然，你需要留出一点时间来实际收集一些数据）。
默认情况下，你应该会看到报告选项卡，如下所示
你可以使用 Google Analytics 查看大量数据——不同类别的自定义报告等——我们没有时间讨论所有这些。 Analytics 入门 为初学者提供了关于报告（以及更多）的一些有用指导。
你可以通过从左侧菜单中选择 受众群体 > 技术 > 浏览器和操作系统 来查看用户正在使用的浏览器和操作系统。
注意：使用 Google Analytics 时，你需要注意误导性偏差，例如，“我们没有 Firefox Mobile 用户”可能会导致你不去支持 Firefox mobile。但如果网站一开始在 Firefox mobile 上就损坏了，那么你就不会有任何 Firefox Mobile 用户。
其他注意事项
你应该将可访问性作为 A 级测试要求。
此外，你应该了解特定情况的需求。例如，如果你的产品面向以手机作为主要上网方式的市场，你可能需要将移动浏览器支持放在首位。
最终支持图表
所以，我们最终的支持图表将如下所示
- A 级：Windows/Mac 上的 Chrome 和 Firefox，Mac 上的 Safari，以及 Edge（各自的最后两个版本），iPhone/iPad 上的 iOS Safari，手机/平板电脑上的 Android 原生浏览器（最后两个版本），以及手机/平板电脑上的 Chrome 和 Firefox for Android（最后两个版本）。通过常见可访问性测试。
- B 级：Opera Mini。
- C 级：Opera，其他小众现代浏览器。
你要测试什么？
当你的代码库有新的添加需要测试时，在开始测试之前，你应该写一份需要通过的测试要求列表才能被接受。这些要求可以是视觉上的或功能上的——两者结合起来才能构成一个可用的网站功能。
此功能的测试标准可以这样编写
A 级和 B 级
- 按钮应该可以通过用户的主要控制机制激活，无论是鼠标、键盘还是触摸。
- 切换按钮应该使信息框出现/消失。
- 文本应该可读。
- 使用屏幕阅读器的视力障碍用户应该能够访问文本。
A 级
- 信息框在出现/消失时应该平滑地动画。
- 渐变和文本阴影应该能增强盒子外观。
你可能会注意到按钮无法仅通过键盘使用。我们可以通过使用 JavaScript 实现切换的键盘控制来弥补这一点，或者使用其他方法。
这些测试标准很有用，因为
组建测试实验室
进行浏览器测试的一个选择是自己进行测试。为此，你可能会结合使用实际物理设备和模拟环境（使用模拟器或虚拟机）。
物理设备
通常，最好使用运行要测试的浏览器的真实设备——这在行为和整体用户体验方面提供了最高的准确性。对于一个合理的低级别设备实验室，你可能需要以下设备
- 一台 Mac，安装了你需要测试的浏览器——这可以包括 Firefox、Chrome、Opera 和 Safari。
- 一台 Windows PC，安装了你需要测试的浏览器——这可以包括 Edge（或 IE）、Chrome、Firefox 和 Opera。
- 一台配置较高的 Android 手机和平板电脑，安装了你需要测试的浏览器——这可以包括 Android 上的 Chrome、Firefox 和 Opera Mini，以及原始的 Android 原生浏览器。
- 一台配置较高的 iOS 手机和平板电脑，安装了你需要测试的浏览器——这可以包括 iOS 上的 Safari 以及 Chrome、Firefox 和 Opera Mini。
以下也是不错的选择，如果你能获得的话
- 一台可用的 Linux PC，以防你需要测试特定于 Linux 版本浏览器的错误。Linux 用户通常使用 Firefox、Opera 和 Chrome。如果你只有一台机器可用，你可以考虑创建一个双引导机器，在单独的分区上运行 Linux 和 Windows。
- 几台配置较低的移动设备，以便你可以测试动画等功能在性能较低的处理器上的表现。
你的主要工作机器也可以是安装其他专用工具的地方，例如辅助功能审计工具、屏幕阅读器以及模拟器/虚拟机。
一些大型公司拥有设备实验室，其中储备了大量不同的设备，使开发人员能够在非常特定的浏览器/设备组合上查找错误。小型公司和个人通常无法负担如此复杂的实验室，因此倾向于使用较小的实验室、模拟器、虚拟机和商业测试应用程序。
我们将在下面介绍其他选项。
注意：已经做出了一些努力来创建可公开访问的设备实验室——请参阅 开放设备实验室。
注意：我们还需要考虑可访问性——有许多有用的工具可以安装在你的机器上以方便可访问性测试，但我们将在本课程后面的《处理常见可访问性问题》文章中介绍它们。
模拟器
模拟器本质上是在你的计算机内部运行的程序，它们模拟某种设备或特定的设备条件，让你比不得不寻找特定的硬件/软件组合进行测试更方便地进行一些测试。
模拟器可能只是测试设备条件那么简单。例如，如果你想对响应式设计的宽度/高度媒体查询进行一些快速而粗略的测试，你可以使用 Firefox 的 响应式设计模式。Safari 也有类似的模式，可以通过转到 Safari > 偏好设置，并勾选 显示开发菜单，然后选择 开发 > 进入响应式设计模式 来启用。Chrome 也有类似的功能：设备模式（请参阅 使用设备模式模拟移动设备）。
但通常情况下，你必须安装某种模拟器。你最常需要测试的设备/浏览器如下
- 用于开发 Android 应用程序的官方 Android Studio IDE 对于仅仅在 Google Chrome 或旧版 Stock Android 浏览器上测试网站来说有点重量级，但它确实带有一个强大的 模拟器。如果你想要更轻量级的选项，Andy 是一个不错的选择，它可以在 Windows 和 Mac 上运行。
- Apple 提供了一个名为 Simulator 的应用程序，它运行在 Xcode 开发环境之上，并模拟 iPad/iPhone/Apple Watch/Apple TV。这包括原生的 iOS Safari 浏览器。不幸的是，这只能在 Mac 上运行。
你通常也可以找到其他移动设备环境的模拟器，例如
- 如果你想测试 Opera Mini，可以单独模拟它。
注意：许多模拟器实际上需要使用虚拟机（见下文）；在这种情况下，通常会提供说明，并且/或者虚拟机的使用会集成到模拟器的安装程序中。
虚拟机
虚拟机是在你的桌面计算机上运行的应用程序，它允许你模拟整个操作系统，每个操作系统都独立地存储在自己的虚拟硬盘中（通常由主机硬盘上的一个大型文件表示）。有许多流行的虚拟机应用程序可用，例如 Parallels、VMware 和 Virtual Box；我们个人喜欢后者，因为它免费。
注意：运行虚拟机模拟需要大量的硬盘空间；你模拟的每个操作系统都可能占用大量内存。你通常会为每次安装选择所需的硬盘空间；你可能只需 10GB 即可，但有些来源建议 50GB 或更多，以便操作系统能够可靠运行。大多数虚拟机应用程序提供的一个不错的选择是创建一块动态分配的硬盘，它会根据需要增长和收缩。
要使用 Virtual Box，你需要
- 获取你想要模拟的操作系统的安装盘或镜像（例如 ISO 文件）。Virtual Box 无法提供这些；大多数，例如 Windows 操作系统，都是无法免费分发的商业产品。
- 下载适用于你的操作系统的相应安装程序 并安装。
- 打开应用程序；你将看到如下视图：
- 要创建新的虚拟机，请点击左上角的 新建 按钮。
- 按照说明填写相应的对话框。你将
- 为新虚拟机提供一个名称
- 选择要安装的操作系统和版本
- 设置分配多少 RAM（我们建议 2048MB 或 2GB 左右）
- 创建虚拟硬盘（在包含 立即创建虚拟硬盘、VDI（虚拟磁盘映像） 和 动态分配 的三个对话框中选择默认选项）。
- 选择虚拟硬盘的文件位置和大小（选择一个合适的名称和位置来保存它，大小指定大约 50GB，或者你愿意指定的任何大小）。
现在，新的虚拟机应该会出现在主 Virtual Box UI 窗口的左侧菜单中。此时，你可以双击打开它——它将开始启动虚拟机，但尚未安装操作系统（OS）。此时你需要将对话框指向安装程序映像/磁盘，它将像在物理机器上一样运行安装操作系统的步骤。
警告：你需要在此时确保你拥有要安装在虚拟机上的操作系统镜像，并立即安装它。如果你此时取消此过程，可能会导致虚拟机无法使用，并且你需要将其删除并重新创建。这并非致命，但很烦人。
此过程完成后，你的主机计算机窗口中应该会运行一个虚拟机操作系统。
你需要像对待任何真实安装一样对待这个虚拟操作系统安装——例如，除了安装你要测试的浏览器外，还要安装防病毒程序来保护它免受病毒侵害。
拥有多个虚拟机非常有用，特别是对于 Windows IE/Edge 测试——在 Windows 上，你无法并排安装多个版本的默认浏览器，因此你可能需要构建一个虚拟机库，以便根据需要处理不同的测试，例如
- Windows 10 和 Edge 14
- Windows 10 和 Edge 13
注意：虚拟机另一个好处是虚拟磁盘镜像相当独立。如果你在一个团队中工作，可以创建一个虚拟磁盘镜像，然后复制并分发。只需确保你拥有运行所有这些 Windows 副本或其他你正在运行的许可产品所需的许可证。
自动化和商业应用程序
正如上一章中提到的，通过使用某种自动化系统，你可以减轻很多浏览器测试的痛苦。你可以设置自己的测试自动化系统（Selenium 是流行的选择），这需要一些设置，但当你搞定它时，会非常有益。
还有一些商业工具可用，例如 Sauce Labs、Browser Stack 和 LambdaTest，它们可以为你完成此类工作，而无需担心设置问题，如果你愿意在测试上投入一些资金的话。
另一个替代方案是使用无代码测试自动化工具，例如 Endtest。
我们将在本模块后面介绍如何使用这些工具。
用户测试
在我们继续之前，我们将通过讨论用户测试来结束本文——如果你有一个愿意测试你的新功能的用户组，这可能是一个不错的选择。请记住，这可以像你喜欢的那样低成本或复杂——你的用户组可以是一群朋友、一群同事，或一群无偿或有偿的志愿者，这取决于你是否有钱用于测试。
通常，你会让你的用户在某种开发服务器上查看包含新功能的页面或视图，这样你就不会在完成之前将最终网站或更改上线。你应该让他们按照一些步骤进行操作，并报告他们得到的结果。提供一组步骤（有时称为脚本）很有用，这样你就可以获得与你试图测试的内容相关的更可靠的结果。我们上面在你要测试什么部分提到了这一点——将那里详述的测试标准转换为要遵循的步骤很容易。例如，以下内容适用于视力正常的用户
- 在你的台式计算机上用鼠标点击几次问号按钮。刷新浏览器窗口。
- 在你的台式计算机上用键盘选择并激活几次问号按钮。
- 在你的触摸屏设备上轻触几次问号按钮。
- 切换按钮应该使信息框出现/消失。在上述三种情况中，它是否这样做了？
- 文字是否可读？
- 信息框在出现/消失时是否平滑地动画？
运行测试时，以下方法也可能是个好主意
- 尽可能设置一个单独的浏览器配置文件，禁用浏览器扩展和其他此类内容，并在该配置文件中运行测试（例如，参阅 使用配置文件管理器创建、删除和切换 Firefox 配置文件 和 与他人共享 Chrome 或添加用户）。
- 在运行测试时，如果可用，使用浏览器的隐私模式功能（例如，Firefox 中的 隐私浏览，Chrome 中的 隐身模式），这样就不会保存 cookie 和临时文件等内容。
这些步骤旨在确保你正在测试的浏览器尽可能“纯净”，即没有安装任何可能影响测试结果的东西。
注意：如果你的硬件条件允许，另一个有用的低成本选项是在低端手机/其他设备上测试你的网站——随着网站变得更大，功能更多，网站变慢的可能性也会更高，因此你需要开始更多地考虑性能。尝试在低端设备上使你的功能正常运行，将使其在高端设备上获得良好体验的可能性更大。
注意：一些服务器端开发环境提供了有用的机制，可以将网站更改仅推广给一部分用户，从而提供了一种有用的机制，可以在不需要单独的开发服务器的情况下，让一部分用户测试某个功能。一个例子是 Django Waffle Flags。
总结
阅读本文后，你应该对如何识别目标受众/目标浏览器列表，以及如何有效地在该列表上执行跨浏览器测试有了很好的了解。
接下来，我们将把注意力转向你的测试可能发现的实际代码问题，从 HTML 和 CSS 开始。