前端自动化测试的核心概念及思考

本文，将主要结合钉钉中的业务实践和落地，描述笔者对前端自动化测试场景的理解。

本文将主要从“为什么前端要做自动化测试、前端自动化测试分类、业务做自动化测试要抓住的核心点、核心工具推荐“这四个部分做阐述，下面直接进入正文。

大钉钉团队多岗位开启火热招聘～～为不影响阅读知识，详细招聘信息见文末。

一、为什么前端要做自动化测试

在业务高速发展的阶段，前端开发的灵活性、敏捷型，扮演着举足轻重的作用。但是，“敏捷”同样与“风险”并存，如何“稳中求快”，始终是我们作为前端技术人应不断探索的课题。随着钉钉体量的不断增大，“质量第一，稳定压倒一切”也成为当下主体。以此为背景，笔者针对“前端自动化测试”做了系列探索和实践，本文将主要简述下“前端自动化测试”的一些主要概念。以及在每一个相似概念背后，笔者在实际场景下的思考。

很多人会说，前端随着业务变化和迭代，代码的变动性十分频繁，但是扪心自问，自己的手里，是否是有“一两个业务”作为团队的基础核心业务，部分逻辑甚少发生变化，同时这部分作为核心功能，是所有用户都会使用的，如：前端登陆页、前端注册页等。

特别针对这些“核心功能”的高频页面，如若带来用户可感知的Bug，那么“修复、复盘、舆论等影响”随着业务发展和体量增大，带来的代价会愈发不可控制，下面简单列一些在此上的代价消耗：

修补这些 Bug 会耗费大量时间，我们也必须停下手头的其他工作。粗略估计每一个 Bug 都将至少消耗开发者 30 分钟的时间，而这还不算修补它们的时间。
所有的错误报告都必须被“开发者自己或QA”二次验证。
机会成本：开发团队必须等到 Bug 修补以后，才能继续按照计划开发或发布。
前端Bug会直观影响用户体验，进而导致用户体感差，严重下用户减少，甚至赶走潜在客户。
部分代码漏洞，不通过黑盒或白盒的自动化测试覆盖，很难在有限时间内，复现和检查到这些问题，特别是修改前人代码的时候。
有时候，诊断这些 Bug 的人并不是开发它们的人，这导致了开发人员因对代码不熟悉，而投入更多时间。

以上 6点，或多或少在项目开发中，前端开发同学一定会有体感。这里也放置一张“微软前后端整体的自动化测试及成本统计”分布图，看图后我们也会进一步总结提炼出：自动化测试对不可控代价，带来的积极改善。

图1-1(微软公司测试的数据统计结果)，笔者主要提炼为三个信息：

1、85%的缺陷都在代码coding阶段产生。

2、发现bug的阶段越靠后，所消耗的成本和代价就越高。

3、无任何自动化测试保证，直接发布所消耗的成本和代价是十分昂贵的。

那到这里，为什么要做自动化测试这件事情，也有了很明确的初步结论。最后我们也再小结一下，前端为什么要关注自动化测试。

在生产环境里的 Bug ，使公司或组织付出的实际代价，往往要数倍于在自动化测试时发现的 Bug。如果按照上图计算投资与回报的话，测试驱动开发（TDD）将具有压倒性的优势。

同时，不难发现，一个优秀的技术驱动的科技公司，不论前端开发，还是后端开发，核心代码功能必然是自动化测试驱动开发（TDD）的。

既然我们知道了前端为什么要做自动化测试，那么接下来将简单介绍下，前端自动化测试的分类有哪些。

现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：110685036

二、前端自动化测试分类

前端自动化测试整体大致分为以下四类：单元测试、集成测试、ui测试、端到端(e2e)测试/功能测试，虽各有场景，但也在“不同阶段“各有优劣。这里必须强调是“不同阶段”，才会产生不同的选择优劣，因为每一种自动化测试本身，都有其实际不可替代的场景。
1、单元测试
单元测试：是指对应用中的最小可测试单元进行检查和验证，通常指的是独立测试单个函数。
举一个场景：你现在要改造一个老前端框架，并根据其开发一个向后兼容的新框架。此时老框架针对其内部API函数，写了充分的单测用例。那么，在开发新框架时，直接运行老前端框架的单测用例，偌所有测试用例都通过(PASS)，则可快速保证内部API函数的一致性，快速验证了所有功能场景。

PS：在笔者看来，前端单元测试，是所有类型的前端自动化测试中成本较低，且90%以上前端逻辑场景都可覆盖的，非常有效的自动化测试手段。

2、集成测试
集成测试：就是测试应用中完全不同的模块(组件)间，如何集成、如何一起工作。这和它的名字一致，用来确保不同组件间互相合作的正确性。

举一个场景：测试在接收到特定的 post 请求以后，数据库会添加对应的记录，那么这就是集成测试，而不是单元测试。远端发起post请求的服务和数据库，就是完全不同的模块。

