随着技术和数字化的快速进步，企业努力充分利用它，并确保他们的网络应用程序在所有浏览器和平台上顺利运行。在今天的情况下，企业依靠互联网存在来提高他们的投资回报率并扩大他们的在线范围。这就是为什么大多数 Web 应用程序都设计为与多个浏览器兼容的原因。这对于任何响应式 Web 应用程序都非常重要，因为必须确保该应用程序在任何给定时间与每个浏览器和浏览器版本兼容。尽管如此，跨浏览器测试还是被忽视了，因为开发人员在将跨浏览器测试纳入 QA 工作流程时面临许多挑战。

随着客户的注意力随着时间的推移越来越短，如果网站看起来有问题，他们会毫不犹豫地按下浏览器上的后退按钮。那么，解决方案是什么?让 Web 应用程序和网站在每个浏览器、设备和平台上都能完美运行。这听起来像是一个简单而直接的目标，对吧?如果企业不希望由于用户体验不佳而失去客户，则必须考虑跨浏览器兼容性和跨浏览器测试。尽管目标听起来很简单，但整个 QA 团队必须解决许多障碍，以提高网站和 Web 应用程序的响应能力。现在开始您的响应式测试。

关于这一点，我们将看看一些跨浏览器测试挑战和浏览器兼容性问题及其解决方案。但在此之前，让我们了解一下什么是跨浏览器测试以及为什么需要它。

什么是跨浏览器测试，为什么它很重要?

简单来说，跨浏览器测试是确保 Web 应用程序的功能在不同浏览器、浏览器版本和操作系统之间保持一致的过程，从而为其用户提供无忧的用户体验。跨浏览器测试涉及浏览器和操作系统的组合，以测试应用程序的响应能力和兼容性。尽管跨浏览器测试的概念很简单，但何时开始跨浏览器测试可能会很棘手。

使用左移方法，您可以在将应用程序转移到生产环境之前开始在本地暂存环境中测试应用程序。但是，通过跨浏览器测试，即使在生产中部署之后，您也可以跟踪和修复错误。

让我们看看为什么跨浏览器测试是必不可少的，以及它如何帮助获得更好的用户体验：

1、轻松比较多个浏览器的 UI 设计和功能。

2、它在各种浏览器和平台上提供一致的行为和更好的用户体验。

3、它可以帮助您通过更易于访问的网站获得满意的客户。

4、它可以使您的 Web 应用程序在不同的平台上兼容，如移动设备、台式机、平板电脑等。

5.一致且轻松的导航。

跨浏览器测试的主要挑战及其解决方案

我们可能会认为浏览器世界是关于 Chrome、Internet Explorer、Firefox、Safari 或 Opera 的。但实际上，来自世界各地的人们在他们的网络活动中使用了许多不同的浏览器。更不用说，站点或应用程序必须与不同的浏览器版本兼容。这使得跨浏览器测试有点令人生畏。以下是 QA 团队遇到的主要跨浏览器测试挑战。

挑战 #1：自动化跨浏览器测试具有挑战性

自动化浏览器测试是圣杯，可以帮助您大幅加快 Web 应用程序的发布周期。但是这个过程不仅仅是点击几下就完成了。这是一个复杂问题的简单解决方案。虽然使用Selenium等工具运行自动化功能测试听起来很简单，但它需要一些努力和时间来拥有正确的工具并为基于云的自动化浏览器测试做准备，其中包括编写测试脚本、定义功能等活动，更好的结果。

再举一个例子，布局测试自动化和 UI 测试看起来很简单，因为它涉及比较屏幕截图;但是，它相当复杂，因为屏幕截图取决于捕获它的分辨率和浏览器具有的独特 UI 元素。在多个浏览器上自动执行此类任务可能非常棘手。

需要注意的重要一点是，整个自动化过程的成功取决于这一步。所以，这不是一个简单的任务。这使得在制定自动化策略之前评估需求变得更加重要。首先，检查如何使用您已经有权访问的现有资源。如果您希望针对各种浏览器和浏览器版本自动进行跨浏览器测试，那么有一些出色的工具可以帮助您完成工作。

解决方案：具有核心功能的工具，用于自动化跨浏览器测试

应对这种跨浏览器测试挑战的唯一方法是选择具有所有功能的跨浏览器测试工具来自动化该过程。确保您使用的自动化工具的服务器包含可靠的浏览器版本清单。它还应该与任何最新的浏览器更新以及集成的最新浏览器功能保持一致。它必须能够跨多个浏览器测试 Web 应用程序、拍摄高清屏幕截图、录制视频等。

