茉莉花-前端测试:什么以及如何测试以及使用什么工具?

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

  • 卡斯珀
  • 水豚和Rspec
  • 茉莉花
  • 黄瓜或只是Rspec

人们正在使用什么进行测试? 除此之外,人们还要测试什么? 只是JavaScript? 链接? 形式? 硬编码内容?

任何想法将不胜感激。

3个解决方案
83 votes

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

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

现在,回到您的问题。我发现我可以大大减少项目中的错误数量,而这个项目就是用Spring Roo(Java)编写的带有大量JavaScript的Web应用程序,只需编写足够的JS单元测试即可。在我的应用程序中,有很多用JS编写的逻辑,这就是我在这里测试的那种东西。我并不担心页面的实际外观或动画的播放效果。我测试用JS编写的模块是否可以执行预期的逻辑,是否正确分配了元素类,以及是否正确处理了错误条件。对于这些测试,我一直在使用Jasmine。这是一个很棒的工具。它很容易学习,并且具有很好的模拟功能,称为间谍。如果您使用的是jQuery,那么Jasmine-jQuery会添加更多强大的功能。特别是,它允许您指定固定装置,它们是HTML代码的片段,因此您不必手动模拟DOM。我已经将此工具与maven集成在一起,这些测试是我的CI策略的一部分。

您必须谨慎对待UI测试,尤其是如果您依赖于Selenium等记录/回放工具。 由于UI经常更改,因此这些测试一直处于中断状态,您将花费大量时间来确定测试是否确实失败或测试是否过时。 而且,它们没有增加单元测试那么多的价值。 由于它们需要一个集成的环境来运行,因此您最喜欢仅在完成开发后才能解决这些问题,因为修复成本更高。

但是,对于冒烟/回归测试,UI测试非常有用。 如果您需要自动执行这些操作,则应注意一些危险。 编写测试,不要记录下来。 记录的测试通常依赖于自动生成的xpath,这些xpath会因您对代码所做的每一个微小更改而中断。 我相信Cucumber是编写这些测试的良好框架,您可以将其与WebDriver一起使用以自动执行浏览器交互。 考虑测试的代码。 在UI测试中,您将必须使元素更易于查找,因此不必依赖复杂的xpath。 通常不经常添加class和id元素。 不要为每个小问题编写测试。 这些测试编写起来很昂贵,而且运行时间太长。 您应该专注于探索大多数功能的案例。 如果您在此级别上编写了太多的测试,则可能会测试与先前在单元测试中测试过的功能相同的功能(假设您已经编写了它们)。

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

Carlos answered 2020-01-14T16:01:30Z
4 votes

有很多选择和工具。 但是他们的选择取决于您是使用Web UI还是桌面应用程序?

假设您提到的工具是Web UI。 我建议使用Selenium(又名WebDriver):[http://seleniumhq.org/docs/]

它支持多种语言(清单中有Ruby)。 它可以在各种浏览器上运行,并且它非常容易使用,并提供了许多可用的教程和技巧。哦,它是免费的,当然:)

buxter answered 2020-01-14T16:02:00Z
2 votes

尽管我喜欢这篇文章,但由于我现在编写了大量测试,并且您现在如何测试前端,所以我会发布我对问题的答案。

因此,就FE测试而言,我花了大量时间与Jasmine一起使用业力,尽管业力将与mocha&qunit等其他测试套件很好地配合使用。 尽管这些功能很棒,但因果报应允许您直接与浏览器进行交互以运行测试。 缺点是,随着您的测试套件变大,它可能变得很慢。

因此,最近我搬到了Jest,它的速度要快得多,如果您的写作有反应的应用程序,那么将酶与快照测试结合使用,可以为您提供很好的覆盖范围。 谈论覆盖范围Jest已内置并设置了Istanbul覆盖范围,并且模拟非常易于使用。 它的缺点是无法在浏览器中进行测试,并且使用了称为jsdom的东西,该方法速度很快,但是确实有些麻烦。 我个人觉得这没什么大不了的,特别是当我通过webpack / babel编译代码时,这意味着跨浏览器的错误很少且相差无几,因此,如果您仍然手动进行测试,通常就不是问题(和imo,您应该 )。

就在rails堆栈中进行工作而言,这很容易,因为webpacker gem现已可用,并且使用npm和node的情况通常要多得多。 我建议使用nvm来管理您的节点版本

虽然这不是严格的测试,但我也建议您使用linting,因为这也会在您的代码中引起很多问题。 对于JS,我使用更漂亮的eslint和scss / css使用stylelint

在测试内容方面,我认为,正如卡洛斯(Carlos)所言,测试金字塔仍然有意义,毕竟理论并没有改变,只是工具。 我还会增加关于测试的实用性,我会一直进行测试,但是取决于项目的水平和覆盖范围。 管理您的时间和花费时间/天数来测试一个短生命周期项目非常重要。 较大/较长期的项目较大的测试套件的好处显然更大。

无论如何,我希望这可以帮助关注此问题的人们。

DJ Forth answered 2020-01-14T16:02:50Z
translate from https://stackoverflow.com:/questions/11741738/frontend-testing-what-and-how-to-test-and-what-tool-to-use