跨浏览器测试介绍
本文是对跨浏览器测试的概述，帮助了解什么是跨浏览器测试、常见的问题都有哪些以及应该怎么调试和修复问题。
| 前提： | 熟悉 HTML、CSS 和 JavaScript 语言的基本知识。 |
|---|---|
| 目标： | 了解跨浏览器测试的抽象概念。 |
什么是跨浏览器测试？
跨浏览器测试是确保网站能在不同浏览器和设备上运行的一种做法。Web 开发人员应考虑：
- 不同的浏览器，包括不支持最新 JS/CSS 特性的稍旧浏览器。
- 从台式机、笔记本电脑、平板电脑、智能手机到智能电视，不同设备的硬件性能各不相同。
- 残疾人，他们可能依赖屏幕阅读器等辅助技术，或仅使用键盘。
请记住，你不能代表产品的用户——你的网站能适配 Macbook Pro 或高端 Galaxy Nexus，并不意味它适用于所有用户！
备注： 让 web 为每个人服务文章讨论了不同的浏览器、它们的市场份额以及相关的跨浏览器兼容性问题。
网站应该在不同的浏览器和设备上都能够进行访问，并且对残疾人士友好，比如对使用屏幕阅读器的人。网站不必在所有浏览器和设备上提供完全一致的体验，只要核心功能可以通过某种方式访问即可。例如，现代浏览器可能会展示动画、3D 效果和光彩夺目的元素，而老旧的浏览器可能仅展示同一信息的基本图形。
此外，网站几乎不可能在所有浏览器和设备上都能运行，因此 web 开发人员应与网站所有者就代码能在哪些浏览器和设备上运行达成一致。
为什么会出现跨浏览器问题？
跨浏览器问题有许多不同的原因，请注意，这里我们讨论的是在不同浏览器/设备/浏览偏好中出现不同行为的问题。在解决跨浏览器问题之前，你应该已经修复了代码中的错误（如果需要，请复习一下之前主题中的调试 HTML、调试 CSS，以及出了什么问题？JavaScript 故障排查）。
出现跨浏览器问题的常见原因是：
- 有时候浏览器有程序错误（bug），或者实现特性的方式不同。这种情况比以前大有改观；在 IE 4 和 Netscape 4 竞争的二十世纪九十年代，浏览器厂商故意采用与其他厂商不同的方式开发特性，以此获得竞争优势，这使得开发者如陷地狱。近来各个浏览器更加注重遵循标准，但差异和程序错误仍会时而出现。
- 一些浏览器对一些技术特性的支持程度与其他浏览器不同。当你在处理一些浏览器厂商正在实现的前沿技术，或你必须支持一些很古老的不再更新维护的浏览器时，跨浏览器问题会不可避免地出现。举个例子：你想在自己网站里用到的一些前沿 JavaScript 特性在旧版浏览器中可能不会生效。如果你需要支持旧版浏览器，你可能必须放弃新技术，或在必要时使用某种交叉编译器将代码转换为旧式语法。
- 某些设备可能存在限制，导致网站运行缓慢或显示效果不佳。例如：若一个网站的设计效果在 PC 端很棒，它在移动设备上就会显得很小，很不易于阅读。若你的网站要加载体积很大的动画，尽管在高配平板电脑上可能没问题，但在低端设备上可能会变得迟缓或不稳定。
此外还有很多原因。
在后续文章中，我们会探究常见的跨浏览器问题，并寻求解决方案。
跨浏览器测试的工作流
所有这些跨浏览器测试工作听起来可能既费时又可怕，但其实大可不必——你只需认真做好计划，并确保在正确的地方进行足够的测试，以确保不会遇到意想不到的问题。如果你正在开发大型项目，你应该定期对其进行测试，以确保新特性对目标受众有效，并且新添加的代码不会破坏之前有效的旧特性。
如果你把项目的所有测试工作留到最后，那么会比随时发现和解决程序错误的耗时更长，成本更高。
一个项目的测试和修复程序错误的工作流可以大致分为如下四个阶段（这只是粗略划分——因人而异）：
初步规划 > 开发 > 测试/查错 > 修复/迭代
为了完成所有的实现工作，第 2-4 步往往需要重复多次。我们将在以后的文章中更详细地介绍测试过程的各个部分，但现在，让我们先总结一下每个步骤可能发生的情况。
初步规划
在初始规划阶段，你可能会与网站的所有者/客户（可能是你的老板，或者来自你正在为其建设网站的外部公司的人员）进行多次规划会议，通过这些会议确定网站的具体要求——包括内容和功能，以及外观设计等。此时，你还需要了解开发网站的时间限制——即他们的截止日期，以及他们将支付给你的报酬。我们不会详细介绍这些，但跨浏览器问题可能会对这样的规划产生重大影响。
一旦你对所需特性有了初步概念，并且知道可能会采用哪些技术来实现这些特性，你就应该开始研究目标受众——即网站的目标用户会使用什么样的浏览器、设备等。客户可能已经从他们之前的研究中获取了相关数据，比如从他们运营的其他网站或网站的早期版本中获得的数据。如果没有现成的数据，你可以通过查阅其他资源来获得一个大致的了解，例如查看竞争对手的用户统计数据，或者分析该网站服务所在国家的相关信息。此外，你也可以运用直觉来进行判断。
例如，你可能正在构建一个面向北美客户的电子商务网站。该网站应完全适用于最流行的桌面和移动（iOS、Android）浏览器的最新几个版本，包括 Chrome（以及基于 Chrome 渲染引擎的 Opera）、Firefox、Edge 和 Safari。同时，它还应符合 WCAG 的 AA 级无障碍要求。
在清楚了目标测试平台后，你应该回过头来检查所需的特性和你需要使用的技术。例如，如果电子商务网站的所有者希望在产品页面中为每个产品构建基于 WebGL 的 3D 导览，他们需要明白这在所有旧版浏览器上都无法正常工作。
你应该列出这些潜在的问题。
备注： 你可在 MDN（就是本网站）找到浏览器对不同技术特性的支持情况的信息。你还可以查阅 caniuse.com，以了解更多有用的详细信息。
一旦你们就这些细节达成共识，你就可以开始开发网站了。
开发
现在到了开发阶段。你应该把开发分成不同模块，例如你可以分成首页、产品页、购物车、支付流程等。然后你可以再进行细分——实现公共的页头页脚，实现产品页细节视图，实现购物车组件等。
跨浏览器开发有多种通用策略，例如：
- 尽可能使每个特性在所有目标浏览器中正常工作。这也许涉及到写不同的代码，让不同浏览器中的特性以不同方式实现；或使用 Polyfill，通过 JavaScript 或其他技术来模拟缺失的支持；或使用一个库，借此你只需写一点代码，然后库代码根据浏览器支持的内容在后台执行不同的操作。
- 接受这个现实：一些东西在不同浏览器运行效果不同，在不支持完整特性的浏览器中提供不同的（可接受的）的解决方案。因为设备限制，有时这是不可避免的——不管你怎样设计网站，在影院宽屏上和在 4 寸屏上的视觉效果是不同的。
- 接受这个现实：你的网站在旧版浏览器上不能用，那就忽略旧版。只要你的客户/用户认为可以就没事。
一般来说你的开发会涉及到上述三个方法的结合。最重要的是你在提交每个小部分之前都要测试——别把测试放到最后！
测试/查错
在每个实现阶段之后，你需要测试这些新功能。在测试的开始，你应该确保你的代码没有能够阻止特性运行的常见错误：
- 在你的系统上的一些稳定浏览器中测试，例如 Firefox、Safari、Chrome 或 Edge。
- 做一些低可用性测试，比如尝试只用键盘使用网站，或通过屏幕阅读器访问，来检查可操纵性。
- 在移动端测试，例如 iOS 或 Android。
此时，你要修复一切发现的问题。
接下来，你应该将测试拓展到所有浏览器，并集中精力排除跨浏览器问题（关于确定你的目标浏览器，请查阅下一篇文章获取更多信息）。例如：
- 尽量在所有现代桌面浏览器上测试最新的修改——包括桌面版的 Firefox、Chrome、Opera、Edge 和 Safari（最好 Mac、Windows 和 Linux 版本都试一遍）。
- 在常用的手机和平板浏览器中测试（例如 iPhone/iPad 上的 iOS Safari、iPhone/iPad/Android 的 Chrome 和 Firefox）。
- 也要在你所列出的其他目标浏览器中测试。
最基础的选择是自己尽可能完成所有测试（如果你在团队中工作，可以拉上团队成员一起帮忙）。尽可能在真实的物理设备上进行测试。
如果你无法测试所有的浏览器、操作系统和物理真机，你也可以用模拟器（在 PC 端用软件模拟设备）和虚拟机（能使你在 PC 上模拟多种操作系统/软件的软件）。这是很普遍的做法，特别是在某些环境中——例如，Windows 不支持在同一台机器上同时安装多个版本，通常这种情况下只能选择虚拟机。
另一个选项是用户群体，即利用开发团队之外的一群人来测试你的网站。这可以是朋友或家人、其他员工、当地大学的一个班级，或者专业的用户测试组织。他们测试你的网站并提供结果，然后你给他们报酬。
最后，你可以通过审计或自动化工具来提高你的测试水平；随着项目规模的扩大，手动进行所有这些测试可能会花费很长时间，因此这是一个明智的选择。你可以建立自己的测试自动化系统（Selenium 是一个不错的选择），其可以例如在多个不同的浏览器中加载你的网站，并进行以下操作：
- 看按钮点击是否成功生效（例如显示地图），测试完成后就显示结果。
- 逐个截屏，借此你可以检查布局在多个浏览器中是否显示一致。
如果愿意为测试投入资金，也有一些商业工具可以为你自动化完成大部分的设置和测试工作（例如 Sauce Labs 和 Browser Stack）。这类工具通常能够实现持续集成工作流，借此代码更改在提交到你的代码仓库之前会自动进行测试。
在预发布的浏览器上测试
测试即将发布的浏览器版本也是个不错的主意。请看下面的链接：
如果你的网站使用了非常新的技术，并且你希望对最新的实现进行测试，或者如果你在最新版本的浏览器中遇到了错误，并且你想知道浏览器的开发人员是否在未来的版本中修复了该错误，那么这一点尤为重要。
修复/迭代
当你发现一个程序错误，你需要尝试修复它。
首要之举是尽可能锁定程序错误出现之处。从程序错误报告者那里尽可能多的获得信息——平台、设备、浏览器版本等等。在相似环境（比如不同桌面平台的同一个浏览器版本，或同一平台中同一浏览器的小差别版本）中测试来检查该程序错误波及多大的范围。
那可能不是你的错误——如果是浏览器的程序错误，那就希望开发商尽快修复它。也许它已经修复了——例如若某个程序错误存在于 Firefox 版本 49，但 Firefox Nightly（版本 52）中已经不存在了，那么他们已经修复了这个错误。如果还未修复，你可能需要提交一个程序错误报告（参见下面的报告程序错误）。
如果是你的错误，那么你需要修复它！查出导致该程序错误的原因（再次，查阅调试 HTML、调试 CSS 和哪里出错了？调试 JavaScript）。一旦你找到原因，你需要决定如何在产生问题的浏览器中解决它——你不能直接改掉问题代码，因为这会在其他浏览器中导致问题。普遍做法是以某种方式分叉代码，例如用 JavaScript 特性检测代码来检测问题特性不运行的情况，并运行一些在那些情况下生效的代码。
一旦完成修复，你应该重新测试来确保你的修复工作有效，并且没有导致网站在其他地方或其他浏览器中出问题。
报告程序错误
重申一遍，如果你发现浏览器的程序错误，你应该报告它们：