挑战#2：内部基础设施设置和维护是一种负担

设置内部结构并非在所有情况下都是可行的，尤其是在初创公司有固定预算的情况下。现场开发有其自身的限制。尽管内部与云长期以来一直是争论的焦点，但我遇到过很多人后悔在初始阶段没有采用基于云的方法。

例如，如果您想在多个平台上测试您的 Web 应用程序，您需要维护最新设备、操作系统、浏览器和浏览器版本的基础架构。这是一项繁琐的任务，因为它需要一个专门的团队来管理它，而且你必须承担高昂的成本。此外，它非常耗时，并且经常存在可扩展性问题。

云上的网站测试促进了协作虚拟平台，减少了设置和维护内部基础设施的成本。此外，升级并不像人们想象的那么昂贵。用户可以 24×7 全天候访问各种共享资源。因此，最好选择提供基于云的解决方案的平台，从而帮助测试人员和开发人员制作强大的应用程序和站点。

解决方案：具有可靠基础架构的基于云的服务

克服这种跨浏览器测试挑战的最佳方法是使用基于云的跨浏览器测试工具，而无需在内部维护设备。

挑战 #3：在太多浏览器上进行测试，包括旧版浏览器

最突出的跨浏览器测试挑战之一是浏览器及其各自的版本太多。并非每个企业都可以在内部托管和维护所有浏览器、版本和设备。更重要的挑战在于让您自己了解所有这些内容并确保您的 Web 应用程序在每一个上的性能。

例如，如果您的应用程序是在考虑对 Chrome、Safari、Firefox、Opera 和 Internet Explorer 等五种主要浏览器的支持而开发的。它看起来非常简单且易于管理，因为它们只有五个。但是，您的所有用户可能不会使用每个浏览器的最新版本。

相反，可能需要确保客户在旧操作系统和过时的浏览器(如 IE 和旧版 Edge)上的体验。因此，手动测试所有组合是不可能的。为了更清楚起见，我们假设您已经构建了一个针对每个平台上排名前 3 位的浏览器的应用程序。

• Windows：Chrome、Firefox、IE (3)

• macOS：Safari、Chrome、Firefox (3)

• Linux：Chrome、Firefox、Opera (3)

它看起来很容易管理，因为您有九种浏览器类型。但是，并非每个用户都会使用每种浏览器类型的相同版本。即使我们考虑每个浏览器的两个版本，数量也会翻倍，即18。因此，有必要考虑在多个浏览器和浏览器版本上进行测试，最终将数量增加到很多倍。

解决方案：具有最新和旧版浏览器的综合平台

解决此问题的最佳方法是首先了解是否有必要在所有这些浏览器和浏览器版本上测试您的 Web 应用程序。这可以通过查看访问者的统计数据和使用的浏览器来快速完成。根据结果，您可以优先考虑您的测试，即首先在拥有最大用户群的浏览器上进行测试。但是，假设您的 Web 应用程序有使用所有浏览器和浏览器版本的用户。

挑战#4：频繁的浏览器更新

浏览器大约每六到八周就会进化一次。新版本伴随着大多数用户的更新。在某些打开自动更新的情况下，人们甚至不会注意到他们正在使用新的浏览器版本。这促使测试团队反复进行测试过程，以确保在最新的浏览器版本下一切正常。

不同的企业采用不同的方法。除非用户报告错误，否则一部分会忽略新版本。这听起来很方便，但有时，损坏会在有人修复之前吓跑许多客户。但是，如果损害控制延迟，企业可能会失去有价值的客户，投资回报率可能会受到巨大打击。

另一部分遵循预防方法。他们使用最新的浏览器版本更新他们的网站，并且不给任何抱怨的机会。他们如何做到这一点?

查看Chrome 过去是如何进行各种更新的。

解决方案：通过自动化测试跟上新的浏览器版本

如上所述，自动化浏览器测试是一项具有挑战性的任务。但最终，付出努力是值得的。您仍然可以通过忽略 Web 应用程序在更新的浏览器上的测试来处理它，直到客户报告任何错误，或者使用第三方跨浏览器测试工具来跟上最新的浏览器更新。

挑战 #5：在太多操作系统组合上进行测试

我们已经看到在多个浏览器和浏览器版本上管理测试是多么困难。将众多浏览器和版本与操作系统相结合，几乎不可能测试网站或 Web 应用程序。更不用说，甚至检查网站与各种移动设备的兼容性也是强制性的。