3、UI 测试
UI 测试：是对图形交互界面的测试。UI层是用户使用产品的入口，所有功能通过这一层提供给用户。
举一个例子：现在你要对比，“特定页面的视觉样式”是否严格满足“设计师产出的视觉稿”，就涉及到了ui测试。一般会涉及到UI界面的快照(界面截图)对比等。

4、端到端(e2e)测试
端到端(e2e)测试/功能测试：是站在用户角度的测试，把我们的程序看成是一个黑盒子，用来确保整个应用会按照用户期望的那样运行。

不关心代码内部的实现，只负责打开浏览器，把测试用例中设置的内容在页面上输入一遍，看是不是得到想要得到的结果。

适当把单元测试，集成测试、UI测试和e2e测试，按照发布上线前的不同阶段进行互相隔离后，可以在开发的不同阶段分别运行它们，进而全面的保障应用的稳定性。

三、业务做自动化测试要抓住的核心点

1、将自动化测试的运行集成进研发流程中

在持续的集成过程中，测试一般会出现在下面三个阶段。

编码阶段，主要是开发者自测逻辑代码，这时单元测试就很有用。
开发中间阶段，主要是能够在发现问题时立刻停下来。这时集成测试、ui测试，端到端测试都可用。
生产环境阶段(正式对用户产生影响前)，主要是运行功能测试套件中一个叫做「冒烟测试」的子集，确保部署的时候没有因依赖项等变化产生异常。

好的自动化测试流程，一定要集成进发布平台的发布流程中。一定要做到，可约束、可查看、可管控。只有这样才能更好的保证自动化测试等用例的持续存在，以及应用代码的长期稳定性和可读性。

2、优先推荐业务落地前端单元测试

参考前端业内，及上方图1-1中“微软公司的测试统计结果图”中，我们还可以得出第4个结论：单元测试在所有自动化测试分类中，在实际场景下的投入产出比最高。在实际钉钉业务的落地过程中，也初步明确这一点，因此优先推荐前端业务，保证并完成单元测试用例及相关套件能力支持。

下图为，自动化测试中的测试金字塔（敏捷大师Mike Cohn提出该概念，后由Martin Fowler大师在此基础上提出了测试分层概念）。按照测试金字塔模型以及投入/产出比，越向下，回报率越高。

图1-2 自动化测试金字塔

3、正确对待前端自动化测试

作为前端同学，请不要对单元测试存在如下误解：

那是测试同学干的事情。作为优秀的开发同学，我们理应保证自己所写代码的高健壮性和向前扩展性。
单元测试代码是多余的。软件系统的整体功能是否正常，与各单元部件的测试正常与否是强相关的。
单元测试代码不需要维护。一年半载后，那么单元测试几乎处于废弃状态。
单元测试与线上故障没有辩证关系。好的单元测试能够最大限度地规避线上故障。

单测本身一定是有前期投入的，这个投入是否值得，除开上方的阐述外，“做一件错事，远比你做一百件正确事影响更大”，这句话值得我们铭记于心。

大流量前端业务，务必应接入单测。

很多时候一个小故障，带来的影响远比你迭代一百个业务需求带来的影响更巨大也更沉重。除了可以适当降本提效外--特别在代码重构和向前优化时有显著效果；帮助发现业务前端代码漏洞问题，也是业内公认的绝佳手段。

四、核心工具推荐

下方将按照前端自动化测试的分类，进行相应工具推荐，推荐仅表达笔者根据业内多团队调研及场景实践中，个人的建议和总结。且相应官网文档及网上的使用指南相对详细，暂不在此篇文章中针对各工具的使用做更多详细介绍，详细内容建议自行查阅下方链接中的官网文档。

1、单元测试：

强烈推荐Jest。其基于Jasmine，做了大量修改并添加了很多特性，同样开箱即用，且异步测试支持良好。

官网地址：Getting Started · Jest

2、集成测试：

无明确主流框架推荐。对于小程序的集成测试，内部自研测试套件。

3、ui测试：

（1）Needle。官网地址：Needle: Automated tests for your visuals

（2）backstopjs。官网地址：https://garris.github.io/BackstopJS/21

4、端到端测试（e2e）：

（1）纯react项目的测试非常适合使用Puppeteer 。官网地址：https://pptr.dev/

（2）小程序测试：内部需自研端到端测试套件。

（3）一个很酷的端到端测试框架cypress。官网地址：https://www.cypress.io/how-it-works/

五、结语：

本文主要是引入前端自动化测试核心概念及笔者的思考和理解，后续也会针对“业务如何做单测”做更详细阐述。19年初开始做时，网上基本没有好的文章，但今年逐渐发现了很多该领域的相关文章。可以感受到这部分前端领域，很多团队都在不断探索和实践。后续我也会结合在钉钉前端团队的实践，延展更多自动化测试的系列文章。立足“质量第一，稳定压倒一切“，从各个方面一起探索前端自动化测试之路。

如果文章对你有帮助，记得点赞，收藏，加关注。会不定期分享一些干货哦......