测试金字塔应该看起来更像一只螃蟹
这是格列布·巴姆托夫关于JS党#148的一段虚构的摘录。Gleb是Cypress.io的工程副总裁。要获得完整的体验，你应该边看边听。
通常，人们会说测试就像金字塔。想象一下像埃及那样的金字塔。
在底部，您有一个非常广泛的单元测试层。而单元测试测试的是最小的代码片段。
(假设您编写了一个将两个数字相加的函数；因此您编写了一个测试。如果我使用参数2和3调用该函数，是否会得到5？)。
世界上每种语言都有一个单元测试框架，因为它非常简单。只需加载一段代码，运行它，检查您得到的结果，确保它符合您的预期。这就是金字塔底部通常非常宽的原因，因为只需编写数百个测试来测试您所有的小组件就很容易了。
当你在金字塔中向更高的位置移动时，现在你正试图把代码单元放在一起。
也许您正在尝试使用TODO类，但是表示一些东西，然后您要做一些其他的代码片断。您现在主要是想看看几个代码单元是否协同工作；它们是如何集成的。这就是您发现后端团队和前端团队实际上沟通不是很好的地方。所以我的模块与另一个模块不能很好地协同工作。
端到端测试是指您试图像最终用户那样运行整个测试。例如，您在浏览器中打开一个网站，然后导航和使用您的Web应用程序，并检查它是否正确地更新了页面，是否正确地调用了后端。
金字塔的顶部通常很尖。这是因为您不应该编写很多端到端测试。我认为现在这种想法已经过时了，因为为什么编写端到端测试会很难呢？
很难安装端到端的测试跑步器。太挑剔了。它是不稳定的。这些测试不可靠，没有给您太多信心，因此您实际上花费在维护大多数端到端测试上的时间比您实际花在编写Web应用程序上的时间还要多。
编写许多单元测试，编写许多集成测试，但只编写几个端到端测试(可能只是为了保持理智)。
当我们看一看Cypress允许您做什么(即编写许多非常少的有用测试)时，您会想要编写更多的端到端测试。您希望使金字塔几乎像一个矩形，或者可能像一个披萨片，其中有很多端到端测试和几个单元测试。
这又回到了效率的问题上。如果您测试一个将两个数字相加的小的单个函数…。是的，测试很简单，速度也很快，但它确实只达到了那个特定的功能。但是你的Web应用程序很大，潜在的错误来源不仅仅是你的函数中的逻辑错误：
你必须在后端和前端以及它们之间的所有互联网小东西中正确设置。而现代的浏览器(这是一台极其复杂的机器)中，您认为它将完全执行“两个数字相加”的假设与最终结果是不同的。在现代浏览器中，您认为它将完全执行“两个数字相加”的假设与最终结果是不同的。
那么，当你思考它的有效性是什么，或者你实际锻炼了多少？您能找到多少潜在错误？
嗯，单元测试可以找到一些逻辑错误，这很棒。我一直都在为此编写单元测试。但是所有可能的误差源都是通过端到端测试发现的。
如果您可以测试您刚刚部署的站点并了解主用户情景-就像人类用户稍后所做的那样-如果这能正常工作的话…。当真正的用户经历同样的事情时，它可能会成功。
所以，如果我们翻转金字塔，把顶部做得越来越宽，我们会写更多的端到端测试，因为它们是有效的，我们让它几乎像披萨片一样，我们在那里写更多的端到端测试，或者如果我们从端到端测试开始，这是有意义的。
最近发生了什么事？像Cypress这样的功能测试者或测试运行者找到一个文本，点击按钮，做所有这些事情，但它只验证应用程序是否工作。
它不会验证应用程序看起来是否良好。我们都是人类。我们喜欢漂亮的东西，所以我们喜欢款式。有些人甚至将CSS添加到他们的应用程序中。我不知道为什么，但这太疯狂了。😉。
一旦他们添加了CSS并设计了样式，他们希望确保应用程序看起来是一样的，并且不会不小心弄坏它。
如果我们选择元素，并且您使用它们，并且您检查项目的数量，CSS仍然可以更改。然后应用程序看起来就像垃圾一样，用户会不高兴，没有人会从你的网站上买任何东西。
赛普拉斯只是一个功能测试跑步者。它不关心CSS。很难写出所有的断言说：
此元素的颜色应为蓝色，边框半径应为2…
因此，人们所做的-因为它是真正的浏览器-是您可以获取并生成页面(或页面的一部分)的屏幕截图，然后您可以进行视觉测试。
因此，您保存一个屏幕截图，它将成为基线或主图像。下次运行测试时，您将拍摄另一个屏幕截图，然后逐个像素地将其与您的基线图像进行比较。然后将这些基线图像与源代码一起存储在存储库中。
计算机非常擅长逐个像素地比较图像，它们会告诉你：
以前是这样的。现在是不同的颜色了。这里是它改变的地方。
他们的意思是要更改这里的CSS吗？为什么它不再是蓝色而现在是红色？
对我来说，视觉测试是一个非常有效的工具，配上完整的端到端测试，你可以直接加载应用程序，截图，现在你知道它永远不会意外改变。在应用程序做出反应、更改布局、出现新的DOM元素时执行某些操作。然后再截取另一张屏幕截图。
砰的一声。现在你把它绑得太紧了，任何视觉改变(任何CSS、SVG，任何东西)都会随着像素的变化而改变，你就会知道你不小心破坏了样式。你会知道你不小心让Craigslist看起来像Reddit…。
所以对我来说，现在最有用的金字塔是一个金字塔，完全是端到端的，功能和视觉测试。就这样。
然后，我可以通过检测应用程序代码来跟踪代码覆盖率；将贯穿整个流程的端到端测试(就像真正的用户一样)在代码覆盖率方面非常有效。
嗯，因为端到端测试测试了整个应用程序，如果它贯穿整个用户故事，那么一个测试就可以涵盖大部分内容。
然后查看未覆盖的行，并为这些边缘情况编写端到端测试。如果您无法同时访问这两行，因为可能存在无法通过设计良好的接口访问的边缘情况，那么您可以编写端到端测试、API测试和组件测试，然后单击这些行，因此您知道这些代码的组件和单元测试也可以正常工作。
但它变成了端到端测试的金字塔，其他类型测试的小三角形，对我来说，它看起来像一只螃蟹，因为它是一种很大的头盔壳，在它下面有小装甲的腿。
我们和格莱布的谈话不止于此。收听整集，听听Cypress的故事，他们是如何围绕开源找到一种商业模式的，你如何让你的端到端测试不那么脆弱，等等。从这里开始播放，就在这里，👇。
哦，别忘了在你最喜欢的播客应用中订阅JS Party，这样你就不会错过未来的剧集和洞察力。✌️
