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

微信扫一扫,分享到朋友圈

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

本文,将主要结合钉钉中的业务实践和落地,描述笔者对前端自动化测试场景的理解。在文末也放置了两篇笔者认为写的不错的文章,可以作为各位的纵向延伸,且本文文章中不会针对延伸文章中已经描述的很好的内容,再做详细描述。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、前端自动化测试分类

前端自动化测试整体大致分为以下四类:单元测试、集成测试、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. 那是测试同学干的事情。作为优秀的开发同学,我们理应保证自己所写代码的高健壮性和向前扩展性。
  2. 单元测试代码是多余的。软件系统的整体功能是否正常,与各单元部件的测试正常与否是强相关的。
  3. 单元测试代码不需要维护。一年半载后,那么单元测试几乎处于废弃状态。
  4. 单元测试与线上故障没有辩证关系。好的单元测试能够最大限度地规避线上故障。

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

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

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

四、核心工具推荐

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

1、单元测试:

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

官网地址: Getting Started · Jest

2、集成测试:

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

3、ui测试:

(1)Needle。官网地址: Needle: Automated tests for your visuals

(2)backstopjs。官网地址: https:// garris.github.io/Backst opJS/ 21

4、端到端测试(e2e):

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

(2)小程序测试:内部需自研端到端测试套件。

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

五、结语:

本文主要是引入前端自动化测试核心概念及笔者的思考和理解,后续也会针对“业务如何做单测”做更详细阐述。

19年初开始做时,网上基本没有好的文章,但今年逐渐发现了很多该领域的相关文章。可以感受到这部分前端领域,很多团队都在不断探索和实践。后续我也会结合在钉钉前端团队的实践,延展更多自动化测试的系列文章。立足“质量第一,稳定压倒一切“,从各个方面一起探索前端自动化测试之路。

技术重在交流和互相学习,为写出更好的文章,也阅读了两篇相关内容的文章,可以作为各位的扩展阅读: https:// juejin.im/post/68449039 83098626056 https:// juejin.im/post/68449040 47728656392

微信扫一扫,分享到朋友圈

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

华为云——云配置(域名解析、添加IIS、access数据库连接)

上一篇

视频号这盘棋微信下大了!直播新增三大入口,最小化窗口可跳出微信……

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友