这是一种在前端测试领域立竿见影的简单方法。
我正在GitHub上推进了一个大型UI测试最佳实践项目,希望读者来看看这个项目并提供反馈。
如果你是经验丰富的测试人员,显然,常见的捷径就是使用测试套件。但谈到如何正确测试,该测试哪些内容,避免哪些内容,该选择哪类测试等——这些学习起来可并没有那么容易。
测试刚起步时需要跨过的门槛是很高的。一切都是陌生的,你尝试实现的示例不能正常工作,你不清楚你的测试为什么失败,不明白这些失败与你的代码之间有什么关系……
我们都知道所谓的测试金字塔,通常我们是从底层开始的。
标准的测试金字塔方法:自下而上。
从底部开始探索金字塔是有道理的。从单元测试开始往往比较容易,因为它们速度快,不需要复杂的上下文或工具。一个“单元”(“单元”可以表示很多内容:函数、组件等)仅包含几行代码,并且通常只有很少的依赖项(或根本没有依赖项)等等。
这种方法最大的缺点是什么?从本质上讲,它缺少的是置信度。
测试的关键就在于置信度,是在高置信度但缓慢的测试与低置信度但快速的测试之间谋求平衡。
如果你是测试领域的新手,“置信度”这个词可能对你有些陌生。这里简单说一下:如果测试通过,你能在多大程度上确定所测试的应用程序可以正常工作?这就是测试的置信度。
为什么单元测试的置信度那么低?举一些例子:
答案是否定的。整个应用程序是由许多彼此集成的单元组成的,而单元测试没有考虑一些呈现性(CSS)问题——有可能一些上层的图像覆盖了提交按钮而导致用户无法注册。
再说一下关于测试新手缺少的经验(就像我两年前一样):一切新事物都需要很大的认知负担,并且你不能同时面对太多新事物。学习应用程序的常规开发、探索新的测试主题、了解单元测试和UI测试世界(后两者需要不同的工具和流程)这么多事情很难同时面对。
看一下JavaScript和Node.js的测试最佳实践项目中这张内容详细的图片:
图片由Yoni Goldberg提供
对于有经验的开发人员而言,"一切新事物都需要很大认知负担"这一结论也是成立的;而当你首次进入测试世界时,情况会更糟。
你不可避免地将大部分精力放在金字塔的底部,即单元测试。你将要编写的一大堆测试可以让你熟悉测试环境,但是这些测试却没有置信度。你可能会问自己:
自下而上的方法不可避免地使你专注于单元测试。
问题不在于你,而是初学者使用的测试类型不对!
我建议的解决方案是什么?那就是从顶部开始,首先专注于UI测试!
首先,什么是UI测试(也称为功能测试、端到端测试等)呢? 本质上这是一个脚本,可以打开真实浏览器,并与DOM元素交互,就像真正的终端用户一样。有些视频给出的定义要长得多。
针对Conduit -Real World项目运行的端到端测试:
Conio Backoffice的一些UI测试:
在以上视频中你可以看到一个真实的浏览器,这个浏览器可以加载整个前端应用程序并与其交互。这样做的好处是:
这种方法也有缺点,我稍后会列出来。我建议的方法是:
从上到下的方法。
这篇文章谈的不是最佳或较差的实践(这方面的内容请参阅文章结尾的资源列表)。本文旨在让前端开发新人在测试领域真正获益。我的目标是提供一种更实用的方法,使开发人员可以享受测试的优势,并且不会比测试之前产生更多的疑惑。
这才是重点所在!请注意,我并不反对单元测试!每一种测试都很重要,不同的测试会提供不同的反馈!从顶端开始探索金字塔的开发人员会愉快地探索整个测试世界。
然后,你将发现高层UI测试的一些局限:
解决上述这些问题的方法是:向下探索测试金字塔!等到你开始使用较低层级的测试方法,干得漂亮!这就是这篇文章的目标!
两种方法的结果:
我和Jaga Santagostino在ReactJSDay 2019大会的React测试课程中采用了自上而下的方法。
为什么“测试金字塔”将UI测试放在顶部?好吧,因为它们通常很昂贵(就持续时间和编写成本而言)。那么,如果它们如此昂贵,为什么我建议从它们开始呢?
希望本文对你有所帮助。请随意留下你的反馈或分享你在激动人心的测试世界中得到的经验。
作者介绍: Stefano Magni是一个热情、积极向上的前端开发人员,JavaScript和测试爱好者。他也是Cypress大使和发言人。
原文链接: https://dev.to/noriste/new-to-front-end-testing-start-from-the-top-of-the-pyramid-36kj
领取专属 10元无门槛券
私享最新 技术干货