浏览器性能测试中文官方版（节省手动跨浏览器测试时间的方法第1部分）

确保您的应用程序跨浏览器兼容是他们成功的关键。我们看看开发人员可以做的10件事情，以确保跨浏览器的兼容性。

Web开发人员以及应用程序开发人员面临的主要障碍之一是跨不同浏览器测试他们的网站/应用程序。这也称为“跨浏览器测试”。有很多浏览器和浏览器版本（谷歌浏览器，Mozilla Firefox，Internet Explorer，Microsoft Edge，Opera，Yandex等），您可以通过多种方式访问您的网站/应用程序（通过桌面，智能手机，平板电脑等）。 ）以及可能用于访问您网站的众多操作系统（Windows，MacOS，Linux，Android，iOS等）。确保您的网站的UI / UX及其功能在“浏览器 浏览器版本 操作系统 设备配置文件”的组合中没有任何缺陷，将需要大量的工时来进行开发，测试和维护。虽然测试可能包括自动跨浏览器测试，

手动跨浏览器测试的主要难点在于，测试人员可能需要花费大量时间来测试不同的网页，跨越不同断点的跨浏览器测试Web应用程序，以增加“复杂”组合列表。因此，建议在登台环境中执行一轮手动跨浏览器测试 在将更改推送到生产环境之前。由于开发分支将涉及来自多个开发人员的更改，因此您可以期望在这些更改进入“prod /生产服务器”之前对这些更改进行另一轮跨浏览器测试。虽然您可能正在遵循“软件开发模型”，但有许多活动变得无计划/临时性，并且手动跨浏览器测试通常被认为是其中之一。 解决错误的 周转时间（TAT）可能因团队之间的协同作用而有所不同。如果球队沉迷于责备比赛， TAT可能会增加 这种行为可能导致整体延迟。您无法改变人类的倾向，但您绝对可以确保流程得以保持，以提高执行测试的速度，同时不会影响周转时间。

让我们来看看一些可以使用ro改进手动跨浏览器测试的机制/流程。

1.代码Linters

无论使用何种开发语言，都必须使用静态分析工具来填充源代码。您可能无法通过浏览代码来识别编码错误; 因此，您必须针对静态代码分析器（也称为Linters）执行源代码。Linters有助于节省手动工作以验证HTML，CSS 和 JavaScript的 跨浏览器兼容性，此外，您还可以灵活地使用本地计算机上安装的在线工具或连接器。在使用在线linting工具之前，建议您与经理讨论这个问题，因为您要在服务器上上传代码（在线linter将静态分析源代码）。

一些流行的用于CSS，JavaScript和HTML的Linters是：

• CSS - CSS Lint， Stylelint
• JavaScript的- JSHint， ESHint
• HTML - W3C标记验证服务， HTML Lint， HTML整洁

除了在线选项，您还可以将这些链接的插件/加载项安装到代码编辑器中。使用附加选项可确保在开发环境中完成linting。

2.重大开发里程碑之后的跨浏览器测试

假设情况 - 您有一个包含50多个CSS，JavaScript和HTML文件的模块，并且遇到了模块的跨浏览器兼容性问题。在这样的环境中识别问题与在更改100 LOC（代码行）的同一模块中查找问题不同吗？任何开发人员都会担保第二个选项，因为您知道更改（100 LOC）导致功能中断。添加代码更改后，您应该测试“目标客户”可能正在使用的浏览器上的更改。根据您的内部研究，您可以测试最新的浏览器版本或在目标客户群使用的版本上进行测试。

一旦修复了很多错误，就应该进行一轮完整的跨浏览器测试。但是，这种方法很大程度上取决于客户可交付成果的时间表和产品的性质; 在产品开发的早期阶段进行跨浏览器测试可以在测试和开发的后期阶段获得丰厚的回报。

3. CSS前缀

CSS供应商前缀或CSS前缀是浏览器供应商在这些功能成为所有浏览器主流之前添加新CSS功能的机制。如果您希望最新浏览器和旧版本的浏览器支持您的源代码，那么您的CSS代码应包含前缀和未加前缀的代码。使用CSS Flexbox等工具，您可以生成新的布局功能。您必须为CSS Flexbox提供所需的前缀和旧语法， 以便您的代码在必需的前缀的 浏览器版本上执行。

