您为什么要关心最好的跨浏览器测试工具?跨浏览器测试是在将更改推送到生产环境之前评估 Web 应用程序在各种浏览器上的功能的过程。

对于希望读者属于使用同一浏览器的群组的站点,可以手动测试更改。然而,随着移动设备的日益普及和浏览器的过多,在批准更改之前在各种设备-浏览器组合上测试您的应用程序可能是个好主意。

在这篇文章中,我们介绍了最好的跨浏览器测试工具。我们考虑了多个方面,例如成本考虑和自动化整个过程的能力。

?目录:

  1. Chrome 开发者工具#
  2. DesignModo-ResponsiveTest#
  3. Selenium#
  4. BrowserStack#
  5. < li>LambdaTest#

    < li>SmartBear#

?开始测试之前...

如果您的站点有访问者历史记录,您可以使用它数据来决定在哪些浏览器上进行测试。另一种方法是根据浏览器的使用份额来选择浏览器。一旦您选择了用于测试您的应用程序的浏览器,您需要设计您的测试以测试您的站点是否在所有浏览器中都能正常工作。

本文介绍了跨浏览器测试工具,这些工具将帮助您在选择浏览器和设计测试后执行测试。跨浏览器测试的结果是跨设备和浏览器的一致性能。

?2019 年最佳跨浏览器测试工具

Chrome 开发者工具

可以通过 Chrome 开发者工具执行基本形式的跨浏览器测试。这是一组内置于 Google Chrome 用户界面中的与 Web 开发人员相关的工具。使用这些工具,您可以在显示的网页中操作 HTML DOM、CSS 属性和调试 JavaScript 代码以查看更改——此外还可以调整窗口大小以检查页面呈现如何随着不同的分辨率而变化。

Chrome开发者工具可能有模拟一系列移动屏幕尺寸和方向,以测试网站布局如何适应不断变化的输出参数。这有助于您快速查找和修复错误,并实时查看更改。

Chrome 开发者工具只允许在一个浏览器上进行测试,就像 Brave 等基于 Chromium 的浏览器一样。但是,它们可以作为一组很好的工具来测试应用程序的初始阶段。通过 Chrome DevTools 进行的任何测试都只能手动进行,并且不支持 CI/CD 工具,因为没有自动化的余地。

DesignModo 的响应测试

DesignModo 的响应测试是一个基于网络的跨浏览器测试工具。它是一个在浏览器中运行的模拟器。转到网站并等待它加载到所需的视口中。加载后,您可以更改设备以模拟网站并检查网站是否正确呈现。

虽然DesignModo工具会显示不同的屏幕尺寸,但它仍会在您的计算机上本地呈现。如果该工具通过了测试,在真实设备上访问它可能仍然存在问题。就像 Chrome 开发人员工具一样,通过 DesignModo 工具进行的任何测试都将是手动的,不支持自动化。

Selenium

这是一个免费的开源工具。 Selenium 是一种使用本地浏览器在本地运行 Web 应用程序的软件。您可以通过一系列编程语言运行 Selenium 测试。此处提供了适用于流行浏览器的驱动程序的下载链接:Chrome、Edge、Firefox 和 Safari。

运行Selenium测试时,驱动程序打开一个测试窗口,其中执行一组预定义的步骤。您可以在 Selenium 中导航 DOM 元素、提交表单和等待事件。但是,在本地运行时,测试会在测试期间依次打开测试浏览器窗口。

Jenkins 和 Travis CI 等流行的 CI/CD 工具支持 Selenium 测试。您还可以在单​​元测试模块中包含 Selenium 测试。 Selenium 也是云中的流行选择,构成了 BrowserStack 和 LambdaTest 等跨浏览器测试工具的云解决方案的基础。

BrowserStack

BrowserStack 是一款可让您即时访问 2,000 多种真实桌面和移动设备的工具。借助 BrowserStack,您可以通过云的力量在真实设备上托管的浏览器上测试您的应用程序。它的服务可以分为两个跨浏览器测试工具场景:

  • 实时,您可以在您选择的浏览器-设备组合上实时测试您的网站
  • 自动化, 使您能够使用 Selenium 自动化跨浏览器测试

实时测试选项可帮助您实时调试您的网站。因此,它使您能够与在真实设备上运行的浏览器进行交互。 Live 非常适合在项目的早期阶段或引入新功能时进行手动测试。

当您定义了要作为套件的一部分包含的标准测试时,自动化很有用。自动化通过 Selenium 的远程版本为云工作。它支持主要的 CI/CD 工具,如 Jenkins 和 Travis CI。

当您注册 BrowserStack 时,您将获得 100 分钟的免费测试,之后您必须选择付费计划。月度计划起价为 29 美元/月。最近,BrowserStack 推出了基于您使用的分钟数的付费计划。

LambdaTest

LambdaTest 是另一个用于跨浏览器测试的云端工具,它允许您通过云端的 Selenium 实时或自动执行测试。对于实际测试,您可以选择设备+浏览器组合。然后该工具将启动一个会话,您可以在其中与浏览器进行实时交互。您有 2,000 多个真实设备要测试。

LambdaTest是各种CI /CD 工具提供支持,使您能够将跨浏览器测试与现有测试框架集成。 Selenium 网格还允许您运行并发测试。

LambdaTest 为一次并行测试提供终生免费选项,因此当您刚开始使用时,它是一个不错的选择。月度计划起价为 15 美元/月,物超所值。 LambdaTest 有一个 WordPress 插件,您可以在其中自动生成 WordPress 中的屏幕截图,使其成为 WordPress 的一个很好的开发工具。

SmartBear

SmartBear 提供跨浏览器测试工具,允许您在实际设备上运行的浏览器上测试您的网站,以及通过 Selenium 远程自动测试。这个跨浏览器测试工具有 1,500 多种设备可供您运行测试。

这个工具的作用可以媲美 LambdaTest 和 BrowserStack 的能力。但是,这两种备选方案都具有更高的设备数量,这在选择选项时可能很重要。

SmartBear 没有免费套餐,只有特别邀请才能免费试用。付费计划起价为每月 29 美元。

对最佳跨浏览器测试工具的评价

在本文中,我们介绍了六种最佳跨浏览器测试工具。这些工具是根据不同水平的技能、功能和预算来选择的。总结这些发现:

  • 如果您正在开发一个新项目,请尝试使用 DesignModo 的 Chrome 开发者工具或响应式测试。
  • 如果您想自动化测试,Selenium 是一款免费的本机跨浏览器测试工具。
  • 如果您的预算紧张但想在真实设备上体验跨浏览器测试工具,请尝试 LambdaTest 作为我们的赢家!
  • 如果您有足够的资金进行跨浏览器测试,请尝试 BrowserStack 或 SmartBear。

至此,是时候结束我们对 2019 年市场上最好的跨浏览器测试工具的比较了。我们希望这可以帮助您自动化跨浏览器测试工作。

你最喜欢哪个工具?请在下面的评论中告诉我们。

...

不要忘记加入我们的速成班,以加速您的 WordPress 网站。通过一些简单的修复,您可以将加载时间减少 50-80%:

由 Karol K 进行布局、演示和编辑。