前端测试关键工具和框架

由于前端测试往往会涉及到方方面面，而且时常会让测试人员面临各种新的挑战，因此他们需要借助专门的测试工具和框架来提高效率。在本文中，我们将和你讨论几种能够加快测试进程的前端测试工具与框架。

1、Wraith：这个用来比较两个不同的URL非常简单。如果你熟悉Ruby，安装也没有那么复杂。通过与casperjs配对，你可以拍摄组件的屏幕截图，如果网站依赖于第三方组件，这一点尤其好。将所有配置选项放在config.yaml中，如diff模式、模糊量、屏幕宽度、阈值和无头浏览器。

2、PhantomCSS将屏幕截图保存为基线图像，这在前端开发人员中很流行，因为你可以将基线图像与未来的测试图像进行比较。如果两个截图都匹配，测试将通过。

3、Gemini: 回归测试的实用工具，帮助我们发现网站上多个网页的视觉外观之间的差异。它提供测试套件来组织代码。在跨浏览器兼容性测试计划中，它与Google Chrome、Mozilla Firefox、IE8+和Opera 12+配合使用。Gemini无需直接接触即可与Selenium结合。

4、Selenium：对于开发人员和测试人员来说，Selenium是家喻户晓的名字，是检查用户行为的开源自动化工具。Selenium由Selenium RC、Selenium IDE、Selenium Grid和Selenium Webdriver组成。Selenium提供了支持各种主要编程语言的绑定，如Java、C#、Perl、Python、PHP和Ruby，同时运行测试可以节省大量时间。

因此，你可以在不同的浏览器和Windows、Linux和Mac等平台上进行多种测试。作为行业标准，Selenium允许你使用PHP、Groovy、Python、Java、C#等语言编写测试。自动化工具提供了构建自动化测试的回放和记录功能。

5、WebdriverCSS：WebDriver是另一个著名的UI测试回归工具，它有助于图像处理&与Selenium挂钩。你可以使用WebdriverIO编写E2E测试，可以在截图前后向浏览器发送多个命令。WebdriverCSS集成了 Jasmine, Mocha, and Cucumber.js。

6、Spectre：Spectre是一个web应用程序，它不运行测试，而是关注屏幕截图。在正常使用中，你可以将其与WebdriverIO或PhantomJS配对。在这里，Spectre将管理图像处理，而稍后将捕获图像，你可以在本机上运行Spectre或使用docker。

7、Percy：Percy易于设置，可以与CI环境集成。将Percy与你的测试和CI环境集成，使其能够接收和渲染快照。Percy提供了免费和付费的计划，以捕获bug并深入了解UI更改。

8、Linters

Linting工具用于检查代码质量，对于任何前端测试计划都起着至关重要的作用。linting工具确保代码的持久性、健壮性、可移植性和可维护性。代码检查过程借助于允许在不实际执行的情况下检查代码的技术来标记潜在的bug。在不同的场景中，你可以在编写代码、保存文件、进行一些更改或在代码投入生产之前使用linting。

Linter的存在是为了处理有问题的代码模式，如果出于某种原因需要在项目中添加几个或多个自定义约定，则可以使用自定义规则进行扩展。

手工测试很难做到，也很难做到如此专注，尤其是当代码库每天都在扩展时。eLinting工具可以在几秒钟内发现代码错误。

CSSLint：领先CSS linting市场，提供了许多可配置选项。你可以选择要测试的错误和警告类型，并将根据你签入的所有规则验证CSS。

SublimeLinter CSSLint：在安装SublimeLinter CSSLint插件之前先安装CSSLint。使用默认设置或只需配置一次设置。之后，访问崇高文本编辑器中的通知和警告。

Javascript Linting解析并检查是否有语法违反规则。如果发生违规行为，将显示一条警告，解释意外行为。对于小项目使用在线版本：JSLint、ESLint或JSHint。对于较大的项目，建议使用任务运行程序，如Gulp或Grunt。linter确保开发人员遵循最佳实践，因此在项目开发过程中很少出现错误。

工具使开发人员和测试人员都可以轻松地工作，无论你选择哪种工具，都要坚持并努力工作。