如果要手动添加所需的供应商前缀，则很可能会在流程中引入手动错误。避免此类错误的最佳方法是使用可自动添加CSS前缀的工具/库（必要时）。一些流行的 预处理器库 或工具是：

• Sass - http://bourbon.io/
• LESS - http://lesselements.com/
• PostCSS - http://postcss.org/
• Autoprefixer - https://github.com/postcss/autoprefixer

4.并行测试

无论测试策略是否涉及自动化测试，与串行开发/串行测试相比，并行模块开发/并行测试总是更快。

您可以通过开发测试脚本来实现并行测试，这些脚本允许跨不同浏览器，操作系统和设备对源代码进行跨浏览器测试。您可以使用Selenium WebDriver开发可以模仿人类方法的有效测试脚本 。我们会在随后的几点中介绍它。

5. CSS分析

我们之前讨论过CSS linting以及为什么要使用linting工具。尽管linting可以帮助您识别CSS代码中的错误，但您还应该使用进行CSS分析的工具。作为开发人员，您可以将代码添加到具有大量遗留代码的CSS模块中。代码大小越大，识别遗留代码的必要性就越困难。处理此问题的理想方法是使用!importantCSS属性，该 属性可确保应用规则，而不管文档中规则的位置如何。

有许多工具可用于分析CSS代码，但CSS Parker是使用最广泛的工具，因为它提供了很多关于CSS代码的统计信息。有关Parker工具的更多详细信息，请 访问此处。

6.在云上执行跨浏览器测试

设置可容纳设备，浏览器和操作系统组合的测试基础架构可能是一项代价高昂的事情，并且可能也不具备可扩展性。例如，如果您必须在不同风格的Android上测试网站功能--Oreo，Pie，Nougat等 - 您需要具有这些Android版本的设备，您还需要投资购买来自不同智能手机供应商的设备。因此，这种方法非常不可行且不可扩展。

理想的方法是在LambdaTest等云测试服务上测试功能 ，这样您就可以专注于测试而不必担心基础架构。您还可以通过下载相应的Selenium WebDriver，使用Selenium编写自动化测试脚本。

7.每个阶段的测试，测试和测试

定期测试可确保在进入SDLC时发现错误。作为开发人员，您应该针对不同的组合测试您的功能。即使您不熟悉测试模块，也应该改变思维方式并将测试作为日常工作的一部分。

如果您正在处理复杂的功能，则可以将测试计划划分为不同的阶段，以便不依赖。您还可以使用CodePen等工具 - 一个面向前端开发人员的社交开发平台。它可用于为 您的测试用例进行 原型设计。

8.创建详细的测试计划

您将跨设备，操作系统，浏览器类型，屏幕大小等各种组合进行跨浏览器测试源代码。因此，您在一个版本的浏览器（例如Chrome 59）上遇到的问题的性质可能与你在同一个Brrowser的不同版本上面对的那些（例如Chrome 60）。当您在不同的操作系统和设备上使用相同的浏览器类型时，事情会变得复杂。因此，在这种情况下，临时测试方法可能还不够。

您应该提出详细的测试计划，以便在不同的组合上测试代码的重要功能。您可以根据每个设备组制定测试计划，以便您可以轻松地隔离每个设备上遇到的问题。

9.单元测试

“单元测试”一词不需要介绍。它用于测试开发人员在“单元级别”所做的更改。无论使用何种编程语言，单元测试都用于验证单元级别的代码更改。为了实现“全面测试”的文化，重点应放在测试驱动开发（TDD）上。通过结合TDD方法，开发人员和设计人员可以提供精美的代码。它还涉及心态的变化。JavaScript 有一套详尽 的库 可以帮助进行单元测试，下面列出了流行的库：

• mochajs - https://mochajs.org/
• Jasmine - http://jasmine.github.io/

据说，开发和测试应该齐头并进，以便在产品开发的早期阶段挖掘出错误。

10.测试脚本

单元测试在“单元级别” 执行，而 回归测试在执行时同时牢记产品的端到端功能。理想情况下，进行回归测试以确保新代码更改对现有功能没有副作用。

在某些情况下，功能中涉及可视元素，例如使用JavaScript单击按钮。也可能存在界面没有更新的情况，例如，一旦点击按钮就更新数据库中的某些字段。因此，建议及时开发和维护测试脚本，并根据优先级对测试脚本进行分组。