跨浏览器测试简介
什么是跨浏览器测试？
跨浏览器测试是指确保网站在各种浏览器和设备上都能正常工作的实践。Web 开发人员应考虑
- 不同的浏览器，包括一些稍微旧一点的浏览器，它们不支持所有最新的 JS/CSS 功能。
- 不同的设备，从台式机和笔记本电脑到平板电脑和智能手机，再到智能电视，具有不同的硬件功能。
- 残疾人士，他们可能依赖屏幕阅读器等辅助技术，或仅使用键盘。
请记住，你不是你的用户——仅仅因为你的网站在你的 MacBook Pro 或高端 Galaxy Nexus 上可以正常工作，并不意味着它对所有用户都能正常工作！
注意：让网络为所有人服务 讨论了不同的浏览器、它们的市场份额以及相关的跨浏览器兼容性问题。
网站应该能够在不同的浏览器和设备上访问，并且能够被残疾人访问（例如，屏幕阅读器友好）。只要核心功能可以通过某种方式访问，网站就不需要在所有浏览器和设备上提供完全相同的体验。例如，现代浏览器可能有一些动画、3D 和闪亮的效果，而旧版浏览器可能只显示包含相同信息的平面图形。
此外，网站几乎不可能在所有浏览器和设备上都能正常工作，因此 Web 开发人员应与网站所有者就代码将在哪些浏览器和设备上运行达成一致。
为什么会出现跨浏览器问题？
跨浏览器问题发生的原因有很多，请注意，这里我们讨论的是在不同浏览器/设备/浏览偏好之间行为不同的问题。在处理跨浏览器问题之前，你应该已经修复了代码中的错误（如果需要，请查看 调试 HTML、调试 CSS 和 哪里出错了？故障排除 JavaScript 中的先前主题，以刷新你的记忆）。
跨浏览器问题通常发生是因为
- 有时浏览器存在错误，或者以不同的方式实现功能。这种情况比以前好多了；早在 IE4 和 Netscape 4 竞争成为 20 世纪 90 年代主流浏览器时，浏览器公司故意以不同的方式实现功能，以试图获得竞争优势，这使得开发人员的生活变得非常糟糕。如今，浏览器在遵循标准方面做得更好，但差异和错误仍然偶尔会出现。
- 一些浏览器对技术功能的支持级别可能不同于其他浏览器。当处理浏览器刚刚开始实现的尖端功能，或者必须支持不再开发的非常旧的浏览器时，这是不可避免的，这些浏览器可能在很久以前（即不再对其进行任何新工作）就已停止开发，那时新功能甚至还没有发明出来。例如，如果你想在你的网站中使用尖端的 JavaScript 功能，它们可能在旧版浏览器中无法正常工作。如果你需要支持旧版浏览器，你可能需要不使用这些功能，或者在需要时使用某种交叉编译器将你的代码转换为旧式的语法。
- 某些设备可能存在限制，导致网站运行缓慢或显示效果不佳。例如，如果某个网站的设计是为了在台式电脑上看起来不错，那么它在移动设备上可能会显得非常小并且难以阅读。如果你的网站包含大量大型动画，它在高端平板电脑上可能没问题，但在低端设备上可能会反应迟钝或卡顿。
……以及更多其他原因。
在后面的文章中，我们将探讨常见的跨浏览器问题，并查看这些问题的解决方案。
跨浏览器测试的工作流程
所有这些跨浏览器测试工作听起来可能既费时又令人恐惧，但它不必如此——你只需要仔细计划，并确保在正确的地方进行足够的测试，以确保你不会遇到意外问题。如果你正在从事一个大型项目，你应该定期对其进行测试，以确保新功能对你的目标受众有效，并且代码的新增内容不会破坏之前正常工作的旧功能。
如果你将所有测试都留到项目结束时进行，那么你发现的任何错误都比你边走边发现并修复它们要花费更多的时间和成本。
项目的测试和错误修复工作流程可以大致分为以下四个阶段（这只是一个非常粗略的划分——不同的人可能对这些事情有不同的做法）
初步计划 > 开发 > 测试/发现 > 修复/迭代
步骤 2-4 将根据需要重复多次，以完成所有实现。我们将在后续文章中更详细地介绍测试过程的不同部分，但现在，让我们先总结一下每个步骤中可能发生的事情。
初步计划
在初步计划阶段，你可能会与网站所有者/客户（这可能是你的老板，或者你正在为其构建网站的外部公司的某个人）举行几次计划会议，在这些会议中，你确定网站应该是什么——它应该包含哪些内容和功能，它应该是什么样子，等等。此时，你还需要了解开发网站需要多长时间——他们的截止日期是什么，他们将为你的工作支付多少钱？我们不会详细介绍这一点，但跨浏览器问题会对这种计划产生严重影响。
一旦你对所需的功能集以及你可能使用哪些技术来构建这些功能有了了解，你应该开始探索目标受众——这个网站的目标受众将使用哪些浏览器、设备等？客户可能已经从他们之前进行的研究中获得了关于此方面的数据，例如，来自他们拥有的其他网站，或者来自你正在处理的网站的先前版本。如果没有，你可以通过查看其他来源获得一个很好的想法，例如竞争对手的使用统计数据，或网站将服务的国家/地区。你也可以使用一些直觉。
例如，你可能正在构建一个为北美客户服务的电子商务网站。该网站应该能够完全在最近几个版本的流行桌面和移动浏览器中运行——这应该包括 Chrome（以及 Edge、Opera，因为它们基于与 Chrome 相同的渲染引擎）、Firefox 和 Safari。它也应该符合 WCAG AA 标准，具备可访问性。
现在你知道了你的目标测试平台，你应该回顾一下所需的功能集以及你将使用的技术。例如，如果电子商务网站所有者希望在产品页面中构建一个由 WebGL 提供支持的每个产品的 3D 导览，那么他们需要接受这在所有旧版浏览器版本中都无法正常工作。
你应该列出潜在的问题区域。
注意：你可以通过在 MDN（你所在的网站！）上查找不同的功能来找到技术的浏览器支持信息。你还可以咨询 caniuse.com，以获取更多有用的详细信息。
一旦你同意了这些细节，你就可以开始开发网站了。
开发
现在开始开发网站。你应该将开发的不同部分拆分为模块，例如，你可能会将不同的网站区域拆分——首页、产品页面、购物车、支付流程等。然后，你可能会进一步细分这些模块——实现一个通用的网站页眉和页脚，实现产品页面详细信息视图，实现持久的购物车小部件，等等。
跨浏览器开发有多种通用策略，例如
- 尽可能让所有目标浏览器中的所有功能都能正常工作。这可能涉及编写不同的代码路径，以不同的方式在不同的浏览器中重现功能，或者使用 Polyfill 使用 JavaScript 或其他技术模拟任何缺少的支持，或者使用允许你编写一段代码并在后台执行不同操作的库，具体取决于浏览器支持什么。
- 接受某些功能在所有浏览器中都不会以相同的方式工作，并在不支持完整功能的浏览器中提供不同的（可接受的）解决方案。有时由于设备限制，这是不可避免的——无论你如何设计网站，电影宽屏都不会提供与 4 英寸移动屏幕相同的视觉体验。
- 接受你的网站在某些旧版浏览器中无法正常工作，然后继续前进。如果你的客户/用户群对此没有问题，那么这没问题。
通常，你的开发将涉及上述三种方法的组合。最重要的是，你在提交每个小部分之前都要对其进行测试——不要将所有测试都留到最后！
测试/发现
在每个实现阶段之后，你需要测试新功能。首先，你应该确保代码中没有任何通用问题阻止你的功能正常工作
- 在系统上的几个稳定浏览器中对其进行测试，例如 Firefox、Safari、Chrome 或 Edge。
- 进行一些低保真可访问性测试，例如尝试仅使用键盘使用你的网站，或者通过屏幕阅读器使用你的网站以查看它是否可导航。
- 在 Android 或 iOS 等移动平台上进行测试。
此时，修复新代码中发现的任何问题。
接下来，你应该尝试将测试浏览器列表扩展到完整的目标受众浏览器列表，并开始专注于消除跨浏览器问题（有关 确定目标浏览器 的更多信息，请参阅下一篇文章）。例如
- 尝试在所有你能使用的现代桌面浏览器上测试最新的更改——包括桌面上的 Firefox、Chrome、Opera、Edge 和 Safari（理想情况下包括 Mac、Windows 和 Linux）。
- 在常见的手机和平板电脑浏览器中进行测试（例如，iPhone/iPad 上的 iOS Safari，iPhone/iPad/Android 上的 Chrome 和 Firefox），
- 还在目标列表中包含的其他任何浏览器中进行测试。
最简单的选择是自己尽可能多地进行测试（如果你在团队中工作，可以邀请队友帮忙）。你应该尽量在真实的物理设备上进行测试。
如果你没有办法在物理硬件上测试所有不同的浏览器、操作系统和设备组合，你也可以使用模拟器（在桌面电脑上使用软件模拟设备）和虚拟机（允许你在桌面电脑上模拟多个操作系统/软件组合的软件）。这是一种非常受欢迎的选择，尤其是在某些情况下——例如，Windows不允许你在同一台机器上同时安装多个版本的Windows，因此使用多个虚拟机通常是唯一的选择。
另一个选择是用户组——利用开发团队之外的一群人来测试你的网站。这可以是一群朋友或家人，一群其他员工，当地大学的一个班级，或者一个专业的用户测试设置，人们付费来测试你的网站并提供结果。
最后，你可以使用审计或自动化工具来更智能地进行测试；随着项目规模的扩大，这是一个明智的选择，因为手动进行所有这些测试可能会花费很长时间。你可以设置自己的测试自动化系统（Selenium 是一个流行的选择），例如，它可以在多个不同的浏览器中加载你的网站，并
- 查看按钮点击是否成功导致某些事情发生（例如，地图显示），在测试完成后显示结果。
- 对每个浏览器截图，让你能够查看布局在不同浏览器之间是否一致。
如果你希望在测试方面投入资金，也有一些商业工具可以为你自动化大部分的设置和测试（例如 Sauce Labs 和 Browser Stack）。这些类型的工具通常能够实现持续集成工作流程，在代码更改被允许提交到代码库之前，会自动对其进行测试。
在预发布浏览器上进行测试
在预发布版本的浏览器上进行测试通常是一个好主意；请参阅以下链接
如果你在你的网站中使用了非常新的技术，并且想要针对最新的实现进行测试，或者如果你在最新版本的浏览器中遇到了错误，并且想要查看浏览器开发者是否在更新版本中修复了该错误，那么这一点尤其重要。
修复/迭代
一旦你发现了错误，你需要尝试修复它。
首先要尽可能地缩小错误发生的位置。从报告错误的人那里获取尽可能多的信息——什么平台、设备、浏览器版本等。在类似的配置上尝试（例如，在不同的桌面平台上使用相同的浏览器版本，或者在同一平台上使用几个不同版本的相同浏览器）以查看错误的持续范围。
这可能不是你的错——如果浏览器中存在错误，那么希望供应商会尽快修复它。它可能已经被修复了——例如，如果 Firefox 49 版本中存在错误，但在 Firefox Nightly（版本 52）中不再存在，那么他们已经修复了它。如果它没有被修复，那么你可能需要提交一个错误报告（请参阅下面的报告错误）。
如果这是你的错，你需要修复它！找出错误的原因与任何 Web 开发错误的策略相同（同样，请参阅调试 HTML、调试 CSS 和 哪里出错了？解决 JavaScript 问题）。一旦你发现了导致错误的原因，你需要决定如何在导致问题的特定浏览器中解决它——你不能直接更改问题代码，因为这可能会破坏其他浏览器中的代码。通常的方法是通过某种方式分叉代码，例如，使用 JavaScript 特性检测代码来检测问题特性无法工作的情况，并在这些情况下运行一些可以工作的不同代码。
修复完成后，你需要重复你的测试过程，以确保你的修复正常工作，并且没有导致网站在其他地方或其他浏览器中出现故障。
报告错误
重申上面所说的话，如果你在浏览器中发现错误，你应该报告它们。