除了我们已经看到测试 18 种浏览器和浏览器版本组合的复杂性的示例之外，让我们将范围扩展到三个操作系统。

• Windows 8：3 个浏览器

• Windows 8.1：3 个浏览器

• Windows 10：3 个浏览器

• OS X El Capitan：3 个浏览器

• OS X macOS Sierra：3 个浏览器

• macOS High Sierra：3 个浏览器

• Ubuntu 17.04：3 个浏览器

• Ubuntu 17.10：3 个浏览器

• Ubuntu 18.04：3 个浏览器

考虑到每种操作系统类型的 32X 和 64X 变体，这是一项相当艰巨的任务。尽管似乎不可能覆盖现有的每一个组合，但您仍然可以获得更好的测试覆盖率。

解决方案：具有广泛操作系统的基于云的服务。

值得注意的是，您可以使用基于云的服务在不同操作系统的各种移动和桌面浏览器上进行测试。最大的好处是企业不必为使用各种组合进行测试而为设置和维护而头疼。

挑战#6：测试所有屏幕分辨率下的视觉错误

手动测试您的网站是否存在视觉错误可能会占用大量时间。这不是新信息，我们的思想直接转向测试自动化。但重要的是要注意，使用测试自动化检测站点和 Web 应用程序的损坏布局可能有点棘手。在这种情况下，有很多事情需要处理，尤其是当我们开始计算不同的测试环境时。

我们已经讨论了各种浏览器、浏览器版本和操作系统的组合。现在添加屏幕分辨率会使事情变得更加复杂，尤其是手动方法。试想一下，如果我们添加带有自己的浏览器集的移动设备，列表将永远不会结束。

解决方案：确保在所有屏幕分辨率下进行无缝 UI 测试的工具

这种情况需要基于 Selenium 的工具来促进 UI 测试的顺利自动化。例如，您的测试应该执行各种操作，同时截取屏幕截图。这有助于通过查看捕获的屏幕截图来确定用户界面的一致性。

挑战 #7：同时在多个浏览器上执行测试

这又是最常见的跨浏览器测试挑战之一。并行测试是在跨浏览器测试工具上执行的最常见任务之一，有助于在多个浏览器、浏览器版本和操作系统上并行测试 Web 应用程序。因此，您可以大大减少执行时间并增加测试覆盖率。

但是，如果您尝试手动执行它们，同时在多个浏览器上执行测试可能具有挑战性。它会消耗大量时间和资源，因为您必须针对不同的浏览器版本操作系统组合运行不同的测试。

解决方案：使用自动化工具进行更快的并行测试

现在，您应该已经知道跨浏览器测试最突出的挑战了。在下一节中，我们将介绍测试团队面临的一些跨浏览器兼容性问题及其解决方案。

额外提示：常见浏览器兼容性问题

跨浏览器兼容性是保留客户和扩大客户群的最重要方面之一。尽管许多浏览器增加了用户上网的便利性，但也引发了浏览器兼容性问题。例如，某些网站在某些浏览器上的加载速度相对较慢。关于这一点，让我们来看看一些常见的浏览器兼容性问题及其解决方案。

问题 #1：不正确的 DOCTYPE

一行代码可以对网站的呈现方式产生巨大影响。Internet Explorer 以不同的方式解释 Web 标准。因此，这可能会导致各种错误，例如阻碍页面的正确加载。HTML 代码的第一行有 DOCTYPE 标记，它有助于创建一个平滑呈现的站点。

即使在您编写了整个代码之后，错过它也会导致渲染中出现很多错误。因此，检查 DOCTYPE 至关重要，尤其是在 Internet Explorer 8.0 或之前版本过时的浏览器中。它有助于防止一次又一次地发生浏览器兼容性问题。

解决方案：添加一个简单的代码

解决不正确的 DOCTYPE 问题相当简单。所有开发人员需要做的就是在开头包含一行的简单代码。

因此，该网站将在所有浏览器中正确呈现。

问题 #2：缺少有效的 HTML/CSS

在解释 CSS 和 HTML 时，并不是每个浏览器都像 Firefox 和 Chrome 一样宽容。例如，如果您错过了

代码，Firefox 和 Chrome 会自然而然地添加它。但并非所有浏览器都如此。如果缺少

代码，它们将无法正确呈现网站。此外，在这种情况下，甚至很难知道哪里出了问题。

解决方案：使用 W3C 验证器

