Testing 前端测试：测试什么、如何测试以及使用什么工具？

我为我的Ruby代码编写测试已经有一段时间了，但作为一名前端开发人员，我显然有兴趣将其引入我为前端代码编写的代码中。有很多不同的选择，我一直在玩：

• 黄瓜还是仅仅是Rspec

人们使用什么进行测试？除此之外，人们还测试什么？只是JavaScript？链接？形式？硬编码内容

---

如果您有任何想法，我们将不胜感激。

这方面有很多选择和工具。但他们的选择取决于你是有一个web用户界面还是桌面应用程序

假设从您提到的工具来看，它是WebUI。我建议Selenium（又名WebDriver）：

它支持多种语言（Ruby在列表中）。它可以在多种浏览器上运行，而且使用起来非常简单，有很多教程和提示。

---

哦，当然它是免费的：）

几个月前我也有同样的问题，在与许多开发人员交谈并做了大量研究之后，我发现了这一点。您应该对JavaScript进行单元测试，编写一组小的UI集成测试，并避免使用记录和回放测试工具。让我更详细地解释一下

首先，考虑一下。这是Mike Cohn创建的一个有趣的类比，它将帮助您决定应该进行哪种测试。在金字塔的底部是单元测试，它是可靠的，并提供快速反馈。这些应该是你的测试策略的基础，因此占据金字塔的最大部分。在顶部，您有UI测试。这些是直接与UI交互的测试，例如Selenium。尽管这些测试可能会帮助您发现bug，但它们的成本更高，而且提供的反馈速度也很慢。此外，根据您使用的工具，它们变得非常脆弱，最终您将花费比编写实际生产代码更多的时间来维护这些测试。中间的服务层包括不需要UI的集成测试。例如，在Rails中，您可以直接测试REST接口，而不是和DOM元素交互

现在，回到你的问题上来。我发现，只要为JS编写足够的单元测试，我就可以大大减少我的项目中的bug数量，这是一个用SpringRoo（Java）编写的web应用程序，包含大量JavaScript。在我的应用程序中，有很多用JS编写的逻辑，这就是我在这里测试的东西。我不关心页面的实际外观，也不关心动画是否按应有的方式播放。我测试我在JS中编写的模块是否会执行预期的逻辑，元素类是否正确分配，错误条件是否得到良好处理。在这些测试中，我一直在使用茉莉花。这是一个很棒的工具。这是非常容易学习，并有很好的模仿能力，这是所谓的间谍。如果您正在使用jQuery，则会添加更强大的功能。特别是，它允许您指定fixture，fixture是HTML代码的片段，因此您不必手动模拟DOM。我已将此工具与maven集成，这些测试是我CI策略的一部分

用户界面测试时必须小心，特别是当您依赖于Selenium等录制/回放工具时。由于UI经常发生变化，这些测试会不断中断，您将花费大量时间来查明测试是否真的失败，或者它们是否过时。而且，它们没有单元测试那样增加价值。因为它们需要一个集成的环境来运行，所以您通常只希望在完成开发之后运行它们，因为修复成本较高

但是，对于冒烟/回归测试，UI测试非常有用。如果您需要自动化这些，那么您应该注意一些危险编写测试，不要记录它们。记录的测试通常依赖于自动生成的XPath，您对代码所做的每一点更改都会中断XPath。我相信Cucumber是编写这些测试的一个很好的框架，您可以将它与WebDriver一起使用来自动化浏览器交互考虑测试的代码。在UI测试中，您必须使元素更容易找到，这样就不必依赖复杂的XPath。在通常不需要的地方添加class和id元素将非常频繁不要为每个小问题编写测试。这些测试编写成本高，运行时间长。您应该将重点放在探索大部分功能的案例上。如果您在这个级别编写了太多的测试，那么您可能会测试之前在单元测试中测试过的相同功能（假设您已经编写了它们）

---

在我当前的项目中，我使用Spock和Geb编写UI测试。我觉得这些工具很棒。它们是用Groovy编写的，这更适合我的Java项目

我想，由于这篇文章得到了很多人的喜爱，我会发布我的问题答案，因为我现在写了很多测试，而您如何测试前端现在已经有了很多进展

因此，在FE测试方面，我花了很多时间使用，尽管karma可以很好地与其他测试套件（如mocha&qunit）配合使用。虽然这些都很好，但karma允许您直接与浏览器交互以运行测试。缺点是，当您的测试套件越来越大时，它会变得非常缓慢

所以最近我已经转到了速度快得多的应用程序，如果你编写react应用程序，使用快照测试可以提供很好的覆盖率。《谈论覆盖笑话》内置了伊斯坦布尔覆盖，并进行了设置，而mocking真的很容易使用。缺点是它不在浏览器中测试，而且它使用的是一种叫做的东西，它速度很快，但确实有一些麻烦。就个人而言，我并不觉得这有什么大不了的，尤其是当我通过webpack/babel编译代码时，这意味着跨浏览器的bug非常少，所以gene