可以通过手动查找此缺少的选项卡来解决此问题。但如果 Web 项目很大，这可能是一个压倒性的过程。因此，使用 W3C Validators 等工具自动验证您的代码可以解决这个问题。

问题 #3：没有 CSS 重置

每个浏览器都有一组 CSS 样式，如果当前站点没有覆盖它们，它们就会应用。默认情况下，每个站点都有一个设计布局，并且对于每个站点要实现自己的结构，覆盖默认值很重要。即使浏览器没有 CSS 样式，它们也会以不同的方式呈现网页。

解决方案：使用 CSS 重置样式表

重置呈现的网站可以解决此问题。开发人员使用 CSS 重置样式表来确保不同的浏览器使用相同的规则集呈现网页。一些常见的包括 Normalize.css、HTML5Reset 和 Eric Meyers CSS Reset。

问题 #4：供应商特定的 CSS 样式

今天的 Web 浏览器通常将其 CSS 功能隐藏在供应商特定的 CSS 样式的闭门中。因此，在建立特定于供应商的样式时，供应商将添加一个没有供应商前缀的带有修改的版本，或者删除特定于供应商的版本。

解决方案：添加无前缀版本

因此，为确保所有浏览器都能接收到它，您必须将不带前缀的版本与带前缀的版本一起添加。这确保了代码在不同浏览器中的无障碍工作。各种浏览器的一些常见前缀包括：

• -moz（火狐浏览器）

• -ms（微软 IE）

• -webkit（Safari 和 Chrome）

• -o (Opera 浏览器)

问题 #5：过时和旧的浏览器检测脚本

当浏览器运行过时的 JavaScript 版本时，浏览器兼容性问题通常是不可避免的。现代浏览器并不总是支持较旧的脚本，这使得它们难以加载具有相对较新元素的页面。但是开发人员可以通过验证浏览器检测是否是最新的来消除这个问题。

解决方案：使用现代化器

最好能完全移除浏览器检测。使用Modernizer代替浏览器检测会将焦点直接转移到功能上。因此，这提供了更无缝和整体更好的体验。

问题 #6：JavaScript 无法检测浏览器

在处理无法识别的错误或功能时，JavaScript 不允许作为 HTML 或 CSS。许多旧浏览器不支持使用 ECMAScript 6 (ES6)/ECMAScript 实现的新功能。例如，“Promise Object”、“Typed Arrays”和“Arrow Functions”等功能无法在 IE、Firefox、Chrome 等旧版浏览器上运行。

解决方案：将 Modernizer 与回退机制一起使用

您可以使用一组“超快速测试”Modernizer 枚举所有浏览器功能。此外，您可以使用 caniuse 等在线资源检查特定浏览器版本是否支持该功能。如果用户使用的是旧版本的浏览器，您还可以使用回退机制。

了解有关修复 JavaScript 跨浏览器兼容性问题的更多信息。

问题 #7：布局兼容性问题

当使用 CSS 重置删除默认浏览器设计时，通常会发生布局兼容性问题。这可能是由于 Web 应用程序无响应或缺乏对特定浏览器和浏览器版本上的设计的支持。

解决方案：使用 Flexbox 和 CSS 网格等工具

许多开发人员使用浮动功能来克服这个问题。浮动是文本框中的浮动图像，受多个浏览器支持。但是，这有一些限制。您可以使用与现代浏览器兼容的工具，例如Flexbox或CSS 网格。

总结一下

用户体验是确定企业整体成功的重要标准。但是 Web 应用程序的界面并不是决定用户体验的唯一因素。随着操作系统、设备、浏览器及其版本数量的增加，不时检查站点或应用程序的跨浏览器兼容性至关重要。一些开发人员认为这是设计 Web 应用程序的最后一步。

下载一流的免费浏览器应用程序以供开发人员测试和调试!!!

毫无疑问，这是至关重要但又很棘手的一步。但即使这项任务是一项具有挑战性的任务，跨浏览器测试中的每个问题都有解决方案。此外，只要您有专家团队支持流程，您就可以放心效率和准确性。

卓码软件测评是一家[ 具备CMA、CNAS双重资质 ]的专业做软件测试的第三方软件测试服务机构, 可根据您的需求提供各类软件测试服务，并出具合格有效的软件测试报告。点击→→可了解测试报价

部分文字、图片来自网络，如涉及侵权，请及时与我们联系，我们会在第一时间删除或处理侵权内容。负责人：曾菲       电话：